当前位置:首页 > 站长笔记 > html笔记 > 正文
运行天数:3003 天 最后更新:2020-7-11

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

用手机或者平板电脑扫描应用扫描本二维码,可以在手机浏览器继续浏览,也可以分享给你的联系人。

2020年03月04日 | 作者: 影子 | 分类: html笔记, javascript笔记, 网站建设 | 点击量: 315

WDJA网站内容管理系统,免费开源可商用 点我获取,简单好用的PHP版CMS

来源:

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编辑器.

 

 

 

 

 



手机扫码浏览本文


关键词:, ,

本文网址:https://www.menglei.net/3710/,转载请以链接形式注明出处,谢谢合作!

*本站部分内容转载自其他媒体,版权归其所有。如若内容或图片侵犯您的权益,请与本站联系,我们将在24小时内处理完毕。

作者:清晨@深圳网站建设专家. | 清晨,领先的深圳网站优化品牌。

交流QQ号:925474725 邮件支持:shadoweb@qq.com