Как добавить контекстное меню в jHtmlArea

Question

Мне нужно добавить jquerycontextMenu к 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
        });
    }
}
]);