kendo ui 富文本编辑控件 Editor 实现本地上传图片,并显示

富文本编辑的组件有很多,大名鼎鼎的KENDO UI中自然也有,但是默认功能中,只能包含网络图片,

而如果要实现本地上传图片,KENDO UI也提供了相应的功能,但必须实现KENDO规定的多个接口,

而且功能过于丰富,有时项目并用不到,所以我想利用自定义按钮来实现,下面就是实现过程:

1、先在JSP中定义textarea标签,作为富文本编辑框的占位。

1 <div class="form-group">
2                     <label class="col-xs-2 control-label">项目简述:</label>
3                     <div class="col-xs-8">
4                         <textarea id="project-desc" type="text" class="form-control" maxlength="10000"></textarea>
5                     </div>
6                 </div>
View Code

2、在JS脚本中定义其为KendoEditor,并设置其默认按钮,及自定义按钮。

 1     $("#project-desc").kendoEditor({
 2           tools: [
 3                       "formatting",
 4                       "bold", "italic", "underline",
 5                       "justifyLeft", "justifyCenter", "justifyRight",
 6                       "insertUnorderedList", "insertOrderedList", "indent", 
 7                       "createTable",
 8                       {
 9                           name: "image",
10                           tooltip: "Insert image",
11                           template: "<button type='button' class='k-button' οnclick='uploadimg();'><span class='glyphicon glyphicon-picture' aria-hidden='true'></button>",
12                       }
13                  ],
14                 
15                 keydown: function(e) {
16                     $(".k-editable-area").tooltip('destroy');
17                 }
18     });
View Code

name为标签的名字,tooltip为悬停的提示,template为按钮的样式。

3、uploadimg()方法是打开文件上传选择窗口,这里我使用的是kendoWindow。

JSP代码:

 1  <div id="upload-img-win">
 2      <div class="container-fluid">
 3            <form id="editorUploadImg" action="${ctx }/Detail/uploadImg"  enctype='multipart/form-data'>
 4                <input id="srcEditor" type="hidden"/>
 5                <div class="form-group  ld-bottom" id="ImgUploadGroup">
 6                    <label class="col-xs-2 control-label">图片上传:</label>
 7                    <div class="col-xs-8">
 8                        <button id="uploadImg-btn" type="button" class="btn btn-primary" onclick="openImgSelectFile();">选择文件</button>
 9                        <label id="uploadImgFileName" class="control-label"></label>
10                        <input id="uploadImg" name="uploadImg" type="file" class="hidden" onchange="seletedImgFile();"/>
11                    </div>
12                </div> 
13                <div class="row ld-top ld-bottom">
14                    <div class="col-xs-10">
15                        <div class="pull-right">
16                            <button id="doc-save-btn" type="button" class="btn btn-primary" onclick="uploadImgWinObj.save()">保存</button>
17                            <button id="doc-cancel-btn" type="button" class="btn btn-default" onclick="uploadImgWinObj.close()">关闭</button>
18                        </div>
19                    </div>
20                </div>
21            </form>   
22        </div> 
23 </div>
View Code

