本节介绍如何在单个页面中添加多个编辑器实例。在使用TinyMCE的inline模式时，这是一种常见的使用场景。将内容拆分为多个区块（例如标题、段落）后，用户便可对各个区块进行独立编辑。

共享相同配置的多个编辑器实例

下面的示例将页面拆分为两个独立的可编辑区域。每个区域都共享同一个编辑器配置。每个可编辑的div元素都被赋予了相同的class类名myeditablediv。TinyMCE仅在用户点击的内容区域加载。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '.myeditablediv',
    inline: true,
    menubar: false
  });
  </script>
</head>

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

    <h1>Multiple editors on a page: Section 2</h1>
    <div class="myeditablediv" id="section002">Click here to edit the second section of content!</div>
  </form>
</body>
</html>
在上面的示例中，CSS选择器使用的是class，因为id必须是唯一标识。

具有唯一配置的多个编辑器实例

下面的示例为每个可编辑区域都加载了TinyMCE的唯一配置。当不同的内容区域有不同的需求时，这种方法非常有用。例如，为编辑标题提供简单配置，而为编辑正文内容提供完整的配置。为每个配置定义一个tinymce.init对象/方法。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myeditable-h1',
    inline: true,
    menubar: false,
    toolbar: 'undo redo'
  });

  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>

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