<template>
<div class="el-tips-page">
<el-tiptap
v-model="content"
:extensions="extensions"
></el-tiptap>
</div>
</template>
<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import { ElementTiptapPlugin,
Doc,
Text,
Paragraph,
Heading,
Bold,
Underline,
Italic,
Strike,
ListItem,
BulletList,
OrderedList,
FontType,
SelectAll,
Fullscreen,
Print,
Preview,
TextHighlight,
TextColor,
FormatClear,
TableRow,
TableCell,
TableHeader,
Table,
History,
TrailingNode,
HardBreak,
HorizontalRule,
LineHeight,
Indent,
TextAlign,
TodoList,
TodoItem,
Blockquote,
CodeBlock,
Iframe,
Image,
Link
} from 'element-tiptap'
// 安装 ElementUI 插件
Vue.use(ElementUI)
// 安装 element-tiptap 插件
Vue.use(ElementTiptapPlugin, { lang: 'zh', spellcheck: true })
// 引入 ElementUI 样式
import 'element-ui/lib/theme-chalk/index.css'
// import element-tiptap 样式
import 'element-tiptap/lib/index.css'
export default {
// components: {
// 'el-tiptap': ElementTiptap
// },
data() {
return {
extensions: [
new Doc(),
new Text(),
new Paragraph(),
new Heading({level: 5}),
new Bold(), // 在气泡菜单中渲染菜单按钮
new Underline(),
new Italic(),
new Strike(),
new ListItem(),
new BulletList(),
new OrderedList(),
new FontType(),
new SelectAll(),
new Fullscreen(),
new Print(),
new Preview(),
new TextHighlight(),
new TextColor(),
new FormatClear(),
new TableRow(),
new TableCell(),
new TableHeader(),
new Table(),
new History(),
new TrailingNode(),
new HardBreak(),
new HorizontalRule(),
new LineHeight(),
new Indent(),
new TextAlign(),
new TodoList(),
new TodoItem(),
new Blockquote(),
new CodeBlock(),
new Iframe(),
new Image(),
new Link()
],
content: ''
}
}
}
</script>
<style lang="scss" scoped>
.el-tips-page {
width:100%;
height:100%;
min-height: 400px;
min-width: 50vw;
}
</style>