一、安装
终端执行命令
yarn add element-tiptap
二、引入
局部引入和注册组件
import {ElementTiptap,Doc,Text,Paragraph,Heading,Bold,Underline,Italic,Strike,ListItem,BulletList,OrderedList,TodoItem,TodoList,HorizontalRule,Fullscreen,Preview,CodeBlock,TextColor,Table,TableHeader,TableCell,TableRow} from 'element-tiptap'import 'element-tiptap/lib/index.css'
注册
components:{'el-tiptap':ElementTiptap}
三、参数配置
extensions: [new Doc(),new Text(),new Paragraph(),new Heading({level: 5}),new Bold({bubble: true}),new Underline({bubble: true,menubar: true}), // 下划线new Italic(), // 斜体new Strike(), // 删除线new HorizontalRule(), // 分割线new Fullscreen(), // 全屏new Preview(), // 预览new CodeBlock(), // 代码块new TextColor(), // 文本颜色new ListItem(),new BulletList(), // 无序列表 (必须与 ListItem 一起使用)new OrderedList(), // 有序列表 (必须与 ListItem 一起使用)new TodoItem(),new TodoList(), // 任务列表 (必须与 ListItem 一起使用)new Table(), // (与 TableHeader, TableCell, TableRow 一起使用)new TableHeader(),new TableCell(),new TableRow()],content: `<h1>Heading</h1><p>This Editor is awesome!</p>`
四、使用
<el-tiptap lang="zh" v-model="content" :extensions="extensions" height="350" placeholder="请输入文章内容"></el-tiptap>
