富文本编辑器ueditor的使用实践

1.ueditor官网

http://ueditor.baidu.com/website/index.html

2. jsp版本的使用方式

2.1 下载对应版本

2.2 导入至项目

解压后导入到java项目中，本人的项目目录如下，供参考

jsp/lib文件夹中的jar包，因为是maven项目，我选择从maven服务器获取配置后，加在pom文件中，如下

2.3 页面显示

在jsp页面中添加

<script id="editor" type="text/plain"></script>

运行，即可看到该富文本编辑器

3. 配置问题

3.1 功能筛选

ueditor提供了非常多功能，但实际使用中可能并不需要，此时只要在ueditor.config.js中选择性删除即可

3.2 上传功能配置

此时，点击上传图片，发现提示报错“后端配置项没有正常加载，上传插件不能正常使用！”，或者配置后提示上传失败，不能正常显示上传图片等。

网上查找后，发现是配置问题，主要是上传路径imagePathFormat 与显示路径前缀imageUrlPrefix 的配置，这些配置都存放在/jsp/config.json文件中。

通过一步步跟踪查看源码（如有过程需要，可以单独写一篇贴出来），修改配置如下（与editor文件目录一致）：

其他配置类似，即可实现上传与显示。

4. 运行问题

页面使用UEditor.setContent() 时报错， Uncaught TypeError: Cannot set property 'innerHTML' of undefined 错误

经查，是由于UEditor未加载完成导致，使用如下方式即可

var ue = UE.getEditor('editor');
ue.ready(function() {
    ue.setContent('<b>this is the content</b>');
});

感谢看到此处的你，有问题欢迎讨论！❤❤❤