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'
    }
  }
});
相关推荐
谈不譚网安1 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板7 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩7 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真13 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记
帅云毅2 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss