标签:
版本说明:Ueditor编辑器 1.4.3JSP、UTF-8版本
菜鸟使用途中遇到很多困难,在网上不停的找解答方法,整理出来可供使用,有好的建议就更好了。
我的目标:
步骤
一、在JSP界面上添加Ueditor编辑器
下载官网: http://ueditor.baidu.com/website/download.html
下载文本后后解压,把整个ueditor1_4_3-utf8-jsp文件夹粘贴到项目/Webroot/js下,文件夹改名为ueditor。
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">
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>
这时候就可以在界面看到编辑器了。
二、配置编辑器,上传图片和文件等
1 "window.UEDITOR_HOME_URL =/项目名字/js/ueditor/";
1 "imageUrlPrefix": "/改成项目名字", /* 图片访问路径前缀 */
2 "imagePathFormat": "/js/ueditor/upload/image/{yyyy}-{mm}-{dd}/{time}_{rand:6}_{filename}", /* 图片存储路径,以及命名方式 */
三、存储编辑内容
1 var editorText = $.trim(UE.getEditor(‘editor‘).getContent());
1 declare v_clob clob :=‘大数据‘;
2 begin insert into EDITOR values (‘2‘, v_clob);
3 end;
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;
四、UEditor多图上传->在线管理添加了删除图片的功能。同理文件删除可用
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>
1 /*删除指定目录下的文件或图片*/
2 "imageDelUrl":"/项目名字",
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缓存造成的影响。
SSH系统下,Ueditor1.4.3编辑器配置,增加图片删除功能+数据库存储
标签:
原文地址:http://www.cnblogs.com/tuziv5/p/4448414.html