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

Question

我需要添加 ajquery contextMenu以便jHtmlArea它可以将关键字添加到 中jHtmlArea，但是我很难将iframe标签传递给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
        });
    }
}
]);