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',

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

相关推荐
爱学习的章鱼哥6 小时前
如何实现一个可视化的文字编辑器(C语言版)?
c语言·编辑器·文本编辑器·程序设计·easyx
苏克贝塔8 小时前
2025 VSCode中如何进行dotnet开发环境配置完整教程
ide·vscode·编辑器
ykjhr_3d11 小时前
展销编辑器在未来的发展前景
编辑器
2301_7875528713 小时前
AI-Browser适用于 ChatGPT、Gemini、Claude、DeepSeek、Grok的客户端开源应用程序,集成了 Monaco 编辑器。
人工智能·chatgpt·自动化·编辑器·deepseek
Java&Develop21 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
二狗哈1 天前
制作一款打飞机游戏23:编辑器ui
ui·编辑器·excel
Ven%1 天前
VsCode如何使用默认程序打开word Excel pdf等文件
ide·vscode·pdf·编辑器
Silence4Allen1 天前
VSCode 设置源代码根目录
ide·vscode·python·编辑器·pythonpath
mosepplin1 天前
VSCODE 报错Fatal error: can‘t create CMakeFiles/hello_world.elf.dir/C_/Users/...
ide·vscode·编辑器
林枫依依1 天前
Unity Webgl在编辑器中报错:Cannot connect to destination host
unity·编辑器·webgl