Ueditor富文本编辑器使用详解

一、下载ueditor

    官网下载页面：http://ueditor.baidu.com/website/download.html

    用户根据自己的需求下载适当版本的ueditor，此处使用的是【1.4.3.3 JSP版】的 UTF-8版

二、解压并放入项目

将下载的ueditor解压并放入项目

将 utf8-jsp->jsp->lib文件夹下的jar包放入WEB-INF下的lib文件夹中（此处注意jar冲突）

三、jsp引用ueditor

在你的jsp中引用以下两个文件（路径请自行调整）

<script type="text/javascript" src="../utf8-jsp/ueditor.config.js"></script>   
<script type="text/javascript" src="../utf8-jsp/ueditor.all.js"></script> 

所需富文本编辑器处使用 

<textarea id="editor" name="editor" style="height: 300px;width: 600px; margin: 0 auto;"></textarea>

并在jsp页面下面实例化编辑器

<script type="text/javascript">  
    var ue = UE.getEditor("editor");  
</script>  

此时就可以使用了（此处富文本的功能可自行定义，具体使用请查看官方文档：http://fex.baidu.com/ueditor/）

其中上图中的图片保存路径在jsp文件夹下的config.json文件中配置

若想改变图片上传路径，imageUrlPrefix，imagePathFormat这两个配置项需同时修改，否则图片上传之后无法正常显示图片

该文件中还包括文件、视频、截图等参数配置，原理同上

四、富文本编辑器中的数据获取与回填

使用UE.getEditor('editor').getContent()可获取编辑器中的全部内容

在回填的页面需要先实例化编辑器，再进行赋值

var ue = UE.getEditor('editor');
$("#editor").val(此处为数据！);

其中index.html中为官网提供的API