对于大多数开发者而言，TinyMCE 功能的核心力量在于其插件。插件要么扩展默认编辑器功能，要么添加新功能。例如，List Styles插件为工具栏现有的列表控件添加了额外选项，而Code插件则添加了全新的功能。

由于大多数人通过 Tiny Cloud 安装 TinyMCE 或下载软件包，他们错误地认为插件是 TinyMCE“核心”的一部分。虽然所有插件（专业功能除外）都包含在这些软件包中，但每个插件都在单独的.js 文件中。事实上，如果您使用自定义软件包下载选项（仅限 TinyMCE 4），您可以选择仅包含您想要的插件，或者排除 TinyMCE 团队构建的所有插件。

在本节中，我们将向您展示如何通过突出显示两个更受欢迎的插件来轻松激活插件。

您必须在下载选项中包含该插件才能激活它。

让我们从一个简单的代码片段开始，您可以将其粘贴到空的html文件中（名称随意，tinymce.html即可）。将文件保存在本地，用网络浏览器打开它，您将拥有一个基本且本地运行的 TinyMCE 实例。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: 'textarea'
  });
  </script>
</head>

<body>
  <form method="post">
    <textarea>Hello, World!</textarea>
  </form>
</body>
</html>

让我们玩弄插件

我们要处理的代码位于第二个<script>元素中。具体来说是key及其value，我们将其作为JSON传递给tinymce对象的.init方法。在上面的示例中，selector是键，'textarea'是其值。

Code 插件

Code插件是更受欢迎的插件之一，因为它可以向用户暴露可编辑区域的原始html。它也提供了一个极好的示例，因为它添加了菜单项和工具栏按钮，并且具有高级自定义选项。

我们需要做的第一件事是包含实际的plugins键并为其分配一个值。由于我们从code插件开始，因此此示例的值将是'code'。

tinymce.init({
  selector: 'textarea',  // note the comma at the end of the line!
  plugins: 'code'
});

将plugins: 'code'添加到您的tinymce.html文件中，保存文件，刷新浏览器，您将看到一些神奇的效果。“Tools"菜单会自动出现在菜单栏中，下拉菜单中包含一个"Source code"项。点击它，voila，现在您可以编辑被 WYSIWYG 界面隐藏的 HTML 了。

让我们还添加一个工具栏控件，以便我们的用户可以更轻松地激活此功能。

tinymce.init({
  selector: 'textarea',  // note the comma at the end of the line!
  plugins: 'code',  // note the comma at the end of the line!
  toolbar: 'code'
});

令人印象深刻！我们现在有了一个工具栏按钮，用户可以点击它以进入源代码模式，但我们失去了默认的工具栏控件。我们在Basic setup中解释了为什么会发生这种情况，如果这种行为让您感到惊讶，请重新阅读该部分。

让我们通过将菜单栏完全删除，将极简设计再推进一步。

tinymce.init({
  selector: 'textarea',  // note the comma at the end of the line!
  plugins: 'code',  // note the comma at the end of the line!
  toolbar: 'code',  // last reminder, note the comma!
  menubar: false
});

再来一个示例的时间

即使您发现上面的示例非常简单，也请继续跟随我们，我们将向您展示如何扩展 TinyMCE 默认的有序和无序列表。另一方面，如果这一切对您来说都很新，请阅读此示例以帮助您理解。

List Styles

List Styles插件通过向控件添加 CSS list-style-type样式的数字格式和项目符号类型，扩展了 Lists 插件中提供的默认无序和有序列表工具栏控件。

与之前一样，让我们先添加plugins键并将值设置为'advlist lists'。这将启用 List Styles 和 Lists 插件。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'advlist lists'
});

查看您的 TinyMCE 工具栏，您将看到列表控件现在附有向下箭头（位于图标右侧）。点击它们，您现在拥有了额外的列表选项。

如果我们不想让用户拥有所有这些列表选项，还有更多的自定义选项。

更多自定义选项

advlist插件有两个选项，可提供对列表样式更细粒度的控制。它们是advlist_bullet_styles和advlist_number_styles。

许多插件选项有多个可能的值。advlist_bullet_styles选项的可能值为circle、disc和square。而advlist_number_styles的可能值为lower-alpha、lower-greek、lower-roman、upper-alpha和upper-roman。

如果您记不住所有这些值，请不要担心。插件部分详细解释了所有插件选项、工具栏和菜单控件。

让我们添加 List Styles 选项并赋予它们一些可用选项。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'advlist lists',
  menubar: false,
  toolbar: 'bullist numlist',
  advlist_bullet_styles: 'square',
  advlist_number_styles: 'lower-alpha,lower-roman,upper-alpha,upper-roman'
});

在上面的示例中，我们学习了如何移除菜单栏，向工具栏添加特定的列表控件同时移除其他控件，激活插件，并通过控制我们希望激活的选项来自定义插件的行为。仅用了 5 行代码（不包括必须包含的selector键，因为 TinyMCE 需要它才能工作）。