tinyMCE 第三章 (基本工具栏选项)

有关所有可用工具栏项目的列表,请参阅:TinyMCE 可用的工具栏按钮

在前端开发中,富文本编辑器是许多应用中不可或缺的功能之一。TinyMCE作为一个强大的富文本编辑器,为用户提供了广泛的工具和选项,以适应各种编辑需求。本篇文章将深入探讨如何使用和自定义TinyMCE的工具栏,帮助你提升编辑器的可用性及用户体验。

TinyMCE 工具栏的基础

TinyMCE的工具栏是用户与编辑器交互的主要界面。通过toolbar设置选项,开发者可以轻松地自定义这个工具栏,这样的做法提供了无与伦比的灵活性。默认情况下,工具栏会出现在TinyMCE的顶部,并且允许你添加、移除和重新排列按钮。

工具栏按钮编排

要管理和构建工具栏按钮,你需要使用toolbar选项,并提供空格分隔按钮列表。如果想在不同的按钮之间创建逻辑分组,可以使用|管道字符。这种方法不仅帮助你组织工具栏,而且使得编辑器的视觉布局更清晰。

javascript 复制代码
tinymce.init({
  selector: 'textarea',
  toolbar: 'undo redo | styles | bold italic | link image'
});

分组和标签

有时候,简单的按钮列表不足以传达足够的信息,这就需要给工具栏的分组添加标签。这可以通过将toolbar选项设置为对象数组实现,它由对象组成,对象有nameitems两个属性。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'
    }
  }
});
相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端