如何在内容类型的编辑模式下将焦点设置在富文本字段上？

Question

我想在编辑项目时最初将焦点设置在项目的文本字段上，但无法克服 TinymMCE 的 iframe 启动问题。禁用 TinyMCE 时，一切正常，文本字段可聚焦。我尝试在 TinyMCE 的 body-element 中模拟点击，也没有运气。是否有可能通过 JS 聚焦 body-field？

这是我迄今为止尝试过的：

(function($) {

    $(document).ready(function() {

        $('#text').focus()          // Only works, when TinyMCE is disabled.

        $('body#content').click() // Cannot click into TinyMCE's body.

        $('#text_bold').click() // Cannot even click one of the editor's buttons.

        setTimeout(function() {
                            // Tried same as above with time-delay, no luck.
        }, 277);
    });

    $(window).load(function() {
                      // Tried the same as in doc.ready, no luck.
    });

})(jQuery);

Answer 1

我知道这有点老了，但我确实很难在网上找到解决方案，所以我分享一下。在您的 tinymce.init() 代码块中添加此内容。如果需要，更改选择器或事件。

selector: "textarea.tinymce",
setup: function (editor) {
        editor.on('mouseup', function (e) {
        this.focus();
    });
}

Answer 2

TinyMCE 加载在 IFRAME 中，因此它不在主文档的 DOM 中。直接 jQuery 调用将不起作用。

这是我使用的旧代码（Plone 4.3 附带的 TinyMCE 版本）：

(function($) {

    function checkTinyMCELoaded () {

        if (window.tinymce==undefined || !tinymce.editors.length) {
            setTimeout(checkTinyMCELoaded, 100);
            return;
        }

        $('#text_ifr').contents().find(".mceContentBody").get(0).focus();

    }

    $(document).ready(function() {
        setTimeout(checkTinyMCELoaded, 100);
    });

})(jQuery);

它丑陋。最好的方法是摆脱 setTimeout 并在 TinyMCE 加载事件上附加一个处理程序，但是当我研究这个时，我发现这在 Plone 上并不容易，因为您必须更改由 Plone JS 完成的 TinyMCE 的 .init() 调用。