vue-ueditor-wrap集成135编辑器

需求说明

在本次项目中，百度富文本编辑器主要是用来编辑微信公众号页面内容。为了方便运营工作，决定集成135编辑器（自带模板、图片等）。

第一步clone组件代码

首先下载vue-ueditor-wrap源代码安装依赖（github项目主页有使用方法）然后如下：

1. ueditor/dialog 下添加135editor文件夹以及内容。
2. ueditor文件夹添加135editor.js文件。

ueditor
|--dialogs
|--|--135editor
|--|--|--135EditorDialogPage.html
|--135editor.js

这2步是参考135编辑器说明文档。

第二步组件扩展

修改vue-ueditor-wrap.vue文件中代码如下

_checkDependencies () {
    return new Promise((resolve, reject) => {
    // 判断ueditor.config.js和ueditor.all.js是否均已加载(仅加载完ueditor.config.js时UE对象和UEDITOR_CONFIG对象存在,仅加载完ueditor.all.js时UEDITOR_CONFIG对象存在,但为空对象)
    let scriptsLoaded = !!window.UE135 && !!window.UE && !!window.UEDITOR_CONFIG && Object.keys(window.UEDITOR_CONFIG).length !== 0 && !!window.UE.getEditor;
    if (scriptsLoaded) {
        resolve();
    } else if (window['$loadEnv']) { // 利用订阅发布，确保同时渲染多个组件时，不会重复创建script标签
        window['$loadEnv'].on('scriptsLoaded', () => {
        resolve();
        });
    } else {
        window['$loadEnv'] = new LoadEvent();
        // 如果在其他地方只引用ueditor.all.min.js，在加载ueditor.config.js之后仍需要重新加载ueditor.all.min.js，所以必须确保ueditor.config.js已加载
        this._loadConfig().then(() => this._loadCore()).then(()=> this._load135()).then(() => {
        resolve();
        window['$loadEnv'].emit('scriptsLoaded');
        });
    }
    });
}
//新增方法
_load135 () {
    return new Promise((resolve, reject) => {
    if (window.UE && window.UE135) {
        resolve();
        return;
    }
    let coreScript = document.createElement('script');
    coreScript.type = 'text/javascript';
    coreScript.src = this.mixedConfig.UEDITOR_HOME_URL + '135editor.js';
    document.getElementsByTagName('head')[0].appendChild(coreScript);
    coreScript.onload = function () {
        if (window.UE && window.UE135) {
        resolve();
        } else {
        console.error('加载135editor.js失败,请检查您的配置地址UEDITOR_HOME_URL填写是否正确!\n', coreScript.src);
        }
    };
    });
}

第三步构建

npm run build构建项目后复制lib文件夹。覆盖项目中node_modules文件夹中vue-ueditor-wrap中的lib文件夹。(当然这里可以不构建替换第三方模块代码，后期部署容易忽略，可以自己上传一个npm包)

第四步样式覆盖

在项目中添加如下样式

第五步项目添加文件

1. ueditor/dialog 下添加135editor文件夹以及内容。
2. ueditor文件夹添加135editor.js文件。

ueditor
|--dialogs
|--|--135editor
|--|--|--135EditorDialogPage.html
|--135editor.js

注意：第五步是在项目中文件。第一步是在vue-ueditor-wrap这个组件项目中

第六步大功告成

运行项目，会看到富文本编辑器中有135的图标，点击会打开135编辑器。