多个tinymce textarea答案

【问题标题】：multiple tinymce textareas多个tinymce textarea
【发布时间】：2013-03-08 17:12:56
【问题描述】：

我将 tinymce 用于动态生成至少 5 个文本的网页。
不幸的是，我使用的配置仅适用于第一个textarea。

tinyMCE.init({
    height : "300",
    mode : "exact",
    elements : "content",
    theme : "simple",
    editor_selector : "mceEditor",
    ...

<textarea class="mceEditor" name="content" rows="15" cols="40">content</textarea>

在all textarea's 中启用 tinymce 编辑的配置是什么。

【问题讨论】：

我们如何启用 tinymce 排除类中的特定项目？我可以处理身份证。我发布了另一个问题——stackoverflow.com/questions/55181418/…

标签： html tinymce

【解决方案1】：

如果您使用“精确”模式，则需要指定要转换为编辑器的元素的 ID。

function initMCEexact(e){
  tinyMCE.init({
    mode : "exact",
    elements : e,
    ...
  });
}
// add textarea element with id="content" to document
initMCEexact("content");
// add textarea element with id="content2" to document
initMCEexact("content2");
// add textarea element with id="content3" to document
initMCEexact("content3");

或者，您可以使用“textarea”模式，它将编辑器不加选择地应用于所有文本区域。

function initMCEall(){
  tinyMCE.init({
    mode : "textareas",
    ...
  });
}
// add all textarea elements to document
initMCEall();

请记住，如果您要动态创建 textareas，则需要在创建元素后调用 tinyMCE.init()，因为它们需要存在，tinyMCE 才能转换它们.

Here is the documentation on modes。

【讨论】：

【解决方案2】：

对于 TinyMCE 4.0，您必须使用选择器或为每个所需配置定义 tinymce.init 对象/方法 (https://www.tinymce.com/docs/get-started/multiple-editors/)。

例如，这是一个有 3 个编辑器的页面：

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myeditable-h1',
    toolbar: 'undo redo'
  });
  tinymce.init({
    selector: '.standard-editor'
  });
  </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-div1" class="standard-editor">
      <p>This section1 of content can be edited...</p>
    </div>

    <div id="myeditable-div2" class="standard-editor">
      <p>This section2 of content can be edited...</p>
    </div>

  </form>
</body>
</html>

【讨论】：

【解决方案3】：

您应该在配置中使用不同的模式。例如模式：“specific_textareas”适用于具有在 editor_selector 参数中指定的给定类的所有文本区域。

为了使用 mceEditor 类在所有文本区域上工作，您可以使用这个：

tinyMCE.init({
    mode : "specific_textareas",
    editor_selector : "mceEditor",
    .....

【讨论】：

这根本不起作用。它转换这个选择器和所有其他文本，除了那些由“editor_deselector”指定的类。所以换句话说，“editor_selector”什么都不做，只有“editor_deselector”有效。如果您省略“editor_deselector”，它只会选择所有文本区域。

【解决方案4】：

在选择器中使用类我有两个或更多的文本区域，我想初始化那些 int 很小的所以

<textarea class="mytextarea"></textarea>
<textarea class="mytextarea"></textarea>
.
.
.

在初始化 tinyint 代码中：

tinymce.init({
    selector: 'textarea.mytextarea',
    plugins : 'advlist autolink link lists preview table code pagebreak',
    .
    .
    .

【讨论】：

如何获取特定元素的值？

【解决方案5】：

根据tinymce.com/wiki.php/Configuration:selector，选择器是选择应该可编辑的元素的推荐方式。

对于所有 textarea 元素，根据要求：

selector: "textarea",

或者更优雅，只有那些带有特定 CSS 标签的元素：

selector: "textarea.editme",

<textarea class="editme">

【讨论】：