TinyMCE菜单配置详解

TinyMCE菜单配置详解

写在前面

本文章讲述TinyMCE的菜单方面的配置方法。

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


什么是菜单

TinyMCE菜单配置详解_第1张图片

如图一个编辑器的工具部分。
分为两个部分,上面的文件、编辑...菜单栏 部分。
下面的为 工具栏 部分。

关于工具栏的配置,参看这篇文章:
TinyMCE工具栏配置详解


启用和停用菜单栏

通过init配置项menubar来配置菜单栏是否启用的项目和显示的顺序。

tinymce.init({
  selector: '#textarea1',  // change this value according to your HTML
  //启用菜单栏并显示如下项 [文件 编辑 插入 格式 表格]
  menubar: 'file edit insert view format table',
})

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

配置菜单项

TinyMCE菜单配置详解_第2张图片

每个菜单在经过上面的配置后都会有一个默认的子菜单。
如果想自己定义每个菜单的子菜单项需要通过menu配置。
title对应在menubar中对应的项。
items为在各个菜单总显示的功能的名称
|为分割符号会将菜单分割为几个部分

tinymce.init({
  selector: '#textarea1',  // change this value according to your HTML
  //启用菜单栏并显示如下项 [文件 编辑 插入 格式 表格]
  menubar: 'file edit insert view format table',
  // 配置每个菜单栏的子菜单项(如下是默认配置)
  menu: {
    file: {title: 'File', items: 'newdocument'},
    edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
    insert: {title: 'Insert', items: 'link media | template hr'},
    view: {title: 'View', items: 'visualaid'},
    format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
    table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
  }
})

配置菜单项

菜单配置项指的是各个子菜单的项。
所属插件为核心的项为基本包里自带的功能,直接写在menuitems项里就可以,
属于插件的项需要引入插件(plugins: '插件名')然后在menuitems中配置。

写在后面

会陆续补全关于TinyMCE的其他相关信息。

你可能感兴趣的:(笔记,例子,配置方法,前端,TinyMCE配置详解)