一、下载
什么是富文本编辑器?就是
或者
其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor。
第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖,名字叫做umeditor。
两个都是百度出品的,下载地址:ueditor 、 umeditor 。
富文本编辑器的主要原理:将输入框内的文本转换成HTML标签。然后获获取输入框内的HTML内容。
二、安装
(以下以umdeitor为例)
1.将下载后的压缩包解压,然后将整个文件夹(最好改个名,如umeditor)直接复制WebContent目录下。
2、将umeditor/jsp/lib目录下的所有jar包复制一份到WEB-INF/lib文件夹里:
========>
3、发现所有在WebContent目录下需要依赖的jar包都要复制多一份到WEB-INF/lib里头,如富文本编辑器、jstl、文件上传下载等所依赖的包。
三、使用
1.首先需要引入三个js和一个css样式文件:
2、然后在<body>里面添加标签,这就是一个富文本编辑器了。
3、在JavaScript里实例化编辑器,如下:
4、在umeditor目录下有一个index.html文件,在实例化UE的那个javascript代码块里面,有很多函数供我们使用编辑器,根据需要复制里面的代码即可。
四、图片上传
通过以上的操作其实已经实现了最基本的百度编译器的使用,但是图片上传基本功能里面是没有实现的。因为这个上传图片的功能是自己在后台写的,所以要有一个访问的路径。
第一个框中是百度自己的上传,可以不用他,自己自定义上传。只要修改地址就可以直接上传,后台使用的是springMvc。
打开umeditor.config.js这个文件,这是UM的配置文件,可以自定义很多东西
覆盖原来的imageURL即可,修改为你自己项目中正在使用的图片上传接口即可,注意,必须是支持ajax异步上传的
那么好,现在启动项目测试,图片上传是没有问题,但是图片展示会有问题,原因是返回的JSON和百度的格式不匹配
那么怎么办,2种做法,适配自己的返回数据格式
或者直接修改百度的js源码,下面是第二种做法:
打开webapp/umeditor/dialogs/image/image.js这个路径下的image.js,找到如下方法(uploadComplete):
这个方法是成功后执行的。
callback是用来展示图片内容的,可以自行变更数据格式。通过修改这两个方法的代码,实现图片展示。