在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

时间:2024-04-02 08:56:19

一、下载

什么是富文本编辑器?就是

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

或者

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor。

第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖,名字叫做umeditor。

两个都是百度出品的,下载地址:ueditor 、 umeditor 。

富文本编辑器的主要原理:将输入框内的文本转换成HTML标签。然后获获取输入框内的HTML内容。

二、安装

(以下以umdeitor为例)

1.将下载后的压缩包解压,然后将整个文件夹(最好改个名,如umeditor)直接复制WebContent目录下。

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

2、将umeditor/jsp/lib目录下的所有jar包复制一份到WEB-INF/lib文件夹里:

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码========>在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

3、发现所有在WebContent目录下需要依赖的jar包都要复制多一份到WEB-INF/lib里头,如富文本编辑器、jstl、文件上传下载等所依赖的包。

三、使用

1.首先需要引入三个js和一个css样式文件:

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

2、然后在<body>里面添加标签,这就是一个富文本编辑器了。

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

3、在JavaScript里实例化编辑器,如下:

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

4、在umeditor目录下有一个index.html文件,在实例化UE的那个javascript代码块里面,有很多函数供我们使用编辑器,根据需要复制里面的代码即可。

四、图片上传

通过以上的操作其实已经实现了最基本的百度编译器的使用,但是图片上传基本功能里面是没有实现的。因为这个上传图片的功能是自己在后台写的,所以要有一个访问的路径。

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

第一个框中是百度自己的上传,可以不用他,自己自定义上传。只要修改地址就可以直接上传,后台使用的是springMvc。

打开umeditor.config.js这个文件,这是UM的配置文件,可以自定义很多东西

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

覆盖原来的imageURL即可,修改为你自己项目中正在使用的图片上传接口即可,注意,必须是支持ajax异步上传的
那么好,现在启动项目测试,图片上传是没有问题,但是图片展示会有问题,原因是返回的JSON和百度的格式不匹配
那么怎么办,2种做法,适配自己的返回数据格式
或者直接修改百度的js源码,下面是第二种做法:

打开webapp/umeditor/dialogs/image/image.js这个路径下的image.js,找到如下方法(uploadComplete):

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

这个方法是成功后执行的。

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

callback是用来展示图片内容的,可以自行变更数据格式。通过修改这两个方法的代码,实现图片展示。

在JSP页面使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码