TinyMCE - кнопка пользовательской ссылки - «добавить ссылку» - это нормально, но не могу найти документацию для «редактирования ссылки» и доступа к атрибутам ссылки

Question

Я добавил пользовательскую кнопку в TinyMCE, которая вызывает сделанный на заказ сборщик ссылок.Когда пользователь выбирает какой-то текст и нажимает кнопку, появляется диалоговое окно, и когда он выбрал URL, я использую execCommand('insertHTML', false, "<a href... etc">) для выделения.

Это работает нормально - теперь, когда ссылка уже быласоздан, и пользователь хочет отредактировать его, он снова нажимает кнопку ссылки (когда курсор находится внутри связанного текста как обычно), но затем возникает ситуация - я не знаю, как получить доступ к уже созданной ссылке, и этоатрибуты, чтобы затем загрузить и заполнить диалог снова!

Есть поиск TinyMCE сайт, стек, Google в целом.Надеюсь (и также немного боюсь) простого ответа - но если нет, то сложный будет хорошо !!

Если кто-нибудь знает ответ или может указать мне на него, я был бы чрезвычайно благодарен.Заранее спасибо, Роб

РЕДАКТИРОВАТЬ - биты моего кода для объяснения необходимости

В инициализации TinyMCE:

setup: function (ed) {
    ed.addButton("link", {
        title: "Link",
        onclick: function (evt) {
            Intranet.TextEditor._loadUrlDialog(jQueryTextAreaObject, evt);
        }
    });
}

Функция, котораяназывается выше:

_loadUrlDialog: function (jQueryTextAreaObject, clickEvent) {

    var mce = $(jQueryTextAreaObject).tinymce();

    var isSelected = mce.selection.getContent().length != 0 ? true : false;

    if (isSelected) {
        Intranet.UrlDialog.Fn.LoadDialog("", true, "", function (url, target, title) {

            var theTarget = target == false ? "_self" : "_blank";

            var link = "<a href=\"" + url + "\" target=\"" + theTarget + "\" title=\"" + title + "\">" + mce.selection.getContent() + "</a>";

            mce.execCommand('insertHTML', false, link); // creates new link

        });
    }
    else {
        /// THIS IS THE MISSING BIT!
    };
}

Answer 1

У вас есть два способа достичь этого:

При нажатии кнопки вы проверяете выбор родительского узла. Если узел является ссылкой, вы можете получить информацию о ссылке из HTML-элемента a. Чтобы заполнить свой диалог, вы будете знать, что делать.

Другой вариант - добавить контекстное меню по щелчку правой кнопкой мыши, что обеспечит необходимые функции.

Вот код плагина для этого (имейте в виду, что вам нужно будет добавить "customcontextmenu" к настройке плагина вашего tinymce).

/**
 * editor_plugin_src.js
 *
 * Plugin for contextmenus.
 */

(function() {
    var Event = tinymce.dom.Event, each = tinymce.each, DOM = tinymce.DOM;

    tinymce.PluginManager.requireLangPack('customcontextmenu');

    /**
     * This plugin a context menu to TinyMCE editor instances.
     *
     * @class tinymce.plugins.customcontextmenu
     */
    tinymce.create('tinymce.plugins.customcontextmenu', {
        /**
         * Initializes the plugin, this will be executed after the plugin has been created.
         * This call is done before the editor instance has finished it's initialization so use the onInit event
         * of the editor instance to intercept that event.
         *
         * @method init
         * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
         * @param {string} url Absolute URL to where the plugin is located.
         */
        init : function(ed) {
            var t = this, lastRng;

            t.editor = ed;

            // Registiere commands
            ed.addCommand('edit_inline_element', function() {
                //edit_inline_element(ed, ed.right_clicked_node);  //ed.right_clicked_node is the actually clicked node
                //call or do whatever you need here
            });

            // delete link
            ed.addCommand('delete_inline_element', function() {
                $(ed.right_clicked_node).replaceWith($(ed.right_clicked_node).html());
            });

                    // assign the right clicked node (it is the evt.target)
        ed.onClick.add(function(ed, evt) {
            if (evt.button == 2) ed.right_clicked_node = evt.target;
        });

            /**
             * This event gets fired when the context menu is shown.
             *
             * @event onContextMenu
             * @param {tinymce.plugins.ContextMenu} sender Plugin instance sending the event.
             * @param {tinymce.ui.DropMenu} menu Drop down menu to fill with more items if needed.
             */
            t.onContextMenu = new tinymce.util.Dispatcher(this);

            ed.onContextMenu.add(function(ed, e) {

                if (!e.ctrlKey) {

                    // Restore the last selection since it was removed
                    if (lastRng)
                        ed.selection.setRng(lastRng);

                    var menu = t._getMenu(ed);

                    if ((typeof menu).toLowerCase() == 'object')
                    {
                        menu.showMenu(e.clientX, e.clientY);

                        Event.add(ed.getDoc(), 'click', function(e) {
                            hide(ed, e);
                        });
                        Event.cancel(e);
                    }
                    // sonst Standardmenu anzeigen
                }

            });

            ed.onRemove.add(function() {
                if (t._menu)
                    t._menu.removeAll();
            });

            function hide(ed, e) {
                lastRng = null;

                // Since the contextmenu event moves
                // the selection we need to store it away
                if (e && e.button == 2) {
                    lastRng = ed.selection.getRng();
                    return;
                }

                if (t._menu) {
                    t._menu.removeAll();
                    t._menu.destroy();
                    Event.remove(ed.getDoc(), 'click', hide);
                }
            };

            ed.onMouseDown.add(hide);
            ed.onKeyDown.add(hide);
        },

        _getMenu: function(ed){
            var t = this, m = t._menu, se = ed.selection, col = se.isCollapsed(), el = se.getNode() || ed.getBody(), am, p1, p2;
            if (m) {
                m.removeAll();
                m.destroy();
            }

            p1 = DOM.getPos(ed.getContentAreaContainer());
            p2 = DOM.getPos(ed.getContainer());

            m = ed.controlManager.createDropMenu('contextmenu', {
                offset_x : p1.x + ed.getParam('contextmenu_offset_x', 0),
                offset_y : p1.y + ed.getParam('contextmenu_offset_y', 0),
                constrain : 1
            });

            t._menu = m;

                    if ((typeof ed.right_clicked_node) !== "undefined" && ed.right_clicked_node.nodeName.toLowerCase() == 'a' )
                    {
                        m.add({
                            title: $(ed.right_clicked_node).attr('title'),
                        });

                        m.addSeparator();

                        m.add({
                            title: 'Edit link',
                            icon: 'edit_inline_element',
                            cmd: 'edit_link'
                        });

                        m.add({
                            title: 'Delete link',
                            icon: 'delete_inline_element',
                            cmd: 'delete_link'
                        });

                        t.onContextMenu.dispatch(t, m, el, col);

                        return m;
                    }
                    else {
                        // kein Menu anzeigen
                        return 0;
                    }
        }
    });

    // Register plugin
    tinymce.PluginManager.add('customcontextmenu', tinymce.plugins.customcontextmenu);
})();