vue集成wangeditor3.0版本 解决光标乱跳等问题

关于wangeditor的具体集成方法跟用法 可以参考官网 http://www.wangeditor.com/

下面直接贴上源码

子组件:

  1 <template lang="html">
  2  <div class="editor">
  3    <div class="toolbar"
  4      ref="editor"
  5      style="text-align:left"
  6    >
  7  </div>
  8  </div>
  9 </template>
 10
 11 <script>
 12   import E from 'wangeditor'
 13   import emojiJSON from '@/assets/emoji.json'
 14   import emojiMonkeyJSON from '@/assets/emojimonkey.json'
 15   import emojiRabbitJSON from '@/assets/emojirabbit.json'
 16   export default {
 17     name: 'editoritem',
 18     data() {
 19       return {
 20         editor: null,
 21         info_: null,
 22         isChange:false,
 23         emojiList:emojiJSON,
 24         emojiMonkeyList:emojiMonkeyJSON,
 25         emojiRabbitList:emojiRabbitJSON
 26       }
 27     },
 28     model: {
 29       prop: 'value',
 30       event: 'change'
 31     },
 32     props: {
 33       value: {
 34         type: String,
 35         default: ''
 36       },
 37       isClear: {
 38         type: Boolean,
 39         default: false
 40       }
 41     },
 42     watch: {
 43       // isClear(val) {
 44       //   // 触发清除文本域内容
 45       //   if (val) {
 46       //     this.editor.txt.clear()
 47       //     this.info_ = null
 48       //   }
 49       // }
 50       // ,
 51       value: function(value) {
 52         // if (value !== this.editor.txt.html()) {
 53         //   this.editor.txt.html(this.value)
 54         // }
 55         if(!this.isChange){
 56              this.editor.txt.html(this.value);
 57         }
 58          this.isChange= false;
 59       }
 60       //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
 61     },
 62     mounted() {
 63       this.seteditor()
 64       this.editor.txt.html(this.value)
 65     },
 66     methods: {
 67       seteditor() {
 68         // http://192.168.2.125:8080/admin/storage/create
 69         this.editor = new E(this.$refs.editor);
 70         this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
 71         this.editor.customConfig.uploadImgServer = '/file/uploadPreview'// 配置服务器端地址
 72         this.editor.customConfig.uploadImgHeaders = {
 73             dbToken: this.$store.state.dbToken
 74         }// 自定义 header
 75         this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
 76         this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
 77         this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
 78         this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
 79
 80        this.editor.customConfig.emotions = [
 81              {
 82                title: 'QQ',
 83                type: 'image',
 84                content: this.emojiList
 85              },
 86              {
 87                title: 'monkey',
 88                type: 'image',
 89                content: this.emojiMonkeyList
 90              },
 91              {
 92                title: 'rabbit',
 93                type: 'image',
 94                content: this.emojiRabbitList
 95              }
 96         ];
 97         // 配置菜单
 98         this.editor.customConfig.menus = [
 99           'head', // 标题
100           'bold', // 粗体
101           'fontSize', // 字号
102           'fontName', // 字体
103           'italic', // 斜体
104           'underline', // 下划线
105           'strikeThrough', // 删除线
106           'foreColor', // 文字颜色
107           'backColor', // 背景颜色
108           'list', // 列表
109           '|',
110           'justify', // 对齐方式
111           'quote', // 引用
112           'emoticon', // 表情
113           'image', // 插入图片
114           '|',
115           'table', // 表格
116           'undo', // 撤销
117           'redo', // 重复
118           'fullscreen' // 全屏
119         ]
120          this.editor.customConfig.uploadImgHooks = {
121             customInsert: function(insertImg, result, editor) {
122             let url = Object.values(result.data)
123             JSON.stringify(url)
124             insertImg(url[3])
125            }
126          };
127         this.editor.customConfig.onchange = (html) => {
128           this.isChange = true;
129           this.info_ = html // 绑定当前逐渐地值
130           this.$emit('change', this.info_) // 将内容同步到父组件中
131         }
132         // 创建富文本编辑器
133         this.editor.create()
134       }
135     }
136   }
137 </script>
138
139 <style lang="css">
140   .editor {
141     width: 100%;
142     margin: 0 auto;
143     position: relative;
144     z-index: 0;
145   }
146   .toolbar {
147     border: 1px solid #ccc;
148   }
149   .text {
150     border: 1px solid #ccc;
151     min-height: 500px;
152   }
153 </style>

父组件：

 1 <template>
 2 <div>
 3  <EditorBar v-model="value"></EditorBar>
 4 </div>
 5 </template>
 6 <script>
 7 import EditorBar from '@/components/wangEnduit/editoritem.vue'
 8
 9 export default {
10     data() {
11         return {
12             value:''
13         }
14       },
15     methods: {
16      },
17      components: { EditorBar }
18 }
19
20  </script>