vue2+ueditor集成秀米编辑器

一、百度富文本编辑器

1.首先下载 百度富文本编辑器

下载地址:GitHub - fex-team/ueditor: rich text 富文本编辑器

2.把下载好的文件整理好 放在图片目录下

  1. 安装插件vue-ueditor-wrap

npm install vue-ueditor-wrap

4.在你所需要展示的页面 引入vue-ueditor-wrap

此时 ,你的页面就能展示出来编辑器了

二、集成秀米编辑器

1.你可以参考官方文档秀米图文排版UEditor插件示例,也可以参考我下面的操作

2.首先 在官方文档下载以下4个文件

3.把他们按照下图 丢进你的项目里(我把下载的internal.js重新起名为xiumi-ue-internal.js)

4.xiumi-ue-dialog-v5.html中引入的路径一定要注意,对应你存放的xiumi-ue-internal.js路径,否则秀米编辑器内容保存时会报错,editor is not found

5.在main.js中引入基本文件(第一次npm run start时,编辑ueditor.all.js可能会比较慢,等待一会就好了)

注意:1.xiumi-ue-dialog-v5一定要放在ueditor.all.js后面,不然可能会出现报错

2.下载的图标样式最好放在本地(图二),我的项目就遇到直接请求背景图地址https://dl.xiumi.us/connect/ue/xiumi-connect-icon.png(图一) 编辑器并不能展示图标的情况

  1. 在ueditor.config.js文件中 找到toolbars属性,添加dialog字段,否则编辑器也是不会展示图标的

6.此时你的编辑器就能出现秀米的图标啦

7.改写xiumi-ue-dialog-v5.js中的iframeUrl

iframeUrl: editor.ui.UEDITOR_HOME_URL + 'dialogs/xiumi-ue-dialog-v5.html',

此时点击图标,就能打开秀米编辑器了

相关推荐
vortex53 小时前
Kali Linux 安装与使用 Code-OSS / VSCodium :VSCode 轻量替代
linux·运维·编辑器
skilllite作者6 小时前
Zed 1.0 编辑器深度评测与实战指南
开发语言·人工智能·windows·python·编辑器·agi
袋子(PJ)1 天前
2026年常见的配置文件格式——为什么程序员永远在折腾缩进和括号?—— 常见配置文件进化史(md文档很详细)
编辑器
AI进化营-智能译站2 天前
Jazzy ROS2入门指南系列05-配置VsCode实现ROS2项目开发
ide·vscode·ai·编辑器
小短腿的代码世界2 天前
Qt量化策略编辑器深度解析:从DSL解析到可视化编排的完整架构
qt·架构·编辑器
咬人喵喵2 天前
五一劳动节 SVG 交互图文案例大全
低代码·微信·编辑器·交互·svg
啾啾啾6662 天前
VScode用cookie登录时,输入cookie值后按回车没反应
ide·vscode·编辑器
Misnice2 天前
Cursor 常用快捷键总结
编辑器
望眼欲穿的程序猿3 天前
苹果系统使用VsCode开发QT
ide·vscode·编辑器
其实防守也摸鱼3 天前
带你了解与配置phpmyadmin
笔记·安全·网络安全·pdf·编辑器·工具·调试