js代码:

 1 var uploadImgWinObj = null;
 2 //上传图片窗口
 3 function uploadImgWin() {
 4     var me = this;
 5 
 6     this.winEl = $("#upload-img-win");
 7     this.winEl.kendoWindow({
 8         draggable   : true,
 9         width       : "650px",
10         modal       : true,
11         pinned      : false,
12         title       : "选择图片",
13         visible     : false,
14         animation   : false,
15         resizable   : false,
16         actions     : ["Close"]
17     });
18 
19     this.kObj = this.winEl.data("kendoWindow")
20 
21     this.open = function(srcEditor) {    
22         clearInput("#upload-img-win");
23         $("#uploadImgFileName").html("");
24         $("#uploadImg").val("");
25         $("#srcEditor").val(srcEditor);
26         this.kObj.center();
27         this.kObj.open();
28     }
29 
30     this.close = function() {
31         this.kObj.close();
32     }
33 
34     this.save = uploadImg;
35 }
36 
37 //上传图片
38 function uploadImg(){
39     if($("#uploadImg").val()==""){
40         markError("#uploadImg","没有选择任何文件!","#editorUploadImg")
41         return;
42     }
43     
44      $("#editorUploadImg").ajaxSubmit({
45          type: "post",
46          success: function (data) {
47              if(data!="-99"){
48 //                 bootbox.alert("操作成功!");
49                  var srcEditor = $("#srcEditor").val();
50                  var editor = $(srcEditor).data("kendoEditor");
51                  editor.exec("insertHTML", { value: "<img src='"+ ctx + "/" + data +"' >"});
52                  uploadImgWinObj.close();
53              }else{
54                  uploadImgWinObj.close();
55                   bootbox.alert("操作失败!");                                
56              }
57          },
58          error: function(e){
59              bootbox.alert("操作失败!");
60              uploadImgWinObj.close();
61          }
62      });    
63 }
64 
65 //选择图片
66 function openImgSelectFile(){
67     $("#uploadImg").click();
68 }
69 
70 //选中图片后,显示图片名称
71 function seletedImgFile(){
72     $("#uploadImgFileName").html($("#uploadImg").val());
73 }
74 
75 function uploadimg(){
76     uploadImgWinObj.open("#project-desc");
77 }
78 
79 $(document).ready(function() {
80     uploadImgWinObj = new uploadImgWin();  
81 }
82   
View Code

openImgSelectFile和seletedImgFile是对文件选择控件的包装,为了显示效果好看些。

uploadImg方法采用了ajaxSubmit方式进行提交,这里需要引用jquery.form.js插件,

该插件可以使用AJAX异步方式上传文件,http://plugins.jquery.com/form/ 这里可以下载。

4、最后在Controller里实现保存上传图片功能。

 1 /**
 2      * 上传图片
 3      */
 4     @RequestMapping(value="/uploadImg")
 5     @ResponseBody
 6     public String uploadImg(HttpSession session,HttpServletRequest request,HttpServletResponse response,
 7             @RequestParam(value = "uploadImg", required = false) MultipartFile file) {
 8         try {
 9 
10             User loginUser = (User) session.getAttribute("loginUser");
11             
12             // 获得上传文件的格式
13             String fileName = "";
14             String path = "";
15             String url = "";
16             //无文件则不做文档保存动作
17             if(file!=null && !"".equals(file.getOriginalFilename()))  {
18                 fileName = file.getOriginalFilename();
19                 String format = fileName.substring(fileName.lastIndexOf("."));
20                 
21                 path = request.getSession().getServletContext().getRealPath("");
22 
23                 //使用UUID命名,防止文件重名
24                 UUID uuid = UUID.randomUUID();
25                 String newFileName = uuid.toString()+format;
26                 url = "resources/upload/"+loginUser.getUserId()+"/img/"+ newFileName;// 文件名
27         
28                 path = path + File.separator + "resources" + File.separator + "upload"+ File.separator+loginUser.getUserId()+ File.separator + "img";
29                 File diagramDirFile = new File(path);
30                 if (!diagramDirFile.exists()) {
31                     //如果文件夹不存在,则创建它
32                     diagramDirFile.mkdirs();
33                 }
34                 path = path + File.separator + newFileName;
35                 //保存上传文件
36                 FileCopyUtils.copy(file.getBytes(), new FileOutputStream(path));
37                     
38             }        
39             
40             return url;
41             
42         } catch (IOException e) {
43             // TODO Auto-generated catch block
44             e.printStackTrace();
45             return "-99";
46         }
47         
48         
49     }
View Code

服务器回传上传图片的URL,在Editor中插入该地址即可展示图片

转载于:https://www.cnblogs.com/zhoucloud/p/5283394.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值