tinyMCE 第三章 （基本工具栏选项）

有关所有可用工具栏项目的列表，请参阅：TinyMCE 可用的工具栏按钮。

在前端开发中，富文本编辑器是许多应用中不可或缺的功能之一。TinyMCE作为一个强大的富文本编辑器，为用户提供了广泛的工具和选项，以适应各种编辑需求。本篇文章将深入探讨如何使用和自定义TinyMCE的工具栏，帮助你提升编辑器的可用性及用户体验。

TinyMCE 工具栏的基础

TinyMCE的工具栏是用户与编辑器交互的主要界面。通过toolbar设置选项，开发者可以轻松地自定义这个工具栏，这样的做法提供了无与伦比的灵活性。默认情况下，工具栏会出现在TinyMCE的顶部，并且允许你添加、移除和重新排列按钮。

工具栏按钮编排

要管理和构建工具栏按钮，你需要使用toolbar选项，并提供空格分隔按钮列表。如果想在不同的按钮之间创建逻辑分组，可以使用|管道字符。这种方法不仅帮助你组织工具栏，而且使得编辑器的视觉布局更清晰。

tinymce.init({
  selector: 'textarea',
  toolbar: 'undo redo | styles | bold italic | link image'
});

分组和标签

有时候，简单的按钮列表不足以传达足够的信息，这就需要给工具栏的分组添加标签。这可以通过将toolbar选项设置为对象数组实现，它由对象组成，对象有name和items两个属性。name属性作为标题被用于工具栏分组的容器上，而items数组指定在该组中显示的按钮。

tinymce.init({
  selector: 'textarea',
  toolbar: [
    { name: 'history', items: [ 'undo', 'redo' ] },
    { name: 'styles', items: [ 'styles' ] },
    // 省略其他分组项...
  ]
});

禁用工具栏

对于一些特定场景，你可能需要一个没有工具栏的干净界面。有了TinyMCE，你只需将toolbar设置为false即可。

tinymce.init({
  selector: 'textarea',
  toolbar: false
});

多个工具栏

如果你希望编辑器具有多行工具栏，你可以将toolbar设置为包含多个字符串的数组。每个字符串代表工具栏的一行。也可以使用toolbar(n)从而为每行工具栏指定自己的选项。

tinymce.init({
  selector: 'textarea',
  toolbar1: 'undo redo | styles | bold italic | link image',
  toolbar2: 'alignleft aligncenter alignright'
});

工具栏分组和模式

TinyMCE的toolbar_groups功能允许你创建一个显示其他工具栏按钮集合的工具栏按钮，以弹出工具栏的形式出现。你可以定义各种模式，如浮动或滑动，以优化工具栏在不同尺寸屏幕上的表现。

tinymce.init({
  selector: 'textarea',
  toolbar_mode: 'floating',
  toolbar_groups: {
    formatting: {
      icon: 'bold',
      tooltip: 'Formatting',
      items: 'bold italic underline | superscript subscript'
    }
  }
});