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'按钮会有加灰底提示。