TinyMCE - benutzerdefinierte Schaltfläche link - "link hinzufügen" ist in Ordnung, aber finde keine Dokumentation für "Verknüpfung Bearbeiten" und Zugriff auf die link-Attribute

Haben Sie zwei Möglichkeiten, dies zu erreichen:

Beim drücken der Taste, die Sie überprüfen für die Auswahl des übergeordneten Knotens. Wenn der Knoten ist ein link-dann können Sie die link-Informationen aus dem html-a-element. Füllen Sie Ihre Dialog-Sie wissen, was zu tun ist.

Die andere option ist, um ein Kontextmenu auf der rechten Maustaste, die den erforderlichen Funktionalitäten.

Hier wird der plugin-code für diese (beachten Sie, dass Sie müssen hinzufügen "customcontextmenu" um die plugin-Einstellung Ihrer 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);
})();

InformationsquelleAutor Thariama