vue项目百度ueditor编辑器集成135和秀米，主题图标美化

前言

本文介绍vue项目里引入百度Ueditor富文本编辑器，集成135编辑器和秀米编辑器，使内容编辑更加丰富，跳转体验更加丝滑。再封装成组件，使用更加快捷。

效果预览

编辑器主界面

弹框打开135编辑器

弹框打开秀米编辑器

操作说明：ueditor编辑器菜单栏集成135和秀米图标，点击分别弹框打开，完成编辑后内容带回到ueditor编辑器，另外引入了主题文件，对样式进行了美化。

Ueditor原始样式如下图：

说实话是有点丑，emm…，还是10年前的图标样式，这也是为什么要美化样式的原因。

Tips：当然也可以用网上的封装组件vue-ueditor-wrap，这个用的人也比较多，文档地址：https://hc199421.gitee.io/vue-ueditor-wrap/#/home，不过使用过程中会有一点小坑，这里不做过多说明。

回到正题，本文介绍使用源码集成方式，下面开始教程！

教程

1. 首先下载主题美化插件

地址：https://pan.quark.cn/s/ce9519209fcd
注：本次下载的即ueditor编辑器源码，是引入主题样式美化后的源码。
下载完解压后放到public文件夹下，下图是目录结构（和下载的有些不一样，图片是已经继集成了135个秀米的）：

2. 接入135编辑器

地址：http://www.135plat.com/135_ueditor_plugin.html
操作参考文档配置即可，本文省略

3. 接入秀米编辑器

地址：https://ent.xiumi.us/ue/

4. 组件封装

  <div><script :id="id" type="text/plain"></script><el-dialog:visible.sync="dialog":destroy-on-close="true":title="title":center="true":fullscreen="true"><iframe :src="url" width="100%" :height="(fullheight - 150)+'px'"></iframe></el-dialog></div>
</template><script>
export default {name: "UE",data() {return {editor: null,dialog: false,url: '',fullheight: document.documentElement.clientHeight,title:'',};},props: {defaultMsg: {type: String},config: {type: Object},id: {type: String}},created() {let that = this;//  ------------------秀米------------------------window.UE.registerUI('dialog', function (editor, uiName) {var btn = new UE.ui.Button({name: 'xiumi-connect',title: '秀米',onclick: function () {that.url = editor.ui.UEDITOR_HOME_URL+'dialogs/xiumi-ue-dialog-v5.html';that.title = "秀米编辑器";window.setRichText = that.setRichText;window.getHtml = that.getUEContent;that.dialog = true;that.editor = editor;}});return btn;});//------------------- 135editor-------------------------window.UE.registerUI('135editor', function (editor, uiName) {var btn = new UE.ui.Button({name: 'btn-dialog-' + uiName,className: 'edui-for-135editor',title: '135编辑器',onclick: function () {that.url = editor.ui.UEDITOR_HOME_URL + 'dialogs/135EditorDialogPage.html?callback=true&appkey=';that.title = "135编辑器";window.setRichText = that.setRichText;window.getHtml = that.getUEContent;that.dialog = true;that.editor = editor;}});return btn;});},mounted() {const _this = this;this.editor = window.UE.getEditor(this.id, this.config); // 初始化UEthis.editor.addListener("ready", function () {_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。});},methods: {setRichText(text) {this.editor.setContent(text); // 确保UE加载完成后，放入内容。this.dialog = false},getUEContent() {// 获取内容方法return this.editor.getContent();},getUEContentTxt() {// 获取纯文本内容方法return this.editor.getContentTxt();},},destroyed() {this.editor.destroy();}
};
</script><style lang="scss" scoped>
iframe{width: 100%;height: 100%;border: none!important;
}
::v-deep .el-dialog__header{// display: none;padding: 0;height: 5vh;line-height: 5vh!important;
}
::v-deep .el-dialog__body{padding: 0;margin: 0;height: 95vh;
}
::v-deep .el-dialog__headerbtn {top: 15px;
}
</style>

5. main.js引入样式和js文件

import '../public/static/UE/ueditor.config.js'
import '../public/static/UE/ueditor.all.min.js'
import '../public/static/UE/lang/zh-cn/zh-cn.js'
import '../public/static/UE/ueditor.parse.js'
import '../public/static/UE/dialogs/xiumi-ue-dialog-v5.js'
import '../public/static/UE/dialogs/xiumi-ue-v5.css'
import '../public/static/UE/dialogs/135editor.js'
import '../public/static/UE/dialogs/135-ue-v5.css'
import '../public/static/UE/themes/default/css/ueditor.css'

6. 页面使用

 //模板<UE :defaultMsg="form.noticeContent" :config="config" ref="ue" :id="ue1" ></UE>//引入
import UE from "@/components/Ueditor/index";
//注册
components: { UE }//data数据定义form: {noticeContent:''},config: {initialFrameWidth: null,initialFrameHeight: 280},
ue1: "ue1", // 每个编辑器有不同的id

完成！

vue项目百度ueditor编辑器集成135和秀米，主题图标美化相关推荐

秀米编辑器（xiumi）+百度编辑器（Ueditor）集成：解决集成问题，秀米编辑器导出到百度编辑器格式问题，图片保存到自己的服务器（阿里云OSS）
1.集成前提条件: 1. 需要集成百度编辑器到环境中 2.https环境下才可以导出数据到百度编辑器,如果不是https环境,会出现错误然后我们开始讲解如何集成: 2.引入资源: //百度编辑器需要 ...
vue项目+富文本编辑器ueditor - 资源篇
资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址说明: 支持 vue-cli 2.x 支持 ...
[转载] ASP.NET MVC4使用百度UEDITOR编辑器
前言配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法.编辑器可以到http://ueditor.baidu.com/website/downloa ...
[转]百度UEditor编辑器(php)
百度UEditor编辑器!合入PHP网站! 一.富文本内容交互 1.编辑器内容初始化(即往编辑器中设置富文本) 场景一:写新文章,编辑器中预置提示.问候等内容. 在editor_config.js文件 ...
百度UEditor编辑器,合入PHP网站
本文转自:http://www.cnblogs.com/losen/archive/2013/05/23/3094612.html 百度UEditor编辑器!合入PHP网站! Posted on 20 ...
百度UEditor编辑器使用教程与使用方法
第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://uedito ...
百度UEditor编辑器上手体验
原先一个项目使用的是kindEidtor编辑器,客户反馈有问题,要求修改,因此查阅资料后,决定改用百度UEditor编辑器. 因为要提交到后台更新到数据库,所以前端使用隐藏的textArea保存临时数 ...
PHP百度编辑器使用方法,百度UEditor编辑器使用教程与使用方法
标签: 我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟 ...
百度UEditor编辑器视频相关bug汇总和稳定解决方案
百度UEditor编辑器的视频是个很头疼的问题,从昨晚到今天折腾了一天,也看了不少帖子,很多都是只治标不治本,而且有很多改法也是忽略本质,不过受大神启发,自己还是琢磨出来了. 百度UEditor编辑器 ...