1 /** 2 * insert image for kissy editor 3 * @author yiminghe@gmail.com 4 */ 5 KISSY.add("editor/plugin/image/index", function (S, Editor, Button, Bubble, ContextMenu, DialogLoader) { 6 7 var UA = S.UA, 8 Node = S.Node, 9 $ = S.all, 10 Event = S.Event, 11 checkImg = function (node) { 12 node = $(node); 13 if (node.nodeName() === 'img' && 14 // prevent collision with fake objects 15 (!/(^|\s+)ke_/.test(node[0].className))) { 16 return node; 17 } 18 }, 19 tipHtml = '<a class="ks-editor-bubble-url" ' + 20 'target="_blank" href="#">在新窗口查看</a> | ' 21 + '<a class="ks-editor-bubble-link ' + 22 'ks-editor-bubble-change" href="#">编辑</a> | ' 23 + '<a class="ks-editor-bubble-link ' + 24 'ks-editor-bubble-remove" href="#">删除</a>'; 25 26 27 function ImagePlugin(config) { 28 this.config = config || {}; 29 } 30 31 S.augment(ImagePlugin, { 32 renderUI:function (editor) { 33 34 var self=this; 35 36 function showImageEditor(selectedEl) { 37 DialogLoader.useDialog(editor, "image", 38 self.config, 39 selectedEl); 40 } 41 42 // 重新采用form提交,不采用flash,国产浏览器很多问题 43 editor.addButton("image", { 44 tooltip:"插入图片", 45 listeners:{ 46 click:function () { 47 showImageEditor(null); 48 49 } 50 }, 51 mode:Editor.WYSIWYG_MODE 52 }); 53 54 var handlers = [ 55 { 56 content:"图片属性", 57 fn:function () { 58 var img = checkImg(this.get("editorSelectedEl")); 59 if (img) { 60 // make editor restore focus 61 this.hide(); 62 showImageEditor($(img)); 63 } 64 } 65 }, 66 { 67 content:"插入新行", 68 fn:function () { 69 this.hide(); 70 var doc = editor.get("document")[0], 71 p = new Node(doc.createElement("p")); 72 if (!UA['ie']) { 73 p._4e_appendBogus(undefined); 74 } 75 var r = new Editor.Range(doc); 76 r.setStartAfter(this.get("editorSelectedEl")); 77 r.select(); 78 editor.insertElement(p); 79 r.moveToElementEditablePosition(p, 1); 80 r.select(); 81 } 82 } 83 ]; 84 85 var children = []; 86 87 S.each(handlers, function (h) { 88 children.push({ 89 content:h.content 90 }) 91 }); 92 93 editor.addContextMenu("image", checkImg, { 94 width:120, 95 children:children, 96 listeners:{ 97 click:function (e) { 98 var self = this, content = e.target.get('content'); 99 S.each(handlers, function (h) { 100 if (h.content == content) { 101 h.fn.call(self); 102 } 103 }); 104 105 } 106 } 107 }); 108 109 editor.docReady(function () { 110 Event.on(editor.get("document")[0], "dblclick", function (ev) { 111 ev.halt(); 112 var t = $(ev.target); 113 if (checkImg(t)) { 114 showImageEditor(t); 115 } 116 }); 117 }); 118 119 editor.addBubble("image", checkImg, { 120 listeners:{ 121 afterRenderUI:function () { 122 var bubble = this, 123 el = bubble.get("contentEl"); 124 el.html(tipHtml); 125 var tipUrlEl = el.one(".ks-editor-bubble-url"), 126 tipChangeEl = el.one(".ks-editor-bubble-change"), 127 tipRemoveEl = el.one(".ks-editor-bubble-remove"); 128 Editor.Utils.preventFocus(el); 129 tipChangeEl.on("click", function (ev) { 130 showImageEditor(bubble.get("editorSelectedEl")); 131 ev.halt(); 132 }); 133 tipRemoveEl.on("click", function (ev) { 134 if (UA['webkit']) { 135 var r = editor.getSelection().getRanges(); 136 if (r && r[0]) { 137 r[0].collapse(); 138 r[0].select(); 139 } 140 } 141 bubble.get("editorSelectedEl").remove(); 142 bubble.hide(); 143 editor.notifySelectionChange(); 144 ev.halt(); 145 }); 146 bubble.on("show", function () { 147 var a = bubble.get("editorSelectedEl"); 148 if (a) { 149 var src = a.attr("_ke_saved_src") || a.attr("src"); 150 tipUrlEl.attr("href", src); 151 } 152 }); 153 } 154 } 155 }); 156 } 157 }); 158 159 return ImagePlugin; 160 }, { 161 requires:['editor', 162 '../button/', 163 '../bubble/', 164 '../contextmenu/', 165 '../dialogLoader/'] 166 });