HTML 多个tinymce文本区域

在本文中，我们将介绍如何在HTML页面中使用多个tinymce文本区域。tinymce是一款功能强大的富文本编辑器，可以轻松地将文本区域转换为富文本编辑器，提供许多格式化和样式选项。

阅读更多：HTML 教程

什么是tinymce？

tinymce是一个开源的富文本编辑器，它将普通的文本区域转换为具有格式化选项和样式功能的富文本编辑器。它使用JavaScript编写，可以轻松地嵌入到HTML页面中。

如何使用tinymce？

要在HTML页面中使用tinymce，首先需要在页面中引入tinymce的JavaScript文件。你可以从官方网站上下载最新版本的tinymce并将其引入页面中，也可以使用CDN链接来引入。

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>

一旦引入了tinymce的JavaScript文件，你可以将一个普通的文本区域转换为tinymce编辑器。只需为该文本区域添加一个id，并使用JavaScript代码初始化tinymce编辑器。

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

tinymce.init({
  selector: '#myTextarea'
});

现在，文本区域”myTextarea”将被替换为一个具有格式化选项和样式功能的富文本编辑器。

多个tinymce文本区域

要在页面上使用多个tinymce文本区域，只需重复上述步骤即可。给每个文本区域添加一个唯一的id，并使用相应的id来初始化每个tinymce编辑器。

<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>

tinymce.init({
  selector: '#textarea1'
});

tinymce.init({
  selector: '#textarea2'
});

现在，页面上将有两个tinymce编辑器，你可以在它们之间切换和编辑内容。

自定义tinymce编辑器

tinymce还提供了许多自定义和配置选项，以满足不同的需求和风格。你可以通过在初始化过程中传递不同的配置选项来自定义编辑器。

tinymce.init({
  selector: '#myTextarea',
  plugins: 'advlist autolink lists link image charmap print preview',
  toolbar: 'undo redo | bold italic underline | bullist numlist | link image',
  menubar: 'file edit view insert format tools',
  height: 400
});

在上面的示例中，我们添加了更多的插件和工具条选项，并设置了编辑器的高度为400像素。你可以根据需要自由地定制编辑器的功能和外观。

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

tinymce.init({
  selector: '#myTextarea',
  plugins: 'advlist autolink lists link image charmap print preview',
  toolbar: 'undo redo | bold italic underline | bullist numlist | link image',
  menubar: 'file edit view insert format tools',
  height: 400
});