富文本编辑器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>');
});



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





©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页