刚来公司那会,要我将text改为富文本编辑器,这个过程真是一波三折。话不多说,直接进入主题。
开始的时候用的是ueditor自带的图片上传。在这里简单的说下ueditor文件配置,到ueditort官网去下载文件,地址:http://ueditor.baidu.com/website/ 下载下来后主要引入这个
我这边引入的是这个四个文件。在jsp页面中写如下两个script将插件引入
上图中的第一个script的id 是调用下面的id, UE.getEditor是初始化这个插件,里面有一些参数配置,如: autoClearinitialContent:false, 这个参数是鼠标点击这个编辑器内容的时候,不会清空里面的内容,设置成true,在页面加载这个插件的时候d点击这个编辑器会将编辑器里默认的内容清除掉。参数也可以在uedotor.config.js里面配置。
1:采用ueditor自带的图片上传,配置如下:
上面的配置是要有的,在ueditor加载的时候会全部进入jsp/controller.jsp这文件里
window.UEDITOR_HOME_URL = "/zhaiqq/ueditor/"; 这个配置的是ueditor在项目中的位置,我是直接将ueditor文件放到webroot下面了,写错了这个路径,就会找不到,就不能加载这个插件。下面的imgUrl啊之类的参数大家可以去看看官网的描述,官网写的还是比较清楚的。打开jsp文件下的config.json,这里才是关键,
我删除了下面很多的配置文件,因为那些都是涂鸦图片上传,截图上传,视频上传,对我来说没有用,我就全部删了,"imageActionName": "uploadimage",这个是调用的是插件自带的action,这里的值不能修改,否则在点击图片上传的时候会报“无效的Action”。
这两个参数一定要注意:第一个是访问图片的路径前缀,下面的拖上传路径你可以自己修改,没有这个文件夹,系统会自动帮你创建。如果第一个参数写错,你会访问不到(编辑器看不到)图片,如果你看不到图片,请F12看下这图片路径就知道是什么原因了,肯定是你第一个参数没有配置对。只要这些配置好了,插件自带的图片上传就可以搞定了。
2:自定义图片上传,正如我上面第三张图片显示的那样,假如我们不想使用插件自带图片上传,想要我们自己写的一个action进行图片上传。参考第三张说明如下:
这个方法是重写插件自带的图片上传的方法,在if里判断是进行什么类型的上传,图片上传?涂鸦上传?视频上传?如果是这当中的某一个上传就调用某一个指定的后台上传action,return 后面调用的就是这个action路径。我这边用的是spring mvc注解,如下
图片的上传方法可以根据我前一篇的博客文章做参考,这里我就省掉了图片上传,ftp上传的方法实现,但是不管你是想将图片上传到哪里,这个后台方法结束后一定要返回json格式给前台。具体的格式请看:http://fex.baidu.com/ueditor/#dev-request_specification
我这边返回的是这个,就一个url参数我是写对的,其他都是写错了,,勿喷。。我主要想用的是url,这个json格式数据返回到前台,插件会自动识别这个url,根据这个url查找图片路径显示在这个编辑器里。同样的,如果你这块显示不出图片,后台上传是没有问题的,你可以F12看下图片路径。如果是调用的是本地的图片,要么你返回的时候就把调用图片的前缀写好+图片的相对路径,或者你只返回相对路径,在配置文件conf.json里面,的imageUrlPrefix 参数配置你想访问图片的所在项目名。
问题:图片上传没有问题,但是我这边有一个修改的功能,是可以修改这个业务的,这个业务下面有一个字段就是这个编辑器,所以我们在将编辑器插入的时候,用UE.getEditor('eduit').getContent(); 这个方法获取到编辑器内容,我之前用的是getAllHtml()这个方法,这个方法是获取编辑器的整个html内容,但是取到之后发现里面有一些不是自己添加的图片文字等,而是百度自定义的一些html标签,我刚开始的时候用的是getAllHtml() ,出了这个问题后我就网上查询了一些资料,ueditor为了一些安全性的问题过滤了html,我也改了编辑器js源码,结果发现还是不能正常显示,每次都是插入数据库的时候自动添加这个百度的自定义标签,一番折腾之后我换用了getContent(),虽然获取的是编辑器内容,但是将编辑器内容插入数据库,再在修改业务的页面进行修改,样式什么的都不会变,这个已经满足了我的需求,这个走了很多的弯路。最后觉定用getContent,一切都ok了。
相关推荐
对百度ueditor富文本编辑器的修改,可支持自定义文件路径上传功能,具体使用方法,可直接替换ueditor中的ueditor-1.1.2.jar包即可使用,可参看本人的博客-“百度富文本编辑器的使用”,有具体使用介绍
百度ueditor编辑器将图片上传到非项目根路径(保存在磁盘上)或独立服务器解决方案 教程:https://blog.csdn.net/qq_16220645/article/details/78860497 源码已经修改好了,直接buildpath到项目里就OJBK
这里记录一下自定义图片、视频尺寸校验过程,内容核心主要是扩展校验逻辑和增加自定义提示文本。 单图上传 单图上传的逻辑在ueditor.all.js中,由simpleUpload组件实现,其内部是通过监听file输入框的变化,来进行...
重写了 ueditor编辑器 后台上传图片和文件的源代码; 用户可以自己自定义上传到第三方服务器:比如阿里云,百度云 第三方文件存储服务器中; 代码中注释写的很清楚,只需要把自己上传到第三方的代码加进去就可以了;...
经过修改的百度富文本编辑器ueditor.jar,实现自定义上传文件存储路径,不再局限于存储在项目路径下,具体看http://blog.csdn.net/maijia0754/article/details/79360788
xueditor是对百度文本编辑器ueditor的扩展,支持自定义上传文件的存储方式. 由于ueditor服务端代码写死了只能上传到本地存储,有的时候,我们希望将图片、视频等文件上传到其他地方,例如阿里云OSS上。这给我们开发...
41. 编辑器添加本地图片自动上传 42. 升级为CK4.16.1编辑器 43. 无用文件清理 44. 修改生成缩略图函数thumb 45. 修改获取用户头像函数get_memberavatar 46. 修改原来上传类处理文件,删除原上传类处理文件,新增...