Vue 富文本编辑器 Vue-Quill-Editor 主流富文本编辑器对比
前言：Vue中的很多项目都需要使用富文本编辑器。 使用ueditor和tinymce后，发现不太理想。 所以果断使用vue-quill-editor来实现。
wangEditor（国产，基于javascript和css开发的网页富文本编辑器，开源免费） 优点：轻量级介绍，最重要的是开源，有完整的英文文档。 缺点：更新不及时。 没有强大的开发团队支持。
UEditor（百度）的优点：插件很多，满足各种基本需求。 它由百度网页后端开发部门开发。 缺点：插件提交量比较大，网页加载速度比较慢。 使用起来很复杂。 它是一个前后端不分离的插件。 使用时需要配置一些前端的东西，使用起来不方便。
Kindeditor() 优点：文档完整，全英文，易读。 缺点：图片上传有问题。 如果上传历史记录过多，则会全部加载，导致浏览器冻结。
补充：Tinymce也是一个不错的富文本编辑器html5富文本编辑器html5富文本编辑器，各有各的优点和缺点。 关键是选择最合适的。 因为作者是开发vue，所以直接使用vue-quill-editor比较方便。 根据情况使用。
vue-quill-editor 基本配置
npm install vue-quill-editor -s在main.js中引入
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);使用
需要注意的是工具栏的配置
1.只需填写函数名称
加粗 - bold；
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
这一类的引用 直接['name','name']这种格式就好了2.需要有一个默认值
标题 - header
[{ 'header': 1 }, { 'header': 2 }] 值字体大小
列表 - list
[{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet
上标/下标 - script
[{ 'script': 'sub'}, { 'script': 'super' }], 值sub，super
缩进 - indent
[{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等
文本方向 - direction
[{'direction':'rtl'}]结构
export default {
data () {
return {
content: null,
editorOption: {
modules: {
toolbar: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ script: "sub" }, { script: "super" }], // 上标/下标
[{ indent: "-1" }, { indent: "+1" }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
], //工具菜单栏配置
},
placeholder: '请在这里添加产品描述', //提示
readyOnly: false, //是否只读
theme: 'snow', //主题 snow/bubble
syntax: true, //语法检测
}
}
},
methods: {
// 失去焦点
onEditorBlur(editor) {},
// 获得焦点
onEditorFocus(editor) {},
// 开始
onEditorReady(editor) {},
// 值发生变化
onEditorChange(editor) {
this.content = editor.html;
console.log(editor);
},
},
computed: {
editor() {
return this.$refs.myTextEditor.quillEditor;
}
},
mounted() {
// console.log('this is my editor',this.editor);
}
}
汉化
中文翻译只需要修改工具栏中的样式即可。
.editor {
line-height: normal !important;
height: 800px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: '保存';
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=video]::before {
content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
content: '32px';
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: '标题6';
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
content: '等宽字体';
}
执行以上配置后，可以看到如图所示的效果：
发表评论