Question

使用多个文本区域只会导致TinyMCE使用最后一个配置，而不是将正确的配置应用于每个文本区域。

我已经尝试了Stack Overflow的几个答案。他们都没有解决问题。许多答案来自TinyMCE的早期版本，但没有指定答案的版本-这使得过时的答案在没有意义的情况下显得很重要。最令人不安的是，TinyMCE 4的官方文档显然也是错误的。

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

    tinymce.init({

      selector: "#textarea2",

    });

{{1}}

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

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

您可以在以下链接中自己查看文档：{{3}}

由于在页面上使用多个编辑器是基本功能，所以我不明白对于同一个问题有多少可能的“正确”答案（请注意：该问题专门针对tinyMCE版本4），显然没有确定的简单正确答案。没有理由要花几个小时在没有明确解决方案的情况下以几种不同的可能方式回答问题。我们不是要在这里派人去火星……

提前感谢您对此问题的帮助。

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

Answer 2

与@Tyeth一样，我看不到文档哪里有错。这是一个非常简单的TinyMCE小提琴，具有两个具有不同ID的div，它们基于两个init({})调用而获得不同的TinyMCE编辑器配置。

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

也许如果您看到不同的行为，则可以提供TinyMCE Fiddle或CodePen或JS Fiddle来显示您的实际代码？没有实际的代码，当我们有多个工作示例时，很难说出为什么您的代码无法工作。

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

2 个答案: