vue-tiptap-editor

Vue Editor Component based on Tiptap

---

Install

---

use npm

$ npm install vue-tiptap-editor -S

Usage

---

• global

import TiptapEditor from "vue-tiptap-editor"
import "vue-tiptap-editor/lib/style.min.css"
Vue.use(TiptapEditor)

• component

import {TiptapEditor} from "vue-tiptap-editor"
import "vue-tiptap-editor/lib/style.min.css"

export default {
    components: { TiptapEditor }
}

<tiptap-editor
  :value="value"
></tiptap-editor>

options

---

• 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:

  [
    [
      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. example:

  [
    { title: "文字数据", id: "data1", type: "文字" },
    { title: "图片数据", id: "data2", type: "图片" },
    { title: "表格数据", id: "data3", type: "表格" },  
  ]

• templateTypeMap: {{Object}}

  help parse template data;

  types: TEXT,IMAGE,TABLE

  default:

  {
    "文字" : "TEXT",
    "图片" : "IMAGE",
    "表格" : "TABLE"
  }

Tiptap Extensions

---

tiptap custom extensions

Custom Menu Item

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

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

Based On

tiptap