时间戳

首页 > 解决方案 > TinyMCE 在调用 execCommand 时抢了焦点

tinymce - TinyMCE 在调用 execCommand 时抢了焦点

问题描述

我的 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 完成初始化，我不想再次设置焦点，因为此时页面已滚动到错误的位置。

标签： tinymcefocusexeccommand

解决方案

当您发出更改字体大小的命令时，您实际上并没有在 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 应用于加载的内容。

推荐阅读