我的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完成初始化，我不想再次设置焦点，因为此时页面已经滚动到错误的位置。
我知道我说过我不想设置焦点"再次"；一旦TinyMCE完成初始化，但我最终做了类似的事情。我没有将焦点设置在页面底部，而是将代码移动到tinymce.init(也称为$(document(.sollTop(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中有一个错误，我希望它能在未来的某个版本中得到修复。我也希望这种变通方法能帮助到未来的某个人。
当您发出更改字体大小的命令时，实际上并没有在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应用于加载的内容。