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

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

相关推荐
Smoothcloud润云7 小时前
5大功能精修,重构AI算力使用体验!
java·人工智能·windows·算法·重构·编辑器·sublime text
特立独行的猫a14 小时前
鸿蒙 PC 移植记:将微软的 `edit` 轻量级终端编辑器带到 OpenHarmony
microsoft·rust·编辑器·harmonyos·鸿蒙pc·edit
2501_9160088914 小时前
全面解析常用Web前端开发工具:编辑器、调试工具、性能分析器与框架
android·前端·ios·小程序·uni-app·编辑器·iphone
Cloud_Shy61815 小时前
解读《Effective Python 3rd Edition》:从练气到老魔(第二章 Item 13 - 16)
c语言·开发语言·网络·笔记·python·编辑器
guslegend1 天前
第2节:AI编辑器底层技术全景导览
人工智能·编辑器
OliverH-yishuihan2 天前
【保姆级教程】Win11 下从零部署 Claude Code:本地环境配置 + VSCode 可视化界面全流程指南
ide·vscode·编辑器
TakeForge2 天前
17天跑通交通行业SVG编辑器
编辑器
键盘飞行员2 天前
macOS Trae 解决 Codex 插件不显示问题(官方适配版)
macos·编辑器·ai编程
Cloud_Shy6182 天前
解读《Effective Python 3rd Edition》:从练气到老魔(第二章 Item 10 - 12)
c语言·开发语言·网络·人工智能·windows·python·编辑器
木古古182 天前
搞一个高效的c/c++开发环境,工具VIm+自研vim插件+Shell脚本
linux·编辑器·vim