vue2使用富文本wangeditor

本文主要是介绍vue2使用富文本wangeditor，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

安装

npm i wangeditor --save

引用

import E from 'wangeditor';

使用

        // 富文本初始化initEditor() {this.isEdit = true;this.$nextTick(() => {this.editor = new E(this.$refs.editorElem); //绑定节点this.editor.config.height = 550; //默认高度为 300，设置高度时不需要添加单位this.editor.config.zIndex = 100;this.editor.config.placeholder = ''; //当设置为空时，可以清除提示文字this.editor.config.focus = false; //可以取消自动聚焦this.editor.config.showLinkImg = false;this.editor.config.filterJs = false;this.editor.config.uploadImgMaxLength = 1;this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2Mthis.editor.config.customUploadImg = async file => {console.log(file[0]);const reader = new FileReader();reader.readAsDataURL(file[0]);const formData = new FormData();formData.append('file', file[0]);formData.append('module', 'proposal');const { data } = await Upload(formData);if (data.code === 200) {console.log(data.data.fullPath);this.editor.cmd.do('insertHTML',`<div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5"><img src=${data.data.fullPath} /></div`);}};// 隐藏发送消息的添加视频、表格、代码、分割线功能this.editor.config.excludeMenus = ['head','video','code','splitLine','link','list','todo','foreColor','backColor','quote','emoticon','strikeThrough', // 删除线'underline', // 下划线'italic', // 斜体'bold', // 粗体'fontSize', // 字号'fontName', // 字体];console.log('this.chapterList', this.chapterList);this.$nextTick(() => {if (this.editor == null) {this.editor.create();this.editor.txt.html('');} else {this.editor.destroy(); //判断编辑器是否被创建，如果创建了就先销毁。this.editor.create();this.$nextTick(() => {let content = '';this.chapterList.chapterContent.forEach(item => {if (item.content) {content += item.content.replace(/\n\n\n/g, '<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;').replace(/\n\n/g, '<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');content = content.replace(/\n/g, `<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`);}// 图片回显if (item.image.path) {content += `<div class="img" style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><img src=${item.image.path} /><div style="font-size: 14px;">图${this.chapterList.chapterIndex}-${item.image.index}  <span class="img-title">${item.image.title}</span></div></div><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`;}// 表格回显if (item.table.title) {content += `<div class="table" style="width:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><span>表${this.chapterList.chapterIndex}-${item.table.index}  ${item.table.title}</span><table border="1" cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr>`;item.table.head.forEach(item => {content += `<th>${item}</th>`;});content += `<tr>`;item.table.content.forEach(item => {content += `<tr>`;item.forEach(item => {content += `<td>${item}</td>`;});content += `</tr>`;});content += `</tbody></table></div><div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5"></div>`;}});content = `<div class="proposal-content" style="text-indent:2em; font-size:16px; line-height:1.5">${content.replace(`<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`, ``).replace(new RegExp('°E。'), `°E。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`)}</div>`;this.editor.txt.html(content);});}});});},

在data(）{}中定义editor:

export default {data() {return {editor: null,};},

然后根据需求调用就好了，

this.$nextTick(()=>{})中处理的数据是因为后端返回来的数据结构是数组，遍历赋值标签转字符串的处理操作，如果后端返回来的是字符串直接赋值就好了。

注意：

要使用this.$nextTick(()=>{})，有时候会有渲染不上报错的问题。

这篇关于vue2使用富文本wangeditor的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---