在单个页面上使用多个 TinyMCE 编辑器答案

【问题标题】：Using multiple TinyMCE editors on a single page在单个页面上使用多个 TinyMCE 编辑器
【发布时间】：2019-05-27 00:37:51
【问题描述】：

使用多个 textarea 会导致 TinyMCE 仅使用最后一个配置，而不是对每个 textarea 应用正确的配置。

我尝试了 Stack Overflow 的几个答案。他们都没有解决问题。许多答案来自 TinyMCE 的早期版本，但没有指定答案的版本——这使得过时的答案看起来不相关。最麻烦的是，TinyMCE 4 的官方文档显然也是错误的。

这是指定多个选择器的“官方”方式：

    tinymce.init({

      selector: "#textarea1",

    });

    tinymce.init({

      selector: "#textarea2",

    });

实际结果是 TinyMCE 只使用最后一个配置（“#textarea2”）。

您在 Stack Overflow 和其他地方找到的其他解决方案不能解决问题（使用“精确”模式、指定“文本区域”等）。 tinyMCE v4的官方文档也使用了上述方法，虽然明显是错误的。

您可以通过以下链接在文档中自己查看此内容：https://www.tiny.cloud/docs/general-configuration-guide/multiple-editors/

由于在页面上使用多个编辑器是基本功能，我不明白同一个问题如何有这么多可能的“正确”答案（注意：这个问题专门针对 tinyMCE 版本 4），显然没有明确的简单、正确的答案。在没有明确解决方案的情况下，没有理由花费数小时以几种不同的可能方式回答问题。我们并没有把人类送到火星，在这里......

在此先感谢您对此问题的帮助。

【问题讨论】：

标签： tinymce tinymce-4

【解决方案1】：

您发布的链接是 tinymce 的版本 5，但将版本更改为 4 并查看多个配置示例： https://www.tiny.cloud/docs-4x/general-configuration-guide/multiple-editors/

它在 Windows 10 上的 chrome 中运行良好： https://jsbin.com/rehamun/edit?html,output

关闭试用警告，然后单击每一行，第一行撤消等，第二行丰富编辑，两个单独的配置

此处重复示例以请自动回答审核...

<!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>

【讨论】：

我刚刚检查了另一个浏览器，你是对的，但这只会让问题变得更糟——这是 tinyMCE 中的浏览器不兼容问题。而且问题本身仍未解决，因为我的网站已经使用了多个编辑器声明（没有“inline:true”设置），但只使用了最后一个。因此，tinyMCE 在做something 的方式存在something 错误，这根本不是问题的答案。无论如何，感谢您指出正确的文档链接。我现在讨厌 tinyMCE 浪费我的时间，并希望 CKEditor 是更好的软件。欢迎任何其他想法。
另外，作为脚注：版本 4 和 5 的文档告诉用户做同样的事情；如何为单个页面创建多个选择器没有区别。 TinyMCE 是垃圾，不管版本 4 还是 5。
对于未来的信息@murmur0m，您能告诉我们您发现不兼容的浏览器、版本和平台吗？

【解决方案2】：

与@Tyeth 一样，我看不出文档哪里出错了。这是一个非常简单的 TinyMCE Fiddle，其中包含两个具有不同 ID 的 div，它们根据两个 init({}) 调用获得不同的 TinyMCE 编辑器配置。

http://fiddle.tinymce.com/aJgaab/1

也许如果您看到不同的行为，您可以提供一个 TinyMCE Fiddle 或 CodePen 或 JS Fiddle 来显示您的实际代码？如果没有实际的代码，任何人都很难告诉你为什么你的代码不工作，因为我们有多个这样的工作示例。

【讨论】：