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'
    }
  }
});
相关推荐
哎呦你好6 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放15 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao32 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo32 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er38 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年41 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er1 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing1 小时前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客1 小时前
gin如何返回html
前端·html·gin
islandzzzz1 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html