vue富⽂本编辑器项⽬实战⽤法
1.挑个富⽂本编辑器
⾸先针对⾃⼰项⽬的类型，确定⾃⼰要⽤啥编辑器。
1.1 wangeditor
如果⼀般类似博客这种项⽬不需要花⾥胡哨的，功能也不要求贼多的，推荐⼀下wangeditor()。能覆盖基本上所有的常见操作，轻量化，开源，有中⽂⽂档。
▽wangeditor效果图
1.2 tinyMCE
如果需要复杂的编辑器，推荐tinyMCE)，同样也⾮常简单和优雅，但是⽂档是英⽂的，配合chrome的翻译，基本上能看懂，⽽且tinyMCE有另外⼀个好处，word上的东西基本上都可以保存格式复制到编辑器⾥，可以⽐较⽅便的转移。
▽tinyMCE效果图
剩下的很多编辑器，但是⼤多没接触过，推荐的这两个，⼀个简洁够⽤，⼀个功能齐全，能覆盖90%以上的场景了，所以就不推荐别的了。另外本⽂主要讲wangeditor。
2.项⽬准备（wangeditor）
本⽂选⽤框架的是nuxt.js，和vue-cli基本⼀致。都0202年了，如果不是模块化的项⽬请参考下的⽂档。
既然谈到模块化项⽬，那么将编辑器设为组件那就是⾮常必要的了。
但是有⼀个问题，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"，也可以看⾮组件时候
asp富文本编辑器的"② @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>
1var app = new Vue({
2    el: '#app',
3    data(){
4        price: ''
5    },
6    methods: {
7        onInput(val){
8this.price = val;
9        }
10    }
11 })
我们现在已经完成第⼆步，现在只需要完成第⼀步就⾏了，第⼀步体现在组件上就是接收第⼆步传进来的信息，然后通过$emit再将它传出去。即完成了组件上的数据双向绑定。组件内部代码如下：
1 Vueponent('custom-input',{
2    template: `<input :value='value' @input='updateVal($event.target.value)' type='text'></input>`,
3    props: ['value'],
4    methods: {
5        updateVal(val){
6this.$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 Vueponent('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,
6default: 'tom'
7        }
8    },
9    methods: {
10        updateVal(val){
11// 如果你想在组件上使⽤v-model的话，此处的changeXXX应该叫input
12this.$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这时候只能在vueponent的参数对象⾥加⼀个Model对象，指出你想要value叫uname, input叫changeXXX。然后快乐的使⽤v-model就可以了，代码如下：
1 Vueponent('my-input',{
2    model: {
3        prop: 'uname',
4        event: 'changeXXX'
5    },
6    props: {
7        uname: {
8            type: String,
9default: 'tom'
10        }
11    },
12    methods: {
13        updateVal(val){
14this.$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() {
13return {
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,
26default: ""
27    },
29      type: Boolean,
30default: false
31    }
32  },
33  watch: {
34    isClear(val) {
35// 触发清除⽂本域内容
36if (val) {
lear();
38this.info_ = null;
39      }
40    },
41    value: function(value) {
42if (value !== html()) {
html(this.value);
44      }
45    }
46  },
47  mounted() {
48this.seteditor();
html(this.value);
50  },
51  methods: {
52    seteditor() {
53// 192.168.2.125:8080/admin/storage/create
54this.editor = new E(this.$lbar, this.$refs.editor);
55this.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// 配置菜单
65this.us = [
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
89this.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      };
106this.hange = html => {
107this.info_ = html; // 绑定当前逐渐地值
108this.$emit("change", this.info_); // 将内容同步到⽗组件中
109      };
110// 创建富⽂本编辑器
ate();
112    }
113  }
114 };
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() {
18return {
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>
直接复制就可以⽤了，更多功能可以参考⽂档()。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。