最近做项目需要一个在线编辑器。选了百度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页面同级目录也必须加上父目录名,否则引不进来。