一款优秀的富文本编辑器element tiptap的使用

一、安装
终端执行命令

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>