如何解决TinyMCE 在调用 execCommand 时窃取焦点
我的 HTML 页面上有一堆输入，还有一个被 TinyMCE 编辑器替换的 textarea。加载此页面的情况有多种，并且每次其中一个输入都必须获得焦点。但是当 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).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 中存在一个错误，我希望它在未来的某个版本中得到修复。我也希望这个变通办法能帮助到后来的人。
,当您发出更改字体大小的命令时，实际上并没有在 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 应用于加载的内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
