tinyMCE 第七章 (特定内容插件工具栏)

TinyMCE的强大之处在于其不仅提供了一般的文本编辑功能,还通过一系列插件支持了高度专业化的内容编辑。对于那些需要高度专业化编辑操作的用户来说,TinyMCE允许开发者自定义一个上下文工具栏(Contextual Toolbar),以在编辑特定内容时只展示相关工具按钮。以下是几种常用插件的自定义上下文工具栏的使用方式。

编辑图像工具栏(editimage_toolbar

editimage插件使得直接在编辑器内编辑图像成为可能。使用editimage_toolbar项可以自定义一个弹出工具栏,用以在选中图像时显示特定的编辑按钮。

使用editimage_toolbar自定义图像编辑工具栏

假设您希望为用户提供旋转和翻转图像的能力,同时也允许打开详细的图像编辑对话框:

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions'
});

TinyMCE默认情况下并不允许用户直接从编辑器中打开链接。启用link_context_toolbar会在用户光标位于链接上时显示一个上下文工具栏,它包含了修改、删除和打开选定链接的便捷操作。

启用链接上下文工具栏

以下配置将启用该功能,添加一行代码即可轻松实现:

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  plugins: 'link',
  toolbar: 'link',
  link_context_toolbar: true
});

表格上下文工具栏(table_toolbar

编辑表格是很多内容管理系统必备的功能。table插件提供了丰富的表格操作工具,您可以通过table_toolbar来定义当表格被选中时显示的按钮。

默认的表格工具栏配置

下面是一个默认的表格工具栏配置,它为用户提供了行列的插入删除以及表格属性等快捷操作:

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  plugins: 'table',
  toolbar: 'table',
  table_toolbar: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
});

禁用表格工具栏

如果你想要禁用表格的上下文工具栏,可以将table_toolbar设置为空字符串即可:

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  plugins: 'table',
  toolbar: 'table',
  table_toolbar: ''
});
相关推荐
Lee川1 小时前
Milvus 实战:当 RAG 遇上向量数据库,从"玩具 Demo"到"生产可用的"那一步
前端·数据库·人工智能
anOnion2 小时前
构建无障碍组件之Toolbar Pattern
前端·html·交互设计
惊鸿一博2 小时前
图标加载方式_zeroIcon_是否加前缀mdi
开发语言·前端·javascript
2501_940041742 小时前
前端工程化进阶:5个高交互与可视化项目提示词
前端
你很易烊千玺2 小时前
JS 异步 从零讲(大白话 + 真实场景 + 可运行案例)
前端·javascript·vue.js
why技术4 小时前
AI Coding开始进入第四个时代,我还没上车呢!
前端·人工智能·后端
大家的林语冰5 小时前
CSS 已死?DOM 性能黑洞!Pretext 排版革命让你在文本间跳舞,没有 DOM 也能纵享丝滑~
前端·javascript·css
vipbic5 小时前
我也该升级了,陪伴了我7年的博客
前端
Lee川5 小时前
RAG 实战:从一篇掘金文章出发,拆解检索增强生成的全链路
前端·人工智能·后端
Lee川6 小时前
MCP 高德地图实战:当 AI 学会使用工具,一个协议如何重塑大模型的行动边界
前端·人工智能·后端