wangEditor是基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。
在我们实际项目上还是比较频繁应用到的，下面出个案例供大家参考学习…

wangEditor文档：https://puted: {}, mounted(){ this.initEditor(); }, watch: { value(newValue, oldValue){ // 编辑器onchange更改的不处理，只处理父组件传来的，防止文字回退bug if (newValue != this._value) { this.editor.txt.html(newValue); } }, }, methods: { initEditor(){ let editor = new E(this.$refs.editor); Object.assign(editor.customConfig, { menus: this.menus, zIndex: 100, height: 200, pasteFilterStyle: false, onchange: (html) => { this._value = html; // 更新 _value this.$emit('update:value', html); // 更新 value }, customUploadImg:((file, insert)=> { if(this.$utils.isEmpty(file)){ return; } const msg = this.$Message.loading({ content: '亲，图片正在拼命地上传中，请稍等...', duration: 0 }); var params = new FormData(); params.append('img', file[0]); this.$api.post('/synthesis/crm/picture/pictureUpload',params).then(res => { insert(res.data.imgUrl) setTimeout(msg, 0); this.$Message.success('上传成功'); }) }), uploadImgHooks:{ customInsert: function (insertImg, result, editor) { insertImg(result.url) } } }); editor.create(); editor.txt.html(this.value); // 针对数据异步获取的这里无法立即绑定，在watch判断处理 this.editor = editor; }, }, };</script><style scoped lang="scss"> .AppEditor-root{ border: 1px solid #f0f0f0; height: 400px !important; /deep/ .w-e-toolbar{ border: none !important; border-bottom: 1px solid #f0f0f0 !important; background-color: #fff !important; } /deep/ .w-e-text-container{ height: calc(100% - 43px) !important; border: none !important; z-index:1 !important; .w-e-text{ height: 100%; overflow-y: auto !important;} } }</style>

到此这篇关于Vue中使用wangeditor富文本编辑的问题的文章就介绍到这了,更多相关wangeditor富文本编辑内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！