中文文档

此页更新时间：2019-11-06 09:34

此页英文文档：https://www.tiny.cloud/docs/general-configuration-guide/work-with-plugins/

TinyMCE真正强大之处在于它对插件完善的支持。它本身自带了许多实用的插件，而社区则提供了更多优秀的插件。而插件的开发，正是得益于TinyMCE预留接口的友好。

由于大多数人通过TinyMCE Cloud安装TinyMCE或下载软件包，他们错误地认为所有插件都是TinyMCE“核心”的一部分。虽然所有插件（不包括专业功能）都包含在这些包中，但每个插件都需要在配置中加载才能使用。实际上，如果您使用自定义程序包下载选项，则只能使用列表中选择包含的插件。

在本节中，将通过代码插件（code）和高级列表插件（advlist）来展示如何激活更多插件。

注：下载的安装包中需含有该插件才能使用。

Let's go让我们开始吧

代码插件（code）

code插件是目前比较流行的插件之一，因为它可以显示TinyMCE编辑区的原始html，用户可以更加灵活的编辑html代码。

要使用此插件，我们需要做的第一件事是：在初始化参数中使用plugins选项并为其赋值。

tinymce.init({
    selector: '#tinydemo',
    plugins: 'code',
});
            

code插件示例1

▲以上TinyMCE自动在菜单栏的“工具”下面添加了一个“源代码”按钮，点击它，我们就可以查看到TinyMCE生成的原始html了，当然，你还能编辑它！

不过放在里面有点难找，下面我们把它从菜单栏拿出来，单独放在工具栏。

tinymce.init({
    selector: '#tinydemo2',
    plugins: 'code',
    toolbar:'code',
});
            

code插件示例2

▲现在工具栏上有一个按钮了，我们可以方便的对源码进行查看修改了。

你会发现工具栏上只有一个查看源码的按钮，其它按钮都消失了。为什么会这样呢，因为我们对toolbar赋的值只有code一个，我们前面在“基本设置中”讲过怎么在工具栏中显示多个插件，如果忘了，就重新查看这部分吧。

高级列表插件（advlist）

该插件通过css扩展了默认的UL和OL列表样式，和刚才一样，我们要想使用该插件，需要先在初始化中添加该插件。

tinymce.init({
    selector: '#tinydemo3',
    plugins: 'lists,advlist',
    toolbar: 'bullist numlist',
});
            

▲你会发现，这里并不是plugins: 'advlist'，在之前还多了一个“lists”，这是因为插件之间有可能存在依赖关系，advlist必须在lists插件启用的情况下才能使用（此处英文文档没提）。

因为该插件默认是没有出现在菜单栏的，所以我们在工具栏设置一下，让其显示。注意：该插件在工具栏的值并不是“advlist”，而是分成两个“bullist”和“numlist”，分别是无序列表UL，和有序列表OL。

<ol><li>advlist插件示例</li><li>advlist插件示例</li></ol>

更多自定义选项

TinyMCE的很多插件都提供了更详细的配置选项，使得程序员能更灵活的配置插件。

本例的advlist插件就提供了两个选项：advlist_bullet_styles和advlist_number_styles。

advlist_bullet_styles所能取的值包括：circle、disc和square。

advlist_number_styles所能取的值包括：ower-alpha、lower-greek、lower-roman、upper-alpha和upper-roman。

如果记不清这些值也没有关系，在文档的高级列表插件部分中提供了详细用法及配置说明。

下面让我们使用这些配置选项，来更改advlist插件的行为。

tinymce.init({
    selector: '#tinydemo4',
    plugins: 'lists,advlist',
    toolbar: 'bullist numlist',
    advlist_bullet_styles: 'square',
    advlist_number_styles: 'lower-alpha,lower-roman,upper-alpha,upper-roman'
});
            

<ol><li>advlist插件示例</li><li>advlist插件示例</li></ol>

正如我们在开始时提到的，TinyMCE功能强大、灵活、且自由度极高。如果您对插件部分感兴趣，可以深入了解“插件使用”以及“配置选项”这两部分。

更多功能的经典模式示例，请参见首页的DEMO-2。

下一节是“自定义界面（UI）”