内联模式 | TinyMCE中文文档中文手册

简介与入门 \ 内联模式

此页更新时间：2019-10-12 14:31

TinyMCE有三种模式：

译者注：翻译成沉浸模式比较文艺，无干扰模式更直译，索性就叫沉浸无干扰模式。

注意：selector的目标设为textarea是无法启用内联模式的，必须是普通的块元素，div最佳。

内联模式对提升用户体验相当有用。因页面的编辑视图与阅读视图合二为一，提供了无缝的体验，实现真正的所见即所得！

在内联编辑模式下，编辑器不会将selector指定的元素替换为iframe，而是直接将编辑器组件融入其中。

经典模式：基于表单，使用表单某字段填充内容，编辑器始终作为表单的一部分。

内联模式：将编辑视图与阅读视图合二为一，当其被点击后，元素才会被编辑器替换，而不是编辑器始终可见。

重要的是，当使用内联模式时，TinyMCE没有使用iframe将编辑的内容与页面隔离，这样做的好处是内容可继承页面的CSS样式。编辑的内容将完全按照页面规定好的样式显示，从而提供真正的“所见即所得”的编辑体验。

使用TinyMCE的内联模式，内容会从它嵌入的页面继承CSS样式表。

虽然这有利于提供所见即所得的编辑体验，但当前页面有可能引入过于复杂的CSS，其提供的定义有可能导致编辑器出现未知的问题，或非期望的结果。

例如，在页面CSS中有可能存在如下这样的定义：

h1 strong { color : red; }

这将使如下内容中的短语“粗体文本”变为粗体和红色

<h1>This text is <strong>bold text</strong> in a heading</h1>

如果用户将标题更改为段落或不同级别的标题，则文本颜色会意外的发生变化。虽然从CSS定义中这是完全正确的行为，但从用户角度来看，这完全是出乎意料的。

开启内联模式非常简单。使用配置参数 inline:true 即可。

tinymce.init({
    selector: '#tinydemo',
    inline: true,
});

注意：selector的目标设为textarea是无法启用内联模式的，必须是普通的块元素，div最佳。