tinyMCE 第六章 (特定内容工具栏)

在编辑富文本内容时,格式化工具的便捷访问是至关重要的。TinyMCE强大的快速工具栏(Quickbars)插件提供了灵活的配置,允许用户基于内容上下文快速访问特定的工具按钮。本文将介绍TinyMCE中的快速工具栏如何配置,以及如何根据特定的编辑需求定制它们。

快速选择工具栏(quickbars_selection_toolbar

快速选择工具栏是Quickbars插件提供的功能,主要用于快速访问格式化选项。它被设计用来在用户选取文本时出现。修改快速选择工具栏的按钮只需要提供一串用空格分隔的工具按钮名字即可。

定制化快速选择工具栏

要创建符合你实际需要的快速选择工具栏,可以按如下配置:

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  plugins: 'quickbars',
  quickbars_selection_toolbar: 'bold italic | blocks | quicklink blockquote'
});

在上述代码中,快速选择工具栏有加粗、斜体、块级格式化、快速链接和引用块等选项。通过这种方式,你可以根据编辑需求添加或删除按钮。

禁用快速选择工具栏

如果不需要快速选择工具栏,可以将quickbars_selection_toolbar设置为false

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  plugins: 'quickbars',
  quickbars_selection_toolbar: false
});

快速插入工具栏(quickbars_insert_toolbar

这个工具栏用于插入内容相关的按钮,例如快速图片插入、表格创建等。和选择工具栏一样,修改按钮也是通过提供一个工具按钮名的字符串配置。

定制化快速插入工具栏

下面的配置示例展示了如何定制快速插入工具栏,并加入了水平线和分页符:

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  plugins: 'quickbars pagebreak',
  quickbars_insert_toolbar: 'quickimage quicktable | hr pagebreak'
});

禁用快速插入工具栏

如果不想使用快速插入工具栏,将quickbars_insert_toolbar设置为false即可关闭此功能:

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  plugins: 'quickbars',
  quickbars_insert_toolbar: false
});

快速图像工具栏(quickbars_image_toolbar

专为图像操作设计,快速图像工具栏允许用户一旦选中图像,便能立即访问与图像相关的工具栏选项。

定制化快速图像工具栏

看看如何添加图像编辑工具到快速图像工具栏:

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  plugins: 'quickbars image editimage',
  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions'
});

禁用快速图像工具栏

同样,若无需快速图像工具栏,设置quickbars_image_toolbarfalse即可:

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  plugins: 'quickbars',
  quickbars_image_toolbar: false
});
相关推荐
Jolyne_5 分钟前
Taro小程序接入微信客服过程记录
前端
勇往直前plus6 分钟前
前端三基石:从后端视角理解 HTML、CSS 与 JavaScript
前端·css·html
用户693717500138418 分钟前
Google 推 AppFunctions:手机上的 AI 终于能自己干活了
android·前端·人工智能
用户693717500138435 分钟前
AI让编码变简单,真正拉开差距的是UI设计和产品思考
android·前端·人工智能
孟祥_成都39 分钟前
别再吹牛了,100% Vibe Coding 存在无法自洽的逻辑漏洞!
前端·ai编程·vibecoding
ai超级个体1 小时前
别再吹牛了,100% Vibe Coding 存在无法自洽的逻辑漏洞!
前端·ai·ai编程·vibe coding
Mike_jia2 小时前
🎓 OpenMAIC 终极指南:清华开源的多智能体 AI 互动课堂平台
前端
踩着两条虫2 小时前
告别低代码“黑盒”!VTJ.PRO 2.0:用AI与自由重塑Vue3开发
前端·低代码·ai编程
OpenTiny社区2 小时前
WebAgent :基于 MCP 协议打造的智能应用“超级路由器”
前端·agent·mcp
dweizhao2 小时前
别再用 Figma 画线框图了,Google 这款免费工具直接出 UI 稿
前端