版本说明：Ueditor编辑器 1.4.3JSP、UTF-8版本
菜鸟使用途中遇到很多困难，在网上不停的找解答方法，整理出来可供使用，有好的建议就更好了。
我的目标：
- Ueditor编辑器嵌入到自己原来的项目中；
- 只能添加不能删除图片，无用资源占用空间极不合理，所以在多图上传->在线管理添加了删除图片的功能；
- 把编辑器编辑的内容存储到Oracle数据库
步骤
一、在JSP界面上添加Ueditor编辑器
下载官网：http://ueditor.baidu.com/website/download.html
下载文本后后解压，把整个ueditor1_4_3-utf8-jsp文件夹粘贴到项目/Webroot/js下，文件夹改名为ueditor。
- ueditor\jsp\lib下面5个jar包剪切到项目的lib包下，特别注意其中2个jar包：commons-io-2.4.jar项目中不得有比他版本低的jar包，如commons-io-1.x.jar或2.0.jar，低版本一定要删除；ueditor-1.1.1.jar官方本身此jar包就有问题，用的是绝对路径而不是相对路径。附件如下ueditor-1.1.1.jar |||||||注意：ueditor-1.1.1.jar这个解决方法是从《jsp版ueditor图片在线管理返回绝对路径》这篇文章上学习，它的jar是JRE1.7编译，而我的是1.6，不兼容。附件我用jre1.6编译的，如果想用1.7，请看原文章。
- 在想要嵌入编辑器的JSP文件引入如下代码
1 <script type="text/javascript" src="${ctx}/js/ueditor/ueditor.config.js"></script> 2 <script type="text/javascript" src="${ctx}/js/ueditor/ueditor.all.min.js"></script> 3 <link rel=stylesheet href="${ctx}/js/ueditor/themes/default/css/ueditor.css"> - 在<body></body>你想要的位置添加编辑器
1 <script id="editor" type="text/plain" style="width:800px;height:500px;">内容，或从数据库读取</script>
同时其中添加下面代码，实例化编辑器
1 <script type="text/javascript"> 2 //实例化编辑器 3 </span>var ue = UE.getEditor(‘editor‘); 4 </script>
这时候就可以在界面看到编辑器了。
二、配置编辑器，上传图片和文件等
- ueditor.config.js中toolbars内容代表了将要显示出来的功能，如字体颜色、字号等，不想要的可以自行注释。
- 配置图片文件路径：ueditor.config.js中把注释内容window.UEDITOR_HOME_URL = "/xxxx/xxxx/";修改为
1 "window.UEDITOR_HOME_URL =/项目名字/js/ueditor/";
即ueditor文件夹的路径，同时去除注释。
- ueditor\jsp\config.json中，图片上传路径
1 "imageUrlPrefix": "/改成项目名字", /* 图片访问路径前缀 */ 2 "imagePathFormat": "/js/ueditor/upload/image/{yyyy}-{mm}-{dd}/{time}_{rand:6}_{filename}", /* 图片存储路径，以及命名方式 */同理config.json下其他的都改了，上传文件、列出指定目录下的图片或文件等。
- 尝试上传图片，成功。若失败，查看tomcat下部署的文件夹下是否存在该图片，再分析原因。Ueditor图片不显示的一个原因：上传的图片名字是汉字。
三、存储编辑内容
- JSP界面设置保存按钮，
1 var editorText = $.trim(UE.getEditor(‘editor‘).getContent());
点击保存触发ajax事件，传递数据editorText到Web层XXXXaction.java，然后调用Service层，再到Dao层等一些流程。
- 存储方面的问题：由于数据量过大，因此oracle数据库采用clob类型的字段。Dao层的SQL语句是update语句，语句过长Oracle报错ORA-1704:string literal too long。困扰了我好久，网上说的办法
1 declare v_clob clob :=‘大数据‘; 2 begin insert into EDITOR values (‘2‘, v_clob); 3 end;
也也不行，最终方案：把数据截开，例如截成4段，第一段update
1 declare 2 v_clob clob := ‘大数据‘ 3 begin 4 update EDITOR set EDITOR_TEXT = EDITOR_TEXT where XXX; 5 end;
后面几段
1 declare 2 v_clob clob := ‘大数据‘ 3 begin 4 update EDITOR set EDITOR_TEXT = EDITOR_TEXT||v_clob where XXX; 5 end;
成功。
- 存储编辑器内容时， 之类的，即&XX不能存储。处理方法：用特殊字符替代&,后期读取的时候再替换回来。界面不允许输入该特殊字符
四、UEditor多图上传->在线管理添加了删除图片的功能。同理文件删除可用
- 在ueditor->dialogs->image->image.html添加代码
1 <script> 2 //新增在线管理删除图片 3 function uedel(path, id){ 4 if(confirm(‘您确定要删除它吗？删除后不可恢复！‘)){ 5 //var url = editor.getOpt(‘imageDelUrl‘); 6 deleteFile(path); 7 var url = editor.getOpt(‘imageDelUrl‘); 8 $.get(url,{‘path‘:path},function(data){ 9 if (data.state == ‘success‘) { 10 alert(data.message); 11 $("#"+id).parent("li").remove(); 12 }else{ 13 alert(data.message); 14 } 15 },‘json‘); 16 } 17 } 18 function deleteFile(path){ 19 $.ajax({ 20 type:‘POST‘, 21 url:editor.getOpt(‘imageDelUrl‘)+‘action路径：你项目Web层处理的方法路径!deleteFile.action‘, 22 data:{pathName : path}, 23 cache:false, 24 timeout:6000, 25 error: function (XMLHttpRequest, textStatus, errorThrown) { 26 alert(‘删除失败‘); 27 }, 28 success:function(){ 29 alert(‘删除成功！请点击保存，查看是否误删！‘); 30 location.reload(); 31 } 32 }); 33 } 34 </script> - ueditor\jsp\config.json中添加代码
1 /*删除指定目录下的文件或图片*/ 2 "imageDelUrl":"/项目名字",
- WEB层处理方法.java添加下面的方法
1 public void deleteFile(){ 2 //图片和文件管理中的删除 3 String path = ServletActionContext.getServletContext().getRealPath("").replaceAll("\\\\", "/"); 4 System.out.println("========================================path："+path); 5 HttpServletRequest request = Struts2Utils.getRequest(); 6 String pathName = this.getQueryParameter(request, "pathName"); 7 String filePath = path + pathName; 8 File file = new File(filePath); 9 // 如果文件路径所对应的文件存在，并且是一个文件，则直接删除 10 if (file.exists()) { 11 file.delete(); 12 System.out.println("删除成功"); 13 } else { 14 System.out.println("文件不存在"); 15 } 16 }
五、调试小技巧
Chrome浏览器 Ctrl+Shift+N进入隐身模式，不用再担心JS缓存造成的影响。
时间： 2024-10-12 13:12:17