简介与入门 \ 沉浸模式

此页更新时间：2019-02-10 16:29

此页英文文档：https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-distraction-free/

在该模式下，编辑器以轻巧的方式呈现。此模式提供了将常用的链接、图像、表格等以快速插入的方式。有关该模式的例子，请参考本文档首页。

此模式最简代码：

tinymce.init({
    selector: 'div.tinymce',
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true
});

译者吐槽：所谓‘沉浸模式’感觉就是TinyMCE强行将inline模式解释成了另一种风格。我们也不要揭穿它，假装不知道就好了。

该模式特定的组件

quicklink

quicklink能实现快速地插入和编辑链接。

例子：

tinymce.init({
    selector: 'div.tinymce',
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'
});

不引入link插件也能使用链接，但要想更好的体验，最好引入link插件，如下方示例。

quickimage与quicktable

quickimage将图片快速插入到编辑器中。

图片文件的上传可以参考这里上传图片和文件进行配置。

quicktable快捷工具将快速插入宽度为100%的2×2表格。

虽然不引入table插件也能使用，但为了更好的体验，最好引入table插件。

注：以上这段是下方代码的例子，可以点鼠标尝试一下。快速表格和快速图片需要在段尾回车才会出现快速工具栏。

例子：

tinymce.init({
    selector: 'div.tinymce2',
    plugins: [ 'table,link,quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_insert_toolbar: 'quickimage quicktable'
});

相关配置选项

我们看到在上面的两个例子中，用到了两个新的配置选项：

  • quickbars_selection_toolbar（执行选择后出现的工具栏）
  • quickbars_insert_toolbar（执行插入操作出现的工具栏）

quickbars_selection_toolbar

建议在此工具栏中仅指定与格式化相关的控件，但TinyMCE并没有做限制，所以你可以使用任何你想使用的控件。

默认值：bold italic | quicklink h2 h3 blockquote

如要禁用也很简单，设为false即可

quickbars_selection_toolbar : false

quickbars_insert_toolbar（执行插入操作出现的工具栏）

建议在此工具栏中仅指定与插入内容相关的控件，但TinyMCE并没有做限制，所以你可以使用任何你想使用的控件。

默认值：quickimage quicktable

如要禁用，设为false即可

quickbars_insert_toolbar : false

下一节是“同时使用多个编辑器”

▲