vue中使用element-tiptap富文本编辑器

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中文文档

vue中使用element-tiptap富文本编辑器相关推荐

vue中引入TinyMCE实现富文本编辑器
整片文章是以vue2.X 引入tinymce富文本编译器首先,先确认你的vue版本是 2 还是 3 ,查看项目的package.json中vue的版本,我的是2.5.2 一共两个步骤 vue工程中安 ...
element ui富文本编辑器的使用(quill-editor)
element ui富文本编辑器的使用(quill-editor) 文章目录 element ui富文本编辑器的使用(quill-editor) 效果展示:(可以上传图片及其视频) 第一步.首先安装富 ...
强悍！基于Vue的无渲染的富文本编辑器——tiptap！
介绍 tiptap编辑器基于Prosemirror,完全可扩展且无渲染.可以轻松地将自定义节点添加为Vue组件. Github https://github.com/scrumpy/tiptap 为什 ...
控制富文本table不能超过div宽度_强悍！基于Vue的无渲染的富文本编辑器——tiptap！...
介绍 tiptap编辑器基于Prosemirror,完全可扩展且无渲染.可以轻松地将自定义节点添加为Vue组件. Github https://github.com/scrumpy/tiptap 为什 ...
vue中如何使用wangEditor 富文本框
在做后台管理项目时常常会用到富文本编辑器,在这里推荐大家使用wangEditor,亲测好用话不多说先上图第一步安装 npm wangeditor --save 第二步在项目中使用先建立一个wan ...
vue实战025:配置TinyMCE富文本编辑器
目录组件安装组件引用添加模板初始化编辑器常用属性配置扩展插件使用之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用,有网友说TinyMCE更好用,所以今天来 ...
VUE快速简单搭建UEditor富文本编辑器
效果图如下所示 Installation npm i vue-ueditor-wrap 下载 UEditor 官网链接: http://ueditor.baidu.com/website/downlo ...
element ui 富文本编辑器
安装 cnpm install vue-quill-editor -s<el-form-item label="推送内容"> <!-- <el-input ...
Vue中TipTap富文本编辑器的输入框内部分样式无法显示
在这个问题上卡了好几天,后来才发现是scoped的问题.在自己写的样式上加上scoped,Tiptap编辑器的输入框样式放在另外一个<style>里,不加scoped就行了如下图,上面的 ...
vue+tiptap ,基于vue的无渲染的富文本编辑器
安装tiptap 官网: github:https://github.com/ueberdosis/tiptap 演示:https://www.vue365.cn/code_demo.php?id=9 ...