UEditor集成

最新推荐文章于 2024-02-23 12:20:31 发布

weixin_34185320

最新推荐文章于 2024-02-23 12:20:31 发布

阅读量84

点赞数

文章标签： java javascript ViewUI

原文链接：https://my.oschina.net/wyyft/blog/267379

版权

为什么80%的码农都做不了架构师？>>>

本文是介绍在开发个人博客的过程中，集成UEditor编辑器到项目中的过程，走了弯路非常不爽，怒写此文！

说明，本次使用的2014年5月16日刚发布的1.4.2，下载地址，这个版本简化了配置方式，但是没有给出指导性的说明，我被网上旧版的集成方式兜了好大一个圈子才绕回来！下面开始集成过程：

首先下载UEditor，下载地址，我下载的是JSP版本，解压到任意目录
在项目中建立一个用于保存UEditor的目录，如ueditor
拷贝所有文件到ueditor文夹中，如下图所示：
参考官方文档,实例化一个编辑器，比如我的代码：

<!-- 加载编辑器的容器 name与后台对应 -->
<script id="content" name="post.content" type="text/plain">
    ${post.content}
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="${BASE}/www/lib/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${BASE}/www/lib/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
<!-- 实例化编辑器，content对应上面的id，与官方例子相比这里定制了工具栏，初始化编辑器高度为500 -->
    var ue = UE.getEditor('content', {
        toolbars: [
            [
                'fullscreen', 'source', '|',
                'bold', 'italic', 'underline', 'blockquote', '|',
                'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
                'paragraph', 'fontfamily', 'fontsize', '|',
                'justifyleft', 'justifycenter', 'justifyright', '|',
                'link', 'unlink', '|',
                'simpleupload', 'insertimage', 'attachment', 'insertcode', '|',
                'horizontal', 'inserttable', 'preview', 'searchreplace', '|',
                'help'
            ]
        ],
        initialFrameHeight: 500
    });
</script>

编辑器的效果如下图（工具栏和OSC博客的差不多了）：

配置图片上传和文件上传（这是走弯路的地方）
我找了网上的好多配置方法都是旧版本的，新版的其实很简单，只要做下面两件事：
1. 将jsp/lib下面的jar包放进项目的lib目录
  【这里需要注意一点，如果是maven项目你会发现，ueditor这个jar包并没有上传到中央库，你可以使用下面的命令将这个jar包安装到本地maven库中】
```
   mvn install:install-file -Dfile=ueditor-1.1.0.jar -DgroupId=com.baidu -DartifactId=ueditor -Dversion=1.1.0   -Dpackaging=jar
```

修改jsp/config.json中修改图片和文件的上传路径：

   "imagePathFormat": "/project_name/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径, 可以自定义保存路径和文件名格式 */

 比如我的项目根目录是`http://localhost:8080/project_name` 就把每个配置路径的地方加上项目前缀`/project_name`  这个地方暂时就摸索出来这种配置方式，感觉应该不是最优方式，怪怪的，知道的请留言。