TinyMCE 富文本编辑器 ━━ 内联编辑模式
内联编辑模式
TinyMCE 有三种主要的集成模式：“经典”基于表单的模式，内联编辑模式和无干扰模式。在内联编辑模式下，编辑器不会使用自己的 iframe 替换所选元素，而是替代编辑元素的内容。
基于表单的编辑与内联编辑
最常见的 TinyMCE 集成在其经典的基于表单的模式中使用编辑器。在此集成模式下，编辑器用法作为填写的表单字段以提供内容。编辑器始终可见，作为要编辑的表单的一部分。
内联编辑模式将可编辑视图与页面的可读视图混合在一起。单击后，元素将与编辑器一起替换，而不是编辑器始终可见。
最重要的是，当使用内联编辑时，TinyMCE 不会通过封装在 iframe 中而与页面隔离。这样做的好处是可以确保编辑器中的内容在呈现内容时继承周围页面的样式。
由于编辑器不是在内联编辑模式下的 iframe 中沙箱化，因此编辑器内容的CSS样式将继承自编辑器所在的页面
内联编辑和复杂样式表
在内联模式下使用 TinyMCE 时，它会从页面继承 CSS 样式表。
虽然这有利于提供内容的真实视图，但在处理复杂的 CSS 时可能会导致用户混淆。这是因为你的页面的 CSS 现在直接应用于编辑器，并可能导致用户不期望的行为。
如果要在内联模式下使用编辑器，则在使用取决于编辑器中结构的样式时应小心。例如，如果您有这样的类：
h1 strong {
color: orange;
}
这将使内容中的短语“粗体文本”变为粗体和橙色
如果用户将标题更改为段落或不同的标题级别，则粗体文本的文本颜色也会橙色。虽然根据样式表这是完全正确的行为，但从用户的角度来看，这完全出乎意料。
启用内联编辑模式
启用内联编辑模式很简单，只需要将配置中的 inline 设置为 true 即可，例：
tinymce.init({
selector: '#myeditablediv',
inline: true
});
结合常规selector。重要的是要记住，与传统的基于表单的模式不同，内联仅适用于块元素内的内容（例如div，h1）。使用 div 的内联编辑模式的示例如下：
<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#myeditablediv',
inline: true
});
</script>
</head>
<body>
<h1>TinyMCE Inline Editing Mode Guide</h1>
<form method="post">
<div id="myeditablediv">Click here to edit!</div>
</form>
</body>
</html>
以上部分内容来自 TinyMCE 官方文档：https://www.tiny.cloud/docs
