百度富文本ueditor和umeditor遇到的问题和解决办法



项目中要用到发布文章,所以选了百度的富文本;记录一下自己走的坑。

开始使用的是umeditor,它属于轻量级,功能比较少,有点是加载快,貌似只有183k吧。

umeditor用起来还是比较简单,具体的代码被我删了,因为用到后来发现它无法上传本地视频。。。简短说下使用流程:

1、官网下载umeditor,放在自己的项目下,在应用页面引入然后初始化就有了;

2、umedito.js上var URL = window.UMEDITOR_HOME_URL || "/jsFile/ueditor/";

3、上传图片imageUrl为自己上传方法action的路径;

4、上传方法成功后是需要返回state和url两个参数。


详细说下ueditor,我用的是最新的1.4.3版本的。整了两天了,才搞通,说一下几个关键的地方。

1、引入ueditor最关键的一处是需要配置ueditor的url路径,其它文件的结构貌似是互相引用的,所以不能随便更换结构。editor.config.js配了一下url;

百度富文本ueditor和umeditor遇到的问题和解决办法_第1张图片2、ueditor的功能工具太多了,在toolBar中自己增减:

百度富文本ueditor和umeditor遇到的问题和解决办法_第2张图片3、设置编辑器固定高度,设置最高高度,overflow-y:auto;就行了

4、编辑器中的内容存进数据库回显是,一直报Cannot set property 'innerHTML' of undefined,这个问题是由于加载的顺序问题,所以给加个监听器即可解决:

5、最坑的就是上传图片了,因为项目的图片都是上传至七牛的。后台有上传至七牛的代码。

第一步找到jsp/config.json配置文件,这里面配置了各种上传的配置信息;我新增了imageUrl(为什么取这个名,请看后面),让其指向后台上传七牛代码。imageActionName不能改,这是框架里面校验了,开始改的是这个,结果一直报无效的action,iamgeFieldName七牛要求是file。其他没改

百度富文本ueditor和umeditor遇到的问题和解决办法_第3张图片 第二步,框架肯定是调用uploadimage这个url,所以我们要将他更改为自己的imageUrl,找到ueditor.all.js下的getActionUrl()方法。增加了一行url指向imageUrl,这样就可以访问后台的方法了。

百度富文本ueditor和umeditor遇到的问题和解决办法_第4张图片

最后一步就是发现图片上传成功了,但是编辑器上传那里下方一片红。那就说明是没有正确的返回值了;在image.js中uploader on方法中需要返回state的属性,当然url也不能少。

百度富文本ueditor和umeditor遇到的问题和解决办法_第5张图片

最后就完满解决了。两年没弄前端了,真是是菜啊。

你可能感兴趣的:(自学笔记)