集成Ueditor秀米
集成:UEditor + 秀米
本文主要介绍 百度编辑器(UEditor)和 秀米的集成经验。主要有:
明确秀米接入的三种方式
使用 UEditor
集成秀米
关于图片,视屏等,媒体资源的说明
媒体资源的转存处理
总结
步骤一、明确秀米接入的三种方式
首先看一下秀米接入的方式:https://r.xiumi.us/board/v5/2a5va/16516964
所以根据项目的需求不同选用不同的接入方式。
这里我们选择方案三,也是写这篇博客的主要原因!
所以接下来介绍引入 UEditor 的流程。
步骤二、使用 UEditor
重新使用 UEditor 这种上古产物,我内心是拒绝的。
网上找了很多资料都已经过时了,而且官方文档也很久没有更新的样子。连 Github 仓库都成了只读模式。
这个插件真的很老了!!!
建议直接下载 这里的代码:https://github.com/184455/abner-xiumi-ueditor,【步骤二】,【步骤三】都可以直接跳过!
吐槽完成,正文开始!
因为安全的原因,UEditor 的官方示例已经停止下载了。要想拿到相对应的代码,我们只能:
去UEditor 的官方 Github 仓库下载源码:https://github.com/fex-team/ueditor
接着,进入刚刚下载的文件,安装依赖:npm install
最后需要全局安装 grunt:npm install -g grunt. 苹果mac用户:sudo npm install -g grunt
所有工作都完成以后,执行打包构建:grunt default
执行完脚本以后,在项目下,你就得了一个打包好的代码,可以直接拿去部署,既可看到效果:
这样以后,就说明你有了可以部署的代码了!
步骤三、集成秀米
建议直接下载 这里的代码:https://github.com/184455/abner-xiumi-ueditor,【步骤二】,【步骤三】都可以直接跳过!
先根据这里把文件下载好,然后放到对应的文件夹。
但是这里没有服务端!
步骤四、关于图片,视屏等,媒体资源的说明
经过前面三个步骤。或者你直接下载步骤三的代码,你已经能够把秀米跑起来了,但是这个时候是没有配置好服务端的。
我有想过去配置文件上传的后端,但是研究发现,UEditor 这套代码真的是太老了!!!
根本无法支持现在主流的前后端分离,数据通过 Restful 的数据交互方式!
所以走到这里我放弃了配置文件上传的功能,把所有希望都寄托在秀米上。毕竟秀米才是罪魁祸首,要不是秀米,我根本不可能会使用 UEditor 这一套过时的技术栈!
最后,我直接把编辑器里面需要上传相关的功能:视屏上传 音乐上传 涂鸦 图片 等等,需要上传的功能全部注释了!!
具体的地方:
加载后端配置的行为也不需要了!
步骤五、媒体资源的转存处理
前面说了,把编辑默认上传的功能取消了,那我们的图片等资源怎么办?
我在我项目的做法就是:转存!
这么做有两个原因:
秀米不支持图片外链!
我们自己的系统需要存编辑内容的数据,做自己的发布。
关于图片转存,因为涉及公司代码的业务逻辑。我只会说我怎么做。步骤:
获取秀米编辑器生成的内容。这里说明一下,秀米编辑器编辑内容后,会插入 UEditor 里面。通常,直接调:UE.getEditor(‘editor’).getContent() 方法就能拿到编辑器的 HTML 代码;
拿到内容以后先别着急把数据保存到后台服务器,先通过正则,把指向秀米域名的图片,音频,视频 等资源匹配出来;
然后通过请求,把这些资源下载下来,然后同步到自己的服务器上;
最后把秀米的链接,替换成自己链接;
保存编辑的文件。完成编辑操作。
关于怎么把图片下载下来,可以参考我的这篇文章:
跨域,跨限制下载图片方案: https://blog.csdn.net/six_six_six_666/article/details/117674905
六、总结
UEditor 这一套技术栈真的太老了。
而且官方也已经停止了维护,如果不是不得已,建议大家不用使用。
关于富文本编辑器,现在 有很多解决方案,不要拘泥于这个!
然后,建议你直接下载 这里的代码:https://github.com/184455/abner-xiumi-ueditor。省去一些研究的时间。
集成Ueditor秀米相关推荐
- 记录ueditor 秀米图片上传到本地错误
1.在config.json里面配置你的图片服务器地址 不添加会发送一个这样的请求,action='' undefine[]=图片地址. 2.编写秀米图片本地化上传方法 uploadUrlFile 是 ...
- Vue+UEditor+秀米
一.下载Ueditor相关静态文件存放位置 去Ueditor官网下载相关资源(本文下载的1.4.3.3版本): 下载之后,把资源放到 /static/ueditor/ 目录下.文档结构如下: ![在这 ...
- vue+vue-ueditor-wrap+秀米
我们的项目中使用的是ueditor+秀米的富文本编辑器,github上的大神做了一个基于vue的ueditor的组件,能够实现双向数据绑定,可以不用费劲的getContent.setContent.就 ...
- ueditor(vue-ueditor-wrap)集成秀米全过程以及遇到的问题
1.ueditor(vue-ueditor-wrap)集成秀米踩坑记录 链接如下: https://www.jianshu.com/p/af5e935ea506 第一选择肯定是打开ueditor官网地 ...
- vue项目百度ueditor编辑器集成135和秀米,主题图标美化
目录 前言 效果预览 教程 1. 首先下载主题美化插件 2. 接入135编辑器 3. 接入秀米编辑器 4. 组件封装 5. main.js引入样式和js文件 6. 页面使用 完成! 前言 本文介绍vu ...
- 秀米编辑器(xiumi)+百度编辑器(Ueditor) 集成 :解决集成问题,秀米编辑器导出到百度编辑器格式问题,图片保存到自己的服务器(阿里云OSS)
1.集成前提条件: 1. 需要集成百度编辑器到环境中 2.https环境下才可以导出数据到百度编辑器,如果不是https环境,会出现错误 然后我们开始讲解如何集成: 2.引入资源: //百度编辑器需要 ...
- vue-cli 使用ueditor集成 秀米富文本
前言 要做一个公众号文本和官网文章的同步操作公司准备集成秀米富文本 一.准备工作 进入秀米官网 (https://r.xiumi.us/board/v5/2a5va/16516964) 根据文章提示下 ...
- ueditor 集成 秀米 背景图片不显示的问题
百度的富文本集成秀米的时候遇到一个大坑,就是远程抓取图片本地化 抓取不到 背景图片.原因是秀米的背景用的是<section>,而不是<img>,百度抓取不到.查了很多资料 也没 ...
- 手机token记录、支付宝、个推、goeasy、手机前端框架、阿里大于、百度编辑器、秀米集成解决方案
goeasy:web页面推送解决方案 包名:goeasy jar:goeasy-sdk-0.3.5.jar gson-2.3.1.jar slf4j-api-1.7.2.jar 个推:app通知栏等推 ...
- vue使用vue-ueditor-wrap集成秀米
vue通过UEditor集成秀米 接入Ueditor vue-ueditor-wrap 接入秀米 接入Ueditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量, ...
最新文章
- 多个旅游网站被挂马 五一假期外出旅游应小心
- dns、网关、IP地址,主要是配置resolv.conf\network\ifcfg-eth0
- 机器学习-基础知识、sklearn库、评估指标、python数据处理库
- String类常用方法
- matlab中imcrop函数的具体使用
- 赠人玫瑰,手有余香,分享五款黑科技软件
- java js css 压缩工具_JS/CSS压缩工具(YUI Compressor)使用方法
- 中秋晴朗夜,我们与星月相见
- python求语音信号短时能量、短时过零率、语谱图
- LocalDateTime类型得两个日期相差得天数如何计算
- [数理知识]统计决策理论——贝叶斯决策与两类错误率
- cast from pointer to smaller type ‘int‘ loses information —— NDK 开发
- 烂泥:OpenLDAP安装与配置
- 英国金融监管机构加大力度审查违规加密货币公司
- 408-数据结构-树的应用-哈夫曼树并查集
- 微信小程序怎么长按复制_微信小程序基于Parser添加长按复制、代码高亮等功能...
- 广州app定制:IO定制游APP
- 腾讯COS例程实践之云函数列举COS文件
- 天馈 频谱 场强 +定位,手持式信号综合分析仪---TFN AMT950C
- 计算机二级word历年真题,全国计算机二级office-word-历年真题
热门文章
- linux 进程死循环,排查程序死循环,死锁的方法 ——pstack
- gnu assembler最新官方手册和.macro介绍
- arcsinx用计算机怎么按,数学arcsinx和arccosx怎么用公 – 手机爱问
- 微分几何中映射的二度理解
- NetFlix 服务注册与发现 Eureka
- html中形状代码,用css与div代码绘制一些常见的各种形状的图形
- 【iOS】iOS8 与以前版本比较,添加的新特性
- 【Windows】WPS | 多级编号 | 自定义多级标号
- 融合正弦余弦和变异选择的蝗虫优化算法
- python 读取geotiff_从GeoTIFF文件中获取经度和纬度