多个tinymce textareas

时间:2013-03-19 20:13:16

标签: html tinymce

我将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>

所有 textarea中启用tinymce编辑的配置是什么。

5 个答案:

答案 0 :(得分:21)

如果您使用的是“精确”模式,则需要指定要转换为编辑器的元素的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”模式,该模式不加区分地将编辑器应用于所有textareas。

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

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

Here is the documentation on modes

答案 1 :(得分:3)

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

例如,这是一个包含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>

答案 2 :(得分:2)

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

为了使用类mceEditor处理所有textareas,您可以使用:

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

答案 3 :(得分:0)

在选择器中使用类 我有两个或更多个textarea,我希望将这些int设置为int小

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

init tinyint代码:

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

答案 4 :(得分:-1)

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

对于所有textarea元素,请求:

selector: "textarea",

或者更优雅的是,只有具有特定CSS标记的元素:

selector: "textarea.editme",

<textarea class="editme">