tinymce原装插件源码分析（二）-link

link

功能描述如下：

• 单纯放置光标：

1、如果光标放到了<a>上，读取a标签的内容，并弹框显示，确定的时候，更新当前a标签。

　　2、否则，就创建弹框，确定的时候，按照参数添加a标签。

• seletion:

1、部分或全部选择<a>的时候，与上面的1一样，更新。

2、选择非文字的<span>、<p>等，会读取选择的文字，并弹框，把显示文字字段填成选择的文字，根据修改，把选择的文字修改成<a>。

当然实际上link的功能不止这些。还有锚点等功能。这需要看源码的条件判断，才能解锁新的功能。

这里涉及到弹框及选择部分文字的读取。

plugin.js

     editor.addButton('link', {
         icon: 'link',
         tooltip: 'Insert/edit link',
         shortcut: 'Meta+K',  //快捷键 ctl+K
         onclick: createLinkList(showDialog),
         stateSelector: 'a[href]'
     });

在hr中，按钮的动作是使用cmd参数指定指令名来触发指令。这里直接绑定了click函数。注：stateSelector在代码中未进行处理，见 L31976- L31991。

click函数：createLinkList依赖于link_list配置（默认未配置），所以实际上，只调用了showDialog函数（核心）。

     function showDialog(linkList) {
         selectedElm = selection.getNode();
         anchorElm = dom.getParent(selectedElm, 'a[href]');  //如果当前是a,就返回当前,否则一直找，直到找到父亲。找不到就返回null
         onlyText = isOnlyTextSelected(); //跨元素的时候会返回false,否则返回true
                 。。。。此处省略n行。  这里面有一堆条件，都是新的功能触发。都是与setting设置有关。

         win = editor.windowManager.open({
             title: 'Insert link',
             data: data,
             body: [
                 {  //地址
                     name: 'href',
                     type: 'filepicker',
                     filetype: 'file',
                     size: 40,
                     autofocus: true,
                     label: 'Url',
                     onchange: urlChange,
                     onkeyup: updateText
                 },
                 textListCtrl,  //显示文字
                 linkTitleCtrl,  //标题
                 buildAnchorListControl(data.href),
                 linkListCtrl,
                 relListCtrl,
                 targetListCtrl,
                 classListCtrl
             ],
             onSubmit: function(e) {
                 /*eslint dot-notation: 0*/  //点击确定后，会触发此函数
                 var href;

                 data = tinymce.extend(data, e.data);
                 href = data.href;

                 // Delay confirm since onSubmit will move focus
                 function delayedConfirm(message, callback) {
                     var rng = editor.selection.getRng();

                     window.setTimeout(function() {
                         editor.windowManager.confirm(message, function(state) {
                             editor.selection.setRng(rng);
                             callback(state);
                         });
                     }, 0);
                 }
                function insertLink() {
                            //最终的插入a的操作
                   }
                   if (!href) {   //如果连接为空的时候，不进行link添加操作，并返回
                     editor.execCommand('unlink');
                     return;
                 }
                 // 此处省略email链接的处理，与下面的一个条件类似。
                 // Is not protocol prefixed
                 if ((editor.settings.link_assume_external_targets && !/^\w+:/i.test(href)) ||
                     (!editor.settings.link_assume_external_targets && /^\s*www[\.|\d\.]/i.test(href))) {
                     delayedConfirm(
                         'The URL you entered seems to be an external link. Do you want to add the required http:// prefix?',
                         function(state) {
                             if (state) {
                                 href = 'http://' + href;
                             }

                             insertLink();
                         }
                     );

                     return;
                 }

                 insertLink();
             }
         });
     }

核心 1： editor.windowManager.open

打开一个model对话框，这里需要注意参数body的写法，内部是一个列表，每写一个元素，会生成一行form表单。

上面三个红框内部的数据描述分别是：

        

注意下type和name。这里显示成中文，请参见langs文件夹下的zh_CN,js 。它是一个字典，来替换显示的关键字的。

当url数据有‘问题’的时候，巧妙的使用了：

     window.setTimeout(function() {
                         editor.windowManager.confirm(message, function(state) {
                             editor.selection.setRng(rng);
                             callback(state);
                         });
                     }, 0);

来重新修改url。

---

解锁新技能- 添加anchor

观察plugin.js L73下面的函数：

         function buildAnchorListControl(url) {
             var anchorList = [];

             tinymce.each(editor.dom.select('a:not([href])'), function(anchor) {  //找其他没有href但有id属性的<a>,然后把他们的id列在上图的锚点处。
                 var id = anchor.name || anchor.id;

                 if (id) {
                     anchorList.push({
                         text: id,
                         value: '#' + id,
                         selected: url.indexOf('#' + id) != -1
                     });
                 }
             });

             if (anchorList.length) {
                 anchorList.unshift({text: 'None', value: ''});

                 return {
                     name: 'anchor',
                     type: 'listbox',
                     label: 'Anchors',
                     values: anchorList,
                     onselect: linkListChangeHandler
                 };
             }
         }

核心二-insertLink：

                 function insertLink() {
                     var linkAttrs = {
                         href: href,
                         target: data.target ? data.target : null,
                         rel: data.rel ? data.rel : null,
                         "class": data["class"] ? data["class"] : null,
                         title: data.title ? data.title : null
                     };

                     if (anchorElm) {  //把光标放到了a标签处或选择a
                         editor.focus();

                         if (onlyText && data.text != initialText) {
                             if ("innerText" in anchorElm) {
                                 anchorElm.innerText = data.text;
                             } else {
                                 anchorElm.textContent = data.text;
                             }
                         }

                         dom.setAttribs(anchorElm, linkAttrs);

                         selection.select(anchorElm);
                         editor.undoManager.add();//操作可被undo
                     } else {  //未选择a
                         if (onlyText) {   //未跨元素
                             editor.insertContent(dom.createHTML('a', linkAttrs, dom.encode(data.text)));  //直接插入新元素即可。
                         } else {  //跨元素了
                             editor.execCommand('mceInsertLink', false, linkAttrs);
                         }
                     }
                 }

涉及到的命令：

mceInsertLink (在选择位置处，可能跨元素，插入a)、unlink、

有用的函数：

editor.windowManager.open（打开一个包含指定form表单的model窗口）、editor.windowManager.confirm（内部封装了MessageBox.msgBox）、editor.insertContent（内部调用了mceInsertContent命令）、及此plugin的buildListItems（构建editor.windowManager.open中body中某个元素的value参数的）。

补：

stateSelector: 'a[href]'： 功能是： 鼠标放在了这个元素上，'link'按钮会有加灰底提示。