TinyMCE 在调用 execCommand 时窃取焦点

Question

我的 HTML 页面上有一堆输入，还有一个由 TinyMCE 编辑器替换的文本区域。加载此页面的情况多种多样，每次其中一个输入必须获得焦点。但是当 TinyMCE 被初始化时，它只是窃取了焦点。我将问题缩小到 execCommand 调用，该调用在 TinyMCE 中设置默认字体大小。

问题可以在这个简化的代码中重现：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
        <script>
            tinymce.init({
                selector: 'textarea',
                setup: function(editor) {
                    editor.on('init', function() {
                        this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
                    });
                }
            });
        </script>
    </head>

    <body>
        <input id="inp" />
        <textarea>Hello, World!</textarea>
        
        <script>
            document.getElementById("inp").focus();
        </script>
    </body>
</html>

我已经在 Firefox、Chrome 和 Edge 中对此进行了测试，同样的问题在所有这些中都发生了。知道如何防止这种情况吗？我不想在 TinyMCE 完成初始化后再次设置焦点，因为此时页面已滚动到错误的位置。

Answer 1

我知道我说过我不想在 TinyMCE 完成初始化后“再次”设置焦点，但我最终做了类似的事情。我没有将焦点设置在页面底部，而是将代码移到 tinymce.init 内，并调用了 $(document).scrollTop(0);。这是代码：

tinymce.init({
    selector: 'textarea',
    setup: function(editor) {
        editor.on('init', function() {
            this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
                        
            // Scroll to the top of the page.
            $(document).scrollTop(0);
            // Now set the focus.
            document.getElementById("inp").focus();
        });
    }
});

我认为 TinyMCE 中存在一个错误，我希望它在未来的某个版本中得到修复。我也希望这个变通办法能对以后的人有所帮助。

Answer 2

当您发出更改字体大小的命令时，您实际上并没有在 TinyMCE 编辑器中设置默认字体。您正在触发这些命令，但如果有任何内容要加载到编辑器中，则不会应用此字体信息。

要在 TinyMCE 中设置默认字体信息，请使用 CSS，通过 content_css 或 content_style 配置选项：

https://www.tiny.cloud/docs/configure/content-appearance/#content_style

https://www.tiny.cloud/docs/configure/content-appearance/#content_css

以下示例显示了两种方法之间的差异。

在这个例子中：https://fiddle.tiny.cloud/oAhaab

...设置默认字体系列和大小的命令已发出，但它们未应用 到随后加载到编辑器中的内容。它们会被解雇，但不会最终应用于加载到编辑器中的内容。

然而，在这个例子中：https://fiddle.tiny.cloud/nAhaab

...默认字体信息按预期通过 CSS 应用于加载的内容。

TinyMCE 在调用 execCommand 时窃取焦点

TinyMCE steals the focus when calling execCommand

tinymce

focus

execcommand