0.2.6 • Published 2 years ago
vue-tiptap-editor v0.2.6
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
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
0.2.1
2 years ago
0.2.0
2 years ago
0.2.6
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.5
2 years ago
0.2.4
2 years ago
0.1.19
2 years ago
0.1.15
3 years ago
0.1.16
3 years ago
0.1.17
3 years ago
0.1.18
3 years ago
0.1.14
3 years ago
0.1.13
3 years ago
0.1.10
3 years ago
0.1.11
3 years ago
0.1.12
3 years ago
0.1.8
3 years ago
0.1.9
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.5
3 years ago
0.1.0
3 years ago