关于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>
上传图片地址需要根据自身的路径去修改。
光标乱跳是因为watch监听的时候 文本内容被实时更新，那么想办法在文本输入的时候让监听无效即可，离开编辑状态 又生效，让文本内容可以保证保存的时候是正确的即可。
如果遇到其他的问题 欢迎留言，我看到会帮忙回答解决。