最新版富文本编辑器UEditor操作教程

         最近项目中使用到了富文本编辑器，选择的是百度的UEditor。所以对其进行了研究，发现最近发布了新版本，与以往的用法有的改变。一下对UEditotr 的是用做一下详细的介绍。

 

         首先是UEditotr的下载，下载地址：http://ueditor.baidu.com/website/download.html

在这个页面有很多下载选项，为了简单起见，可以更具开发的环境进行下载。我用的是JSP，所以下载的是

以下的使用说明也都是以JSP的作为介绍，其他的大同小异。

         下载完成之后解压出来。

下边开始介绍使用方法：

一.导入：

    将解压好的文件导入工程，我用的是MyEclipse，直接粘贴到工程中的WebRoot下如图：

    工程中的js文件报错是由于开发工具的问题，不用处理。

 

二.包的导入：

    在导入的文件中的jsp->lib下有需要导入的包

将这些包拷贝到WEB-INF的lib下

导入后有的包不能自动添加，需要手动添加一下。

 

三.简单例子：

    在jsp的head中添加：

<script type="text/javascript"charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.config.js"></script>

    <script type="text/javascript" charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.all.js"> </script>

 

body中添加：

    <scriptid="editor" name="editor" type="text/plain"     style="width:1024px;height:500px;"></script>

 

   <script type="text/javascript">

 

    //实例化编辑器

    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下   引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

    var ue = UE.getEditor('editor');

   </script>

注意在head中的引用是否正确，一切完成后启动程序，就能看到效果。

 

四.修改展现的样式：

    如果你不需要这么多的功能选项，可以修改ueditor.config.js

 这是规定页面展现的地方，不要的删除即可。我只需要上传图片和表格，所有修改后如图：

 

 

五.修改图片上传地址：

    这个地方，之前的版本是在ueditor.config.js修改的，但新版本中是在config.json中修改：

这里有很详细的中文注解。修改imagePathFormat即可修改上传图片的地址，其他上传功能修改相似。

 

六.上传到云盘或别的网站：

    之前的上传是上传到程序所在的服务器上，这样迟早是会沾满资源的，所以要放到云盘或别的地方。

    指定上传路劲：UE.Editor.prototype._bkGetActionUrl= UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl= function(action) {

    if (action == 'uploadimage' || action == 'uploadscrawl' || action== 'uploadimage') {

          return "<c:url value='/savePic'/>";

    } else if (action == 'uploadvideo') {

        return 'http://a.b.com/video.php';

    } else {

        return this._bkGetActionUrl.call(this, action);

    }

};

这样在上传图片的时候就会去找/savePic路劲，实现你指定的上传。在后台写好上传功能即可。需注意的是上传时，信息放在Request Payload中，后台接收数据时，需注意（接收方法请上网查找，此处不做介绍）；图片保存后，需向前台回传信息：

      JSONObject result = new JSONObject(); 

      result.put("state", "SUCCESS");

//    result.put("title", "1431917830166036926.png");

//    result.put("original","QQ\u56fe\u724720150511105213.png");

//    result.put("type", ".png");

      result.put("url", request().getContextPath()+"/pledge/download?filePath="+filePath);

//    result.put("size", "8941");

     

      this.renderJSON(result.toString());

 

七.表单提交：

   简单的form表单提交即可。将接收的信息保存。

 

八.页面展示：

   从数据库提取信息，展示即可：

<script id="editor"name="editor" type="text/plain" style="width:1024px;height:500px;">    <c:out value="${editor}"/>  </script>

 

九.页面操作：

   页面有时需要一些操作，比如禁止编辑，提取信息等：

   varue = UE.getEditor('editor');

   ue.ready(function() {

   ue.setDisabled('fullscreen');

   });//禁止编辑

可查看文档：http://fex.baidu.com/ueditor/#api-common