element-tiptap富文本编辑器
npm安装
npm install element-tiptap --save
yarn安装
yarn add element-tiptap
全局引入
import Vue from 'vue';import ElementUI from 'element-ui';import {ElementTiptapPlugin } from 'element-tiptap';// 引入 ElementUI 样式import 'element-ui/lib/theme-chalk/index.css';// 引入 import element-tiptap 样式import 'element-tiptap/lib/index.css';// 安装 ElementUI 插件Vue.use(ElementUI);// 安装 element-tiptap 插件Vue.use(ElementTiptapPlugin, {lang: 'zh', // 设置语言为中文});
局部引入
<script>import {ElementTiptap,// 需要的 extensionsDoc,Text,Paragraph,Heading,Bold,Underline,Italic,Strike,ListItem,BulletList,OrderedList,Link,Image,CodeBlock,Blockquote,TodoItem,TodoList,TextAlign,FontSize,FontType,Fullscreen,TextHighlight,TextColor,FormatClear,Table,TableHeader,TableCell,TableRow,History,TrailingNode,HardBreak,HorizontalRule,LineHeight,Indent} from 'element-tiptap';export default {data () {// 编辑器的 extensions// 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中return {extensions: [new Doc(), // 必须项new Text(), // 必须项new Paragraph(), // 必须项new Heading({level: 6 }), // 标题new Bold({bubble: true }), // 加粗 bubble: true 在气泡菜单中渲染菜单按钮new Underline({bubble: true, menubar: false }), // 下划线 bubble: true, menubar: false 在气泡菜单而不在菜单栏中渲染菜单按钮new Italic({bubble: true }), // 斜体new Strike({bubble: true }), // 删除线new ListItem(), // 使用列表必须项new BulletList({bubble: true }), // 无序列表new OrderedList({bubble: true }), // 有序列表new Link(), // 链接new Image(), // 图片new CodeBlock({bubble: true }), // 代码块new Blockquote(), // 引用new TodoItem(), // 任务列表必须项new TodoList(), // 任务列表new TextAlign({bubble: true }), // 文本对齐方式new FontSize({bubble: true }), // 字号new FontType({bubble: true }), // 字体new Fullscreen(), // 全屏new TextHighlight({bubble: true }), // 文本高亮new TextColor({bubble: true }), // 文本颜色new FormatClear({bubble: true }), // 清除格式new Table({resizable: true }), // 表格new TableHeader(), // 表格必须项new TableCell(), // 表格必须项new TableRow(), // 表格必须项new History(), // 撤销new TrailingNode(), // 重做new HardBreak(), // 分割线new HorizontalRule(), // 行距new LineHeight(), // 增加缩进new Indent() // 减少缩进],// 编辑器的内容content: `<h1>Heading</h1><p>This Editor is awesome!</p>`,};},},</script>
注意：局部引入同样需要在main.js中引入element-tiptap样式文件
// 引入 import element-tiptap 样式import 'element-tiptap/lib/index.css';
使用
<template><div><el-tiptapv-model="content":extensions="extensions"lang="zh"/></div></template>
注意：如果使用的是局部引入，需要在使用的时候指定
lang="zh"，否则会报错
自定义图片上传
element-tiptap的本地图片上传默认将图片转换成base64格式，然后与内容保存在一起，可以在extensions中自定义图片的上传方式
new Image({// 自定义图片上传(默认会把图片生成base64字符串和内容存储到一起)// 返回一个 Promise<url>uploadRequest(file) {// 自定义图片上传方式}}),
报错(Duplicate use of selection JSON ID cell)
找到根目录下的node_modules/tiptap-extensions/node-modules，将最后的node-modules改为node-modules–，即可解决
element-tiptap中文文档
