最近做项目需要一个在线编辑器。选了百度ueditor,开始是看网上的教程,但是发现都是以前的版本,根本就不一样,照着来的话,反而误导了我,文档也比较旧了。于是自己看文档,看代码,最后成功了。可能ueditor的版本升级后这个教程就没法用了,不要硬搬硬套。

1、先去下载一个ueditor 1.4.3 jsp 的开发版。 

2、将其解压,然后把ueditor包直接导入进工程里的webRoot目录下

3、

新建jsp页面,例如:test.jsp

在页面的body结束标签之前添加如下代码: 

<!-- 加载编辑器的容器 -->

    

    <!-- 配置文件 -->

    <script type="text/javascript" src="ueditor/ueditor.config.js"></script>

    <!-- 编辑器源码文件 -->

    <script type="text/javascript" src="ueditor/ueditor.all.js"></script>

    <!-- 实例化编辑器 -->

    <script type="text/javascript">

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

</script>

4、


在需要的位置添加ueditor的引用

<script id="container" name="content" type="text/plain">

        点击最后的电脑图标可以全屏操作哦

</script>

5、


在ueditor/jsp目录下找到config.json文件,修改下面的位置

 

"p_w_picpathUrlPrefix": "http://localhost:8080/ArticleCMS/", /* 图片访问路径前缀 */

这个是必须配置的,ueditor目录之前的访问路径部分

例如:ueditor在项目中的访问地址是http://localhost:8080/ArticleCMS/ueditor

则只填前面部分即可。

"p_w_picpathPathFormat": "/ueditor/jsp/upload/p_w_picpath/{yyyy}{mm}{dd}{time}{rand:6}", 

这是上传图片的重命名格式,路径可以自定义。

 

经过如上几步,图片上传功能就可以使用了。

 

注意:jsp引入js文件时,就算是配置文件就跟本jsp页面同级目录也必须加上父目录名,否则引不进来。