vue 富文本编辑器 项目实战用法
首先针对自己项目的类型，确定自己要用啥编辑器。
1.1 wangeditor
如果一般类似博客这种项目不需要花里胡哨的，功能也不要求贼多的，推荐一下wangeditor(点击跳转)。能覆盖基本上所有的常见操作，轻量化，开源，有中文文档。
▽wangeditor效果图
1.2 tinyMCE
如果需要复杂的编辑器，推荐tinyMCE(点击跳转)，同样也非常简单和优雅，但是文档是英文的，配合chrome的翻译，基本上能看懂，而且tinyMCE有另外一个好处，word上的东西基本上都可以保存格式复制到编辑器里，可以比较方便的转移。
▽tinyMCE效果图
剩下的很多编辑器，但是大多没接触过，推荐的这两个，一个简洁够用，一个功能齐全，能覆盖90%以上的场景了，所以就不推荐别的了。另外本文主要讲wangeditor。
2.项目准备（wangeditor）
本文选用框架的是nuxt.js，和vue-cli基本一致。都0202年了，如果不是模块化的项目请参考下wangeditor的文档。
既然谈到模块化项目，那么将编辑器设为组件那就是非常必要的了。
但是有一个问题，vue自带的数据双向绑定是不支持组件内外之间的双向传递的(其实支持的，就是我不知道)，也就是说，如果你将富文本编辑器封装在组件B中，你在A页面用组件B去写入数据C，这个C数据只能在B的组件页面中获取，无法直接在A页面中取到。但是项目逻辑不可能在组件的B页面上去执行，一定是在A页面去完成逻辑，所以一定要在A中获取到数据。
为了解决这个问题，我们需要回顾一下vue的v-model和父子组件的传值方式。如果你了解组件数据的双向绑定和它的原理，可以忽略下面，直接到最后的代码处就行了。
2.1 v-model
这个很基础了，就简单放个例子好了。
1 <input type="text" v-model="message">2 <p>{{message}}</p>
这个例子其实等价于
1 <input type="text" :value="message" @input="message = $event.target.value">
挺好理解的，① v-bind:"message" 等于给input赋值，② @input="message = $event.target.value" 等于给message赋值，所以这样才实现了双向绑定，也就是修改message时会触发v-bind让Input变换值，在Input输入时能触发input事件来改变message的值。
2.2实现组件v-model
那现在我搞一个组件，给他设上v-bind ，然后顺便监听他的input，这两步可以化为一步v-model="price"，也可以看非组件时候的"② @input="message = $event.target.value" 等于给message赋值，"。因为监听了input会将数据赋给price，然后通过v-bind会将price的值赋给组件内部的props中的value属性。
1 <div id="app">2 <price-input :value="price" @input="onInput"></price-input>
3 </div>
1 var app = new Vue({ 2 el: '#app',
3 data(){
4 price: ''
5 },
6 methods: {
7 onInput(val){
8 this.price = val;
9 }
10 }
11 })
我们现在已经完成第二步，现在只需要完成第一步就行了，第一步体现在组件上就是接收第二步传进来的信息，然后通过$emit再将它传出去。即完成了组件上的数据双向绑定。组件内部代码如下：
1 Vue.component('custom-input',{2 template: `<input :value='value' @input='updateVal($event.target.value)' type='text'></input>`,
3 props: ['value'],
4 methods: {
5 updateVal(val){
6 this.$emit('input', val);
7 }
8 }
9 });
ps：现在$emit('input',val)中的input方法是指组件外的@input="oninput"而不是指组件内部的@input='updateVal($event.target.value)'
2.3 model
但是现在还有一个问题，默认情况下，组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。
1 Vue.component('my-input',{
template: `<input type="text" :value="uname" @input="updateVal($event.target.value)">`, 2 props: {
3 // 如果你想在组件上使用v-model的话，此处的uname应该叫value
4 uname: {
5 type: String,
6 default: 'tom'
7 }
8 },
9 methods: {
10 updateVal(val){
11 // 如果你想在组件上使用v-model的话，此处的changeXXX应该叫input
12 this.$emit('changeXXX',val)
13 }
14 }
15 })
1 <my-input v-model="name" value='some value'></my-input>
△ 在这种情况下，v-model的绑定是失效的，所以只能改成拆解写法：
1 <my-input :uname='name' @changeXXX='val => {foo = val}' value='some value'></my-input>要想使用v-model这时候只能在vue.component的参数对象里加一个Model对象，指出你想要value叫uname, input叫changeXXX。然后快乐的使用v-model就可以了，代码如下：
1 Vue.component('my-input',{ 2 model: {
3 prop: 'uname',
4 event: 'changeXXX'
5 },
6 props: {
7 uname: {
8 type: String,
9 default: 'tom'
10 }
11 },
12 methods: {
13 updateVal(val){
14 this.$emit('changeXXX',val)
15 }
16 }
17 })
这样v-model 就可以生效了。另外如果你用v-model的话，event的名字没有什么特殊要求，你填什么都可以。
3.实战
3.1 安装和导入
直接npm安装， $ npm install wangeditor
安装好了在components/public下新建editor.vue文件下导入文件，如果直接require会出现navigator is not defined 的错误，搜了一下可能是因为nuxt.js服务端渲染的问题，那时候还没有navigator这个对象，所以导致出现这个错误。所以引用时要加个判断。 const E = process.browser ? require("wangeditor") : undefined;
3.2 项目代码
代码整体如下：
1 <template lang="html">2 <div class="editor">
3 <div ref="toolbar" class="toolbar"></div>
4 <div ref="editor" class="text"></div>
5 </div>
6 </template>
7
8 <script>
9 // import E from "wangeditor";
10 const E = process.browser ? require("wangeditor") : undefined;
11 export default {
12 data() {
13 return {
14 // uploadPath,
15 editor: null,
16 info_: null
17 };
18 },
19 model: {
20 prop: "value",
21 event: "change"
22 },
23 props: {
24 value: {
25 type: String,
26 default: ""
27 },
28 isClear: {
29 type: Boolean,
30 default: false
31 }
32 },
33 watch: {
34 isClear(val) {
35 // 触发清除文本域内容
36 if (val) {
37 this.editor.txt.clear();
38 this.info_ = null;
39 }
40 },
41 value: function(value) {
42 if (value !== this.editor.txt.html()) {
43 this.editor.txt.html(this.value);
44 }
45 }
46 },
47 mounted() {
48 this.seteditor();
49 this.editor.txt.html(this.value);
50 },
51 methods: {
52 seteditor() {
53 // http://192.168.2.125:8080/admin/storage/create
54 this.editor = new E(this.$refs.toolbar, this.$refs.editor);
55 this.editor.customConfig.uploadImgShowBase64 = true; // base 64 存储图片
56 // this.editor.customConfig.uploadImgServer =
57 // ""; // 配置服务器端地址
58 // this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header
59 // this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名
60 // this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
61 // this.editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
62 // this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
63
64 // 配置菜单
65 this.editor.customConfig.menus = [
66 "head", // 标题
67 "bold", // 粗体
68 "fontSize", // 字号
69 "fontName", // 字体
70 "italic", // 斜体
71 "underline", // 下划线
72 "strikeThrough", // 删除线
73 "foreColor", // 文字颜色
74 "backColor", // 背景颜色
75 "link", // 插入链接
76 "list", // 列表
77 "justify", // 对齐方式
78 "quote", // 引用
79 "emoticon", // 表情
80 "image", // 插入图片
81 "table", // 表格
82 "video", // 插入视频
83 "code", // 插入代码
84 "undo", // 撤销
85 "redo", // 重复
86 "fullscreen" // 全屏
87 ];
88
89 this.editor.customConfig.uploadImgHooks = {
90 fail: (xhr, editor, result) => {
91 // 插入图片失败回调
92 },
93 success: (xhr, editor, result) => {
94 // 图片上传成功回调
95 },
96 timeout: (xhr, editor) => {
97 // 网络超时的回调
98 },
99 error: (xhr, editor) => {
100 // 图片上传错误的回调
101 },
102 customInsert: (insertImg, result, editor) => {
103 // 图片上传成功，插入图片的回调
104 }
105 };
106 this.editor.customConfig.onchange = html => {
107 this.info_ = html; // 绑定当前逐渐地值
108 this.$emit("change", this.info_); // 将内容同步到父组件中
109 };
110 // 创建富文本编辑器
111 this.editor.create();
112 }
113 }
114 };
115 </script>
116
117 <style lang="css">
118 .editor {
119 width: 100%;
120 margin: 0 auto;
121 position: relative;
122 z-index: 0;
123 }
124 .toolbar {
125 border: 1px solid #ccc;
126 }
127 .text {
128 border: 1px solid #ccc;
129 min-height: 500px;
130 }
131 </style>
页面代码 ：
1 <template>2 <div>
3 <editor-bar
4 v-model="detail"
5 :isClear="isClear"
6 @change="change"
7 ></editor-bar>
8
9 <button @click="send">点我！</button>
10 </div>
11 </template>
12 <script>
13 import EditorBar from "../components/public/editor";
14
15 export default {
16 components: { EditorBar },
17 data() {
18 return {
19 isClear: false,
20 detail: ""
21 };
22 },
23 methods: {
24 change(val) {
25 console.log(val);
26 },
27 send() {
28 alert(this.detail);
29 }
30 }
31 };
32 </script>
33
34 <style></style>
直接复制就可以用了，更多功能可以参考文档(点我！)。
以上是 vue 富文本编辑器 项目实战用法 的全部内容， 来源链接： utcz.com/z/376492.html
