# vue-tiptap-editor

> A Vue Editor Component based on Tiptap

Latest version **0.2.6** (published 2021-12-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-tiptap-editor
pnpm add vue-tiptap-editor
yarn add vue-tiptap-editor
bun add vue-tiptap-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.6 |
| Published | 2021-12-24 |
| First published | 2021-09-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 22 |
| Unpacked size | 2.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | agumr |
| Maintainers | agumr |
| Keywords | editor, tiptap |

## Links

- npm: https://www.npmjs.com/package/vue-tiptap-editor
- npm.io page: https://npm.io/package/vue-tiptap-editor

## Dependencies (22)

- [hashids](https://npm.io/package/hashids.md) ^2.2.8
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.6
- [screenfull](https://npm.io/package/screenfull.md) ^5.1.0
- [vue-awesome](https://npm.io/package/vue-awesome.md) ^4.3.1
- [@tiptap/vue-2](https://npm.io/package/@tiptap/vue-2.md) ^2.0.0-beta.48
- [svg-innerhtml](https://npm.io/package/svg-innerhtml.md) ^1.1.0
- [@tiptap/starter-kit](https://npm.io/package/@tiptap/starter-kit.md) ^2.0.0-beta.101
- [@tiptap/extension-link](https://npm.io/package/@tiptap/extension-link.md) ^2.0.0-beta.19
- [@tiptap/extension-color](https://npm.io/package/@tiptap/extension-color.md) ^2.0.0-beta.2
- [@tiptap/extension-image](https://npm.io/package/@tiptap/extension-image.md) ^2.0.0-beta.15
- [@tiptap/extension-table](https://npm.io/package/@tiptap/extension-table.md) ^2.0.0-beta.30
- [@tiptap/extension-table-row](https://npm.io/package/@tiptap/extension-table-row.md) ^2.0.0-beta.14
- [@tiptap/extension-task-item](https://npm.io/package/@tiptap/extension-task-item.md) ^2.0.0-beta.17
- [@tiptap/extension-task-list](https://npm.io/package/@tiptap/extension-task-list.md) ^2.0.0-beta.17
- [@tiptap/extension-underline](https://npm.io/package/@tiptap/extension-underline.md) ^2.0.0-beta.16
- [@tiptap/extension-code-block](https://npm.io/package/@tiptap/extension-code-block.md) ^2.0.0-beta.17
- [@tiptap/extension-table-cell](https://npm.io/package/@tiptap/extension-table-cell.md) ^2.0.0-beta.14
- [@tiptap/extension-text-align](https://npm.io/package/@tiptap/extension-text-align.md) ^2.0.0-beta.22
- [@tiptap/extension-text-style](https://npm.io/package/@tiptap/extension-text-style.md) ^2.0.0-beta.17
- [@tiptap/extension-font-family](https://npm.io/package/@tiptap/extension-font-family.md) ^2.0.0-beta.14
- [@tiptap/extension-placeholder](https://npm.io/package/@tiptap/extension-placeholder.md) ^2.0.0-beta.28
- [@tiptap/extension-table-header](https://npm.io/package/@tiptap/extension-table-header.md) ^2.0.0-beta.16

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.2.6 (latest) — 2021-12-24
- 0.2.5 — 2021-12-24
- 0.2.4 — 2021-12-17
- 0.2.3 — 2021-12-17
- 0.2.2 — 2021-12-17
- 0.2.1 — 2021-12-17
- 0.2.0 — 2021-12-16
- 0.1.19 — 2021-11-24
- 0.1.18 — 2021-10-21
- 0.1.17 — 2021-10-21
- 0.1.16 — 2021-10-18
- 0.1.15 — 2021-10-15
- 0.1.14 — 2021-09-29
- 0.1.13 — 2021-09-26
- 0.1.12 — 2021-09-23
- … 10 more at https://npm.io/package/vue-tiptap-editor/versions

## README

# Vue Editor Component based on Tiptap
<hr>

## Install
<hr>

#### use npm
```npm
$ npm install vue-tiptap-editor -S
```
## Usage
<hr>

- global
```js
import TiptapEditor from "vue-tiptap-editor"
import "vue-tiptap-editor/lib/style.min.css"
Vue.use(TiptapEditor)
```
- component
```js
import {TiptapEditor} from "vue-tiptap-editor"
import "vue-tiptap-editor/lib/style.min.css"

export default {
    components: { TiptapEditor }
}
```
```vue
<tiptap-editor
  :value="value"
></tiptap-editor>
```
## options
<hr>

- **value:**  {{String}}
    
    initial value. Should be a HTML string. 
- **placeholder:** {{String}}

    placeholder of editor
- **readonly:** {{Boolean}}
    
    default `false`
- **autofocus:** {{Boolean}}

    default `true`
- **extensions:** {{Array}}
    
    extension list

    default `[]`
- **menus:** {{Array}}

    buttons on toolbar

    default:
    ```js
    [
      [
        Undo,
        Redo,
        Divider,
        Header,
        Bold,
        Italic,
        UnderLine,
        Strike,
        Blockquote,
        Code,
        List,
        Todo,
        Divider,
        FontSize,
        FontFamily,
        LineHeight,
        TextAlign,
        Color,
        BackgroundColor,
        Divider,
        Template,
        Link,
        Image,
        Table,
        HorizontalRule,
      ], // left
      [ScreenFull, Menu]   // right
    ]
    ```
- **templateList:** {{Array}}

    template data list.
    ![img.png](./example/img.png)
    example:
    ```js
    [
      { title: "文字数据", id: "data1", type: "文字" },
      { title: "图片数据", id: "data2", type: "图片" },
      { title: "表格数据", id: "data3", type: "表格" },  
    ]
    ```
- **templateTypeMap:** {{Object}}
    
    help parse template data;

    types: 
        TEXT,IMAGE,TABLE

    default:
    ```js
    {
      "文字" : "TEXT",
      "图片" : "IMAGE",
      "表格" : "TABLE"
    }
    ```
## Tiptap Extensions
<hr>

[tiptap custom extensions](https://tiptap.dev/guide/custom-extensions)


## Custom Menu Item

```js
import CommandButton from "src/components/menuButton/commandButton/commandButton.vue";

export default ({ editor }) => ({
    component: CommandButton,      // menu item view (vue component)
    props: {                       // component props
        icon: "bold",
        label: "加粗",
        command: () => {           // click action
            if (!editor) return;
            editor
                .chain()
                .focus()
                .toggleBold()
                .run();
        },
        isActive: editor && editor.isActive("bold"),
    },
});

```

## Slot

- leftMenu: toolbar left menu
- rightMenu: toolbar right menu
- [Custom Name]: sidebar name defined in menus


## API

```js
this.$refs.tiptapEditor.editor     // tiptap editor object 
this.$refs.tiptapEditor.getHTML(); // get HTML
```

## Based On

[tiptap](https://tiptap.dev/)

---
_Source: https://npm.io/package/vue-tiptap-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._