TinyMCE 富文本编辑器 ━━ 批量实例化

批量实例化

说的通俗一点就是,一个页面上实例化多个编辑器。实际上我们在使用编辑器的时候经常需要在一个页面上实例化多个编辑器,本文将讲述如何在一个页面上实例化多个编辑器

 

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

在以下示例中,页面分为两个单独的可编辑区域,每个区域共享一个编辑器配置。每个可编辑div提供的class相同。当用户在内容区域内单击时,仅为该区域加载 TinyMCE。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script type="text/javascript">
  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>

上面的示例中,选择页面上 class 为 myeditablediv 的元素作为编辑器的容器并且设置编辑器为内联编辑模式,这样点击哪个 div 则在哪个 div 上显示实例化编辑器。

如果需要设置多个编辑器始终显示在页面上,将 inline 设置为 false 即可:

tinymce.init({
    selector: '.myeditablediv',
    inline: false
});

提示:如果需使用表单的方式提交编辑器中的内容,将 div 改为 textarea 并且将其包含在 form 表单内即可

 

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

在下一个示例中,每个可编辑区域都加载了具有唯一配置的 TinyMCE 实例。当不同的内容区域有不同的需求时,这尤其有用。例如,你可能希望提供用于编辑标题的简单配置和用于编辑正文内容的完整配置。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script type="text/javascript">
  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>

同样的,如果需要编辑器始终显示在页面中将 inline 设置为 false 即可

 

以上部分内容来自 TinyMCE 官方文档:https://www.tiny.cloud/docs

About: Mr.zhang

成谜于写 bug 无法自拔~


发表评论

邮箱地址不会被公开。 必填项已用*标注