4

我在 TinyMCE 中添加了一个自定义按钮，它会显示一个定制的链接选择器。当用户选择一些文本并单击按钮时，会出现对话框，并且当他们选择了我execCommand('insertHTML', false, "<a href... etc">)在选择中使用的 url 时。

这工作正常 - 现在，当链接已经创建并且用户想要编辑它时，他们再次单击链接按钮（当光标正常位于链接文本内时），但情况是这样 - 我不'不知道如何访问已经创建的链接及其属性，然后再次加载并填充对话！

一般有搜索 TinyMCE 站点、Stack、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!
    };
}
4

1 回答 1

5

您有两种方法可以实现这一目标：

按下按钮时，您检查选择父节点。如果节点是链接，那么您可以从 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);
})();
于 2011-02-21T15:00:44.760 回答