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

 

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

posted @ 2020-01-21 05:20  王梓瑞  阅读(...)  评论(...编辑  收藏