简介与入门 \ 同时使用多个编辑器

此页更新时间：2019-02-10 16:25

此页英文文档：https://www.tiny.cloud/docs/general-configuration-guide/multiple-editors/

本节将介绍如何在同一页面添加多个编辑器同时工作。例如我们将文章编辑拆分成多个部分（标题、正文、摘要），每个部分使用独立的编辑器。在这种使用场景下，内联模式表现出的所见即所得，被真正的发挥了出来。

译者吐槽：虽然官方下面这俩例子极其简陋，但我很懒……先这么放着吧

一个配置共享多个编辑器实例

该官方提供的例子，将页面分成两个单独的可编辑区域。每个区域共享一个编辑器。每个区域的div使用了相同的class（.myeditablediv）。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script>
  tinymce.init({
    selector: '.myeditablediv',
    inline: true
  });
  </script>
</head>

<body>
  <h1>Multple editors on a page: Section 1</h1>
  <form method="post">
    <div class="myeditablediv">Click here to edit the first section of content!</div>
  </form>

  <h1>Multple editors on a page: Section 2</h1>
  <form method="post">
      <div class="myeditablediv">Click here to edit the second section of content!</div>
  </form>
</body>
</html>
注：在上述例子中，容器css选择器使用的是class而非id，因为id在同一页面中必须是唯一的，而class则允许多个。

多个实例，每个具有唯一配置

简单说就是init两次，每次selector不一样就是了，不废话直接上官方示例代码。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script">
  tinymce.init({
    selector: '#myeditable-h1',
    inline: true,
    menubar: false,
    toolbar: 'undo redo'
  });
  </script>
  <script>
  tinymce.init({
    selector: '#myeditable-div',
    inline: true
  });
  </script>
</head>

<body>
  <form method="post">
    <h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
  </form>

  <form method="post">
    <div id="myeditable-div">
      <p>This section of content can be edited. Click here to see how.</p>
    </div>
  </form>
</body>
</html>

下一节是“使用插件扩展TinyMCE”

▲