如何将上下文菜单添加到 jHtmlArea

Question

我需要将 jquery contextMenu 添加到 jHtmlArea 以便它可以将关键字添加到 jHtmlArea，但我很难通过 [=15] =] 标记到 contextMenu 触发器。

代码在这里

$(function () {

    $.contextMenu({
        selector: 'iframe body', 
        className: 'data-title',
        callback: function (key, options) {
            //inserts the keyword selected
            insertAtCaret($(this).attr('id'), '{' + key + '}');
        },
        items: {
            "TestPath": { name: "Test path", icon: "" },
           ...
        }
    });

    //adding an extra button to the jHtmlArea
    jHtmlArea.defaultOptions.toolbar.push([
        {
            // This is how to add a completely custom Toolbar Button
            css: "keywords",
            text: "Insert keywords",
            action: function (btn) {
                this.contextMenu(); //Error:this.contextMenu is not a function
            }
        }
    ]);

    //just for context...
    function insertAtCaret(areaId, text) {
       ...
    }

   //setting up `jHtmlArea` for input #editor

   $('#editor').htmlarea();

});

我尝试了很多方法来获取 'iframe body' 元素，但在单击自定义工具栏按钮时都没有成功。我还尝试将 contextMenu 创建移动到 jHtml 加载事件内部，但问题是 iframe 在文档准备好后加载。

其他可行的方法是简单地为上下文菜单指定选择器 'iframe'，然后当用户在框架内右键单击时应该弹出菜单。

我需要一些指南或不同的方法。

Answer 1

我设法从工具栏按钮弹出 contextMenu。我很确定有一种方法可以从 iframe 中弹出，但我找不到它。这是我的解决方案：

jHtmlArea.defaultOptions.toolbar.push([
{
    // This is how to add a completely custom Toolbar Button
    css: "keywords",
    text: "Insert keywords",
    action: function (btn) {

        var jhtml = this;
        $(function () {

            $.contextMenu({
                selector: '.keywords',
                className: 'data-title',
                callback: function (key, options) {
                    jhtml.pasteHTML("{" +key+ "}");
                },
                items: {
                    "WorkerUnit": { name: "Worker Unit", icon: "" },
                    ...
                }
            });

            $('.keywords').contextMenu(); //call it
        });
    }
}
]);

如何将上下文菜单添加到 jHtmlArea

How to add context menu to jHtmlArea

jquery

contextmenu

jhtmlarea