百度富文本编辑器UEditor的使用总结

百度富文本编辑器UEditor的使用总结

1.UEditor的简介

   它是百度推出的一款开源的富文本web编辑器。自认为是目前使用挺广泛的一款富文本编辑器。
2.下载UEditor（我下载的是Jsp 版本）
    下载网址：http://ueditor.baidu.com/website/download.html
3. 解压后直接加入到项目中      在你的web工程或网站根目录下，新建一个名称叫ueditor文件夹，把下载ueditor解压后粘贴到你新建的这个文件夹中
4.在你的jsp页面中一如富文本编辑器
   1.引入相关js和css
      <script type="text/javascript" src="${basePath}/admin/ueditor/ueditor.config.js"></script>
       <script type="text/javascript" src="${basePath}/admin/ueditor/ueditor.all.js"></script>
      <script type="text/javascript" src="${basePath}/admin/ueditor/lang/zh-cn/zh-cn.js"></script>
       <link rel="stylesheet" type="text/css" href="${basePath}/admin/ueditor/themes/default/ueditor.css" />
    2.添加编辑器
       <div class="form-group">
                           <label class="control-label col-md-3">内容</label>
                           <div class="col-md-6">

                               <textarea id='myEditor' name="content" style="margin-top: 30px;">
                                      <c:out value="${record.content}"></c:out>
                               </textarea>
                           </div>
       </div>

          <script type="text/javascript">
            var basePath = "${basePath}";
         </script>
          <script type="text/javascript">
                var editor = new UE.ui.Editor();
                editor.render('myEditor');
                UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
                UE.Editor.prototype.getActionUrl = function(action){
                if(action == 'upload/image'){
                       return basePath+'/upload/images';
                }else{
                       return this._bkGetActionUrl.call(this, action);
                }
             }
          </script>

    3.修改ueditor文件夹下边的editor_config.js
           var URL = window.UEDITOR_HOME_URL || "/zxzl/admin/ueditor/";
   注释：zxzl是工程名
    4.修改ueditor文件夹下jsp文件夹下的config.json文件

imageUrlPrefix 图片 scrawlUrlPrefix 涂鸦 snapscreenUrlPrefix 截图 catcherUrlPrefix 远程图片 videoUrlPrefix 视频 fileUrlPrefix 文件
我的更改如下：
/* 上传图片配置项 */
    "imageActionName": "upload/image", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
5.由于项目中使用maven工程，需要将依赖的jar配置到pom.xml中
      这里有一点需要注意，由于maven库中没有ueditor这个jar包，我是这样引入的
      
       <dependency>
           <groupId>commons-io</groupId>
           <artifactId>commons-io</artifactId>
           <version>2.4</version>
       </dependency>
       <dependency>
           <groupId>commons-fileupload</groupId>
           <artifactId>commons-fileupload</artifactId>
           <version>1.3.2</version>
       </dependency>
       <dependency>
           <groupId>commons-codec</groupId>
           <artifactId>commons-codec</artifactId>
           <version>1.9</version>
       </dependency>
       <dependency>
          <groupId>org.json</groupId>
          <artifactId>json</artifactId>
          <version>20160212</version>
        </dependency>
       <dependency>
           <groupId>com.baidu.ueditor</groupId>
           <artifactId>ueditor</artifactId>
           <version>1.1.2</version>
           <scope>system</scope>
       <systemPath>${basedir}/src/main/webapp/WEB-INF/lib/ueditor-1.1.2.jar</systemPath>

秒客网

百度富文本编辑器UEditor的使用总结

相关文章