tinyMCE 是一个流行的富文本编辑器，它提供了很多功能和插件。但是，默认情况下它没有字号工具栏（font size toolbar），这对于一些需要频繁调整字体大小的用户来说可能不太友好。在本文中，我们将介绍如何为 tinyMCE 添加字号工具栏，并提供相应的示例代码。
步骤一：引入插件
要添加字号工具栏，我们需要使用 TinyMCE 的 fontselect 插件。首先，在头部引入以下 CDN：
------- --------------------------------------------------------------------
步骤二：配置字号工具栏
接下来，我们需要在 tinyMCE 的初始化选项中添加 fontselect 插件，并配置字号工具栏。以下是一个完整的配置示例：
--------------
--------- -----------
-------- -
------------
--
-------- --------------- ------------
----------------- ---- ---- ---- ---- ---- ---- ------
------------- -----------------------------------
---在上面的配置中，我们指定了两个工具栏按钮：fontsizeselect 和 fontselect，其中，fontsizeselect 实现了下拉列表用于选择字体大小，而 fontselect 实现了下拉列表用于选择字体。
提供的字号格式通过 fontsize_formats 属性指定，格式为“大小+单位”，多个格式间使用空格分隔。上面的示例定义了七种不同的字号格式。
另外，我们还可以通过 font_formats 属性指定字体格式，格式为“标签=CSS 样式”，多个格式间也使用逗号分隔。
步骤三：测试
完成配置后，我们就可以在页面中看到一个带有字号和字体选择的工具栏。点击字号下拉列表，可以看到我们刚刚添加的字号选项。
--------- -----
------
------
----- ----------------
-------------- ---------------
------- --------------------------------------------------
------- --------------------------------------------------------------------
--------
--------------
--------- -----------
-------- -
------------
--
-------- --------------- ------------
----------------- ---- ---- ---- ---- ---- ---- ------
------------- -----------------------------------
---
---------
-------
------
---------------------
-------
-------总结
在本文中，我们介绍了如何为 tinyMCE 添加字号工具栏，并提供了相应的实现代码。通过这个工具栏，用户可以更方便地选择字号和字体，提高编辑体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27227