一个页面同时使用多个TinyMCE编辑器

来源:

http://tinymce.ax-z.cn/general/multiple-editors.php

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

该官方提供的例子，将页面分成两个单独的可编辑区域。每个区域共享一个编辑器。每个区域的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>

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

简单说就是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>

说明:

在做网页开发时,有时会遇到一个表单使用多个编辑器,通常编辑器的配置是一样的,这时我们只需要统一给编辑器一个class即可简单实现一个页面同时使用多个TinyMCE编辑器.