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

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

相关推荐
VidDown15 天前
VidDown 工具站:免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
VidDown15 天前
显卡处理视频技术详解:从硬解码到 NVENC,GPU 如何让视频处理起飞?
javascript·编辑器·音视频·视频编解码·视频
夜猫逐梦16 天前
【UE基础】03.蓝图与编辑器工作流
编辑器·ue·蓝图·ue编辑器
VidDown16 天前
视频帧率技术详解:从 24fps 到 120fps,帧率如何影响你的观看体验?
网络·网络协议·编辑器·音视频·视频编解码·视频
爱就是恒久忍耐16 天前
VSCode里如何比较2个branch
ide·vscode·编辑器
bloglin9999916 天前
vscode中可视化的合并分支,在“合并编辑器中解析”中“与基线进行比较”是什么意思
ide·vscode·编辑器
zyplayer-doc16 天前
企业知识库安全与权限管理完全指南:从加密到审计的六层防护
人工智能·安全·pdf·编辑器·创业创新
古德new16 天前
鸿蒙PC迁移:Photoflare Qt 图片编辑器鸿蒙PC适配全记录
qt·编辑器·harmonyos
春日见16 天前
vscode的AI编程插件推荐:
大数据·ide·vscode·算法·机器学习·编辑器·ai编程
jieshenai16 天前
VScode sys.path,并使CTRL+左键可访问源码
ide·vscode·编辑器