vue-ueditor-wrap集成135编辑器

需求说明

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

第一步clone组件代码

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

ueditor/dialog 下添加135editor文件夹以及内容。
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包)

第四步样式覆盖

在项目中添加如下样式

<style>.edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;background-size: 85%;background-position: center;background-repeat: no-repeat;}
</style>

第五步项目添加文件

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

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

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

第六步大功告成

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

vue-ueditor-wrap集成135编辑器相关推荐

UEditor（集成 135 编辑器插件）（附源码）
效果图可以看到第一个菜单是135,点击135跳到135编辑器,点击完成编辑即可准备工作 1.npm npm install vue-ueditor-wrap // 或者 yarn add vue- ...
kindeditor集成135编辑器实现共同编辑文章
kindeditor是一款应用非常广泛的富文本编辑器,笔者在以前的多个项目中使用.135编辑器是一款在线编辑器,常用于微信端信息的编辑和发布.因为135编辑器自带了很多模板用起来很方便,所以我想把它编 ...
vue项目百度ueditor编辑器集成135和秀米，主题图标美化
目录前言效果预览教程 1. 首先下载主题美化插件 2. 接入135编辑器 3. 接入秀米编辑器 4. 组件封装 5. main.js引入样式和js文件 6. 页面使用完成! 前言本文介绍vu ...
tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器
博客(coder的自我修养)原文链接:tinymce--一款非常好用的富文本编辑器 vue集成tinymce编辑器 - coder的自我修养 TinyMC编辑器简介 TinyMCE是一款易用.且功能强 ...
百度UEditor 整合135编辑器到功能栏
整体上该整合过程分为三个步骤: 下载两个文件分别是 135editor.js 和 135EditorDialogPage.html . 修改ueditor.config.js中toolbars项里增加 ...
vue使用百度富文本编辑器（ueditor）
文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...
秀米编辑器（xiumi）+百度编辑器（Ueditor）集成：解决集成问题，秀米编辑器导出到百度编辑器格式问题，图片保存到自己的服务器（阿里云OSS）
1.集成前提条件: 1. 需要集成百度编辑器到环境中 2.https环境下才可以导出数据到百度编辑器,如果不是https环境,会出现错误然后我们开始讲解如何集成: 2.引入资源: //百度编辑器需要 ...
springboot 集成百度编辑器ueditor
最简单的方式集成百度编辑器 1.下载百度编辑器源码 2. springboot静态资源配置在resources下面.将ueditor的静态资源放入项目中如: 我的资源路径为:/resources/js ...
135编辑器 html,135编辑器，微信图文编辑器,微信图文美化编辑器,格式多方便的图文编辑-...
项目本身使用百度的ueditor编辑器,可免费集成外部调用135编辑器的方式来使用.也可申请与APPKEY,做到135用户绑定的方式,实现打开插件时免登录.使用非ueditor编辑器的,集成方式可参看 ...