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

问题

I'd like to initially set the focus onto the text-field of an item when editing it, but cannot overcome TinymMCE'S iframe kickin' in. When disableling TinyMCE, everything works as expected, the text-field is focusable. I tried simulating a click in TinyMCE's body-element, no luck either. Is it possible at all, to focus the body-field via JS?

This is what I tried so far:

(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);

回答1:

TinyMCE is loaded inside an IFRAME so it's not in the DOM of the main document. Direct jQuery calls will not work.

This is an old code I used (TinyMCE version shipped with Plone 4.3):

(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);

It's ugly. Best way is to get rid of setTimeout and attach an handler on TinyMCE load event, but when I looked into this I found this is not so easy on Plone as you must change the .init() call of TinyMCE done by Plone JS.

回答2:

I know this is kind of old but I definitely struggled finding a solution for this online, so I'm sharing. Add this, in your tinymce.init() codeblock. Change selector or event if needed.

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

来源：https://stackoverflow.com/questions/32088348/how-to-set-focus-on-rich-text-field-in-edit-mode-of-a-contenttype

标签

javascript

jquery

tinymce

focus

plone