1.在UEditor官方下载编辑器。
2.解压压缩文件到文件夹,因为默认的文件夹名字过长,建议重命名一下文件夹名,我这里命名为ueditor
文件夹中对应的目录为
3.将整个文件夹copy到项目webapp目录下,(我这里用的是IDEA,不知道什么原因直接往IDEA打开的项目里拷贝的时候,IDEA会卡死。。我是将ueditor直接拷贝到项目所在的硬盘路径下,然后重新启动IDEA。)
4.把文件夹中自带的jar包导入到项目,jar包在ueditor/jsp/lib中
5.修改配置信息,找到config.json文件,图片访问路径改为项目启动后访问浏览器的路径。
6.写一个 editor.jsp 页面调用看一下效果
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 第一步:引入UDEITOR编辑器的js文件 --> <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.js"> </script> <!-- 第二步:初始化 UDEITOR编辑器 --> <script type="text/javascript"> UE.getEditor('myeditor',{initialFrameHeight:300,initialFrameWidth:560}) </script> <form name="upfile" id="upfile"> <!-- 第三步:用于显示UDEITOR编辑器,可以是<textarea>,也可以是<script>... --> <textarea name="content" id="myeditor">默认值..</textarea> </form> </body> <!--这里是处理加载文本编辑器和上传图片路径的脚本--> <script> $(function(){ //初始化下拉框 initSelect(); //初始化富文本 initUedit(); }) //初始化Uedit function initUedit(){ var ue = UE.getEditor('content_ue',{ toolbars: [[ 'simpleupload', //单图上传 'insertimage'//多图上传 ]], zIndex : 9010, initialFrameWidth : 780, initialFrameHeight: 300 }); UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage') { return '/ueditor/uploadImage'; } else if(action == 'listimage') { return '/ueditor/listimage'; } else { return this._bkGetActionUrl.call(this, action); } } } </script> </html>
7.controller 跳转到该页面
8.看一下效果,成功了~