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'
});
连接上下文工具栏(link_context_toolbar
)
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: ''
});