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}}
[ { 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
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