CSS 如何在tinyMCE中添加字体大小工具栏

在本文中，我们将介绍如何使用CSS在tinyMCE中添加字体大小工具栏。

阅读更多：CSS 教程

什么是tinyMCE

tinyMCE是一个用于在网页中创建富文本编辑器的JavaScript库。它是一种非常常用的编辑器，被许多网站和应用程序使用。

添加字体大小工具栏的步骤

要在tinyMCE中添加字体大小工具栏，可以按照以下步骤进行操作：

在页面上引入tinyMCE的JavaScript文件。可以通过从tinyMCE官方网站下载最新版本的JavaScript文件，并将其包含在HTML文件中。

<script src="path/to/tinymce.js"></script>

创建一个textarea元素，并给它一个唯一的ID。这个textarea将作为tinyMCE编辑器的容器。

<textarea id="myTextarea"></textarea>

在JavaScript代码中初始化tinyMCE编辑器。通过调用tinymce.init函数，并传递一些配置选项来实现。

tinymce.init({
  selector: '#myTextarea',
  plugins: 'fontsize',
  toolbar: 'fontsize',
  fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
});

在上述代码中，我们指定了selector选项，告诉tinyMCE要使用哪个textarea作为编辑器的容器。然后，我们启用了fontsize插件并将其添加到工具栏中。最后，我们定义了字体大小的格式。

现在，你可以在页面上看到一个带有字体大小工具栏的tinyMCE编辑器了。

示例

以下是一个完整的示例，演示如何在tinyMCE中添加字体大小工具栏。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="path/to/tinymce.js"></script>
  <script>
    tinymce.init({
      selector: '#myTextarea',
      plugins: 'fontsize',
      toolbar: 'fontsize',
      fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
    });
  </script>
</head>
<body>
  <textarea id="myTextarea"></textarea>
</body>
</html>

将上述代码保存为一个HTML文件，并在浏览器中打开。你将看到一个带有字体大小工具栏的tinyMCE编辑器。