有关所有可用工具栏项目的列表,请参阅:TinyMCE 可用的工具栏按钮。
在前端开发中,富文本编辑器是许多应用中不可或缺的功能之一。TinyMCE作为一个强大的富文本编辑器,为用户提供了广泛的工具和选项,以适应各种编辑需求。本篇文章将深入探讨如何使用和自定义TinyMCE的工具栏,帮助你提升编辑器的可用性及用户体验。
TinyMCE 工具栏的基础
TinyMCE的工具栏是用户与编辑器交互的主要界面。通过toolbar
设置选项,开发者可以轻松地自定义这个工具栏,这样的做法提供了无与伦比的灵活性。默认情况下,工具栏会出现在TinyMCE的顶部,并且允许你添加、移除和重新排列按钮。
工具栏按钮编排
要管理和构建工具栏按钮,你需要使用toolbar
选项,并提供空格分隔按钮列表。如果想在不同的按钮之间创建逻辑分组,可以使用|
管道字符。这种方法不仅帮助你组织工具栏,而且使得编辑器的视觉布局更清晰。
javascript
tinymce.init({
selector: 'textarea',
toolbar: 'undo redo | styles | bold italic | link image'
});
分组和标签
有时候,简单的按钮列表不足以传达足够的信息,这就需要给工具栏的分组添加标签。这可以通过将toolbar
选项设置为对象数组实现,它由对象组成,对象有name
和items
两个属性。name
属性作为标题被用于工具栏分组的容器上,而items
数组指定在该组中显示的按钮。
javascript
tinymce.init({
selector: 'textarea',
toolbar: [
{ name: 'history', items: [ 'undo', 'redo' ] },
{ name: 'styles', items: [ 'styles' ] },
// 省略其他分组项...
]
});
禁用工具栏
对于一些特定场景,你可能需要一个没有工具栏的干净界面。有了TinyMCE,你只需将toolbar
设置为false
即可。
javascript
tinymce.init({
selector: 'textarea',
toolbar: false
});
多个工具栏
如果你希望编辑器具有多行工具栏,你可以将toolbar
设置为包含多个字符串的数组。每个字符串代表工具栏的一行。也可以使用toolbar(n)
从而为每行工具栏指定自己的选项。
javascript
tinymce.init({
selector: 'textarea',
toolbar1: 'undo redo | styles | bold italic | link image',
toolbar2: 'alignleft aligncenter alignright'
});
工具栏分组和模式
TinyMCE的toolbar_groups
功能允许你创建一个显示其他工具栏按钮集合的工具栏按钮,以弹出工具栏的形式出现。你可以定义各种模式,如浮动或滑动,以优化工具栏在不同尺寸屏幕上的表现。
javascript
tinymce.init({
selector: 'textarea',
toolbar_mode: 'floating',
toolbar_groups: {
formatting: {
icon: 'bold',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript'
}
}
});