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'
    }
  }
});
相关推荐
IT_陈寒16 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用19 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥34 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel9 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip9 小时前
JavaScript事件流
前端·javascript