kindeditor 富文本粘贴 图片

 1 <script type="text/javascript" src="../../Scripts/Plugins/kindeditor/kindeditor.js"></script>
 2     <script type="text/javascript">
 3 
 4         var editor;
 5         KindEditor.ready(function (K) {
 6             editor = K.create('#Comment', {
 7                 uploadJson: '../../Scripts/Plugins/kindeditor/asp.net/upload_json.ashx',
 8                 fileManagerJson: '../../Scripts/Plugins/kindeditor/asp.net/file_manager_json.ashx',
 9                 afterBlur: function () { this.sync(); },
10                 items: [
11                     'source', '|',  'print', 'template', 'cut', 'copy', 'paste',
12                     'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
13                     'superscript', 'clearhtml', 'quickformat',
14                     'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
15                     'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
16                     'flash'
17                 ],
18                 afterCreate: function () {
19                     var editerDoc = this.edit.doc;//得到编辑器的文档对象
20                     //监听粘贴事件, 包括右键粘贴和ctrl+v
21                     $(editerDoc).bind('paste', null, function (e) {
22                         /*获得操作系统剪切板里的项目，e即kindeditor,
23                         *kindeditor创建了originalEvent(源事件)对象，
24                         *并指向了浏览器的事件对象，而chrome浏览器
25                         *需要通过clipboardData(剪贴板数据)对象的items
26                         *获得复制的图片数据。
27                         */
28                         var ele = e.originalEvent.clipboardData.items;
29                         for (var i = 0; i < ele.length; ++i) {
30                             //判断文件类型
31                             if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {
32                                 var file = ele[i].getAsFile();//得到二进制数据
33                                 //创建表单对象，建立name=value的表单数据。
34                                 var formData = new FormData();
35                                 formData.append("Filedata", file);//name,value
36 
37                                 //用jquery Ajax 上传二进制数据
38                                 $.ajax({
39                                     url: '../../Services/UploadFile.ashx?action=1',
40                                     type: 'POST',
41                                     data: formData,
42                                     // 告诉jQuery不要去处理发送的数据
43                                     processData: false,
44                                     // 告诉jQuery不要去设置Content-Type请求头
45                                     contentType: false,
46                                     dataType: "json",
47                                     beforeSend: function () {
48                                         //console.log("正在进行，请稍候");
49                                     },
50                                     success: function (responseStr) {
51                                         //上传完之后，生成图片标签回显图片，假定服务器返回url。
52                                         var src = responseStr.LnkUrl;
53                                         var imgTag = "<img src='" + src + "' border='0'/>";
54 
55                                         //console.info(imgTag);
56                                         //kindeditor提供了一个在焦点位置插入HTML的函数，调用此函数即可。
57                                         editor.insertHtml(imgTag);
58 
59 
60                                     },
61                                     error: function (responseStr) {
62                                         console.log("error");
63                                     }
64                                 });
65 
66                             }
67 
68                         }
69                     }
70                     )
71                 }
72             });
73         });

</script>

 富文本框实现粘贴图片

转载于:https://www.cnblogs.com/maja/p/10276596.html