如何在内容类型的编辑模式下将焦点设置为富文本字段？ [英] How to set focus on rich-text-field, in edit-mode of a contenttype?

问题描述

我想在编辑时将焦点初始设置到项目的文本字段上，但是无法克服TinymMCE的iframe正在启动。当禁用TinyMCE时，一切按预期工作，文本字段是可调焦的。我试着在TinyMCE的body-element中模拟点击，也没有运气。是否有可能通过JS来关注body-field？

这是我到目前为止的尝试：

 （function（$）{
 
 $（document）.ready（function（）{
 
 $（'＃text '）.focus（）//只有当TinyMCE被禁用时才有效
 $ b $（'body＃content'）。click（）//不能点击进入TinyMCE的主体
 
 $（'＃text_bold'）。click（）//甚至不能点击其中一个编辑器的按钮
 $ b $ setTimeout（function（）{
 //同上
}，277）; 
}）; 
 
 $（window）.load（function（）{
 //试过了如在doc.ready，没有运气。
}）; 
 
））（jQuery）; 
  

解决方案

TinyMCE在IFRAME中加载，所以它不在主文档的DOM。直接的jQuery调用是行不通的。

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

（）函数checkTinyMCELoaded（）{

if（window。
函数checkTinyMCELoaded（） tinymce == undefined ||！tinymce.editors.length）{
setTimeout（checkTinyMCELoaded，100）;
return;
}

$（'＃text_ifr' ）.contents（）。find（。mceContentBody）。get（0）.focus（）;


$ b $（document）.ready（function（） {
setTimeout（checkTinyMCELoaded，100）;
}）;
$ b $}}（jQuery）;

。最好的办法是摆脱 setTimeout 并在TinyMCE加载事件上附加一个处理程序，但是当我看到这个时，我发现这对Plone来说不是那么容易，因为你必须改变 .init（）由Plone JS完成的TinyMCE调用。

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

解决方案

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.

这篇关于如何在内容类型的编辑模式下将焦点设置为富文本字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！