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 });