vue2使用富文本wangeditor

安装

复制代码

npm i wangeditor --save

引用

复制代码

import E from 'wangeditor';

使用

javascript 复制代码

        // 富文本初始化
        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/>&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:

javascript 复制代码

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

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

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

注意：

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