如何在内容类型的 edit-mode 中将焦点设置在 rich-text-field 上？

Question

我想在编辑项目时将焦点最初设置在项目的 text-field 上，但无法克服 TinymMCE 的 iframe 启动。禁用 TinyMCE 时，一切都按预期工作，text-field 是可聚焦的。我尝试在 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 在 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 上并不容易，因为你必须更改 TinyMCE 的 .init() 调用完成通过 Plone JS.

Answer 2

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

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

如何在内容类型的 edit-mode 中将焦点设置在 rich-text-field 上？

How to set focus on rich-text-field, in edit-mode of a contenttype?

javascript

jquery

tinymce

focus

plone