TinyMCE菜单配置详解

15 篇文章 0 订阅
11 篇文章 0 订阅

TinyMCE菜单配置详解

写在前面

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

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


什么是菜单

这里写图片描述

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

关于工具栏的配置,参看这篇文章:
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,
})

配置菜单项

这里写图片描述

每个菜单在经过上面的配置后都会有一个默认的子菜单。
如果想自己定义每个菜单的子菜单项需要通过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的其他相关信息。

  • 29
    点赞
  • 77
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值