vue 富文本编辑器 项目实战用法

1.挑个富文本编辑器

首先针对自己项目的类型，确定自己要用啥编辑器。

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: ``,
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 

△ 在这种情况下，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 
  7 
  8 
116 
117 

 

页面代码 ：

 1 
12 
33 
34 

 

直接复制就可以用了，更多功能可以参考文档(点我！)。