TinyMCE工具栏配置详解

TinyMCE工具栏配置详解

写在前面

本文章讲述TinyMCE的工具栏方面的配置方法。

本文的前提为你已经将TinyMCE整合到了你自己的项目中。

---

什么是工具栏

如图一个编辑器的工具部分。
分为两个部分，上面的文件、编辑...为 菜单栏 部分。
下面的红色框起来的为 工具栏 部分。

本文概述工具栏的配置。
关于菜单栏的配置可以开这篇文章：TinyMCE菜单配置详解

---

启用和停用工具栏

通过init配置项toolbar和toolbar(n)来配置工具栏是否启用的项目和显示的顺序。
同时，使用|来分割各个项。

tinymce.init({
  selector: '#textarea1',  // change this value according to your HTML
  //启用工具栏并显示如下项
  toolbar: 'undo redo | styleselect | bold italic | link image',
})

tinymce.init({
  selector: '#textarea2',  // change this value according to your HTML
  //禁用工具栏
  toolbar: false,
})

/* 启用多个工具栏 */

tinymce.init({
  selector: '#textarea3',  // change this value according to your HTML
  // 启用多个工具栏
  toolbar: [
    'undo redo | styleselect | bold italic | link image',
    'alignleft aligncenter alignright',
  ]
})

tinymce.init({
  selector: '#textarea4',  // change this value according to your html
  // 工具栏1
  toolbar1: 'undo redo | styleselect | bold italic | link image',
  // 工具栏2
  toolbar2: 'alignleft aligncenter alignright',
})

---

自定义工具按钮

上面在工具栏中