安装
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; // 2M
this.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/> ')
.replace(/\n\n/g, '<br/> ');
content = content.replace(/\n/g, `<br/> `);
}
// 图片回显
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/> `;
}
// 表格回显
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/> `, ``)
.replace(new RegExp('°E。'), `°E。<br/> `)}</div>`;
this.editor.txt.html(content);
});
}
});
});
},在data(）{}中定义editor:
export default {
data() {
return {
editor: null,
};
},然后根据需求调用就好了，
this.$nextTick(()=>{})中处理的数据是因为后端返回来的数据结构是数组，遍历赋值标签转字符串的处理操作，如果后端返回来的是字符串直接赋值就好了。
注意：文章来源：https://www.toymoban.com/news/detail-813362.html
要使用this.$nextTick(()=>{})，有时候会有渲染不上报错的问题。文章来源地址https://www.toymoban.com/news/detail-813362.html
到了这里，关于vue2使用富文本wangeditor的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
