web-dev-qa-db-ja.com

複数のtinymceテキストエリア

少なくとも5つのテキストを動的に生成するWebページにtinymceを使用しています。
残念ながら、私が使用する構成は最初の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>

alltextareaでtinymce編集を有効にするための構成は何ですか。

htmltinymce
14
Udo

「完全」モードを使用している場合は、エディターに変換する要素の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");

または、すべてのテキストエリアに無差別にエディターを適用する「テキストエリア」モードを使用できます。

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

テキストエリアを動的に作成している場合は、要素を作成する後でtinyMCE.init（）afterを呼び出す必要があることに注意してください。 tinyMCEがそれらを変換できるようにします。

これはモードに関するドキュメントです 。

21
DustyWall

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
Alex Vazhev

構成では別のモードを使用する必要があります。たとえば、モード： "specific_textareas"は、editor_selectorパラメータで指定された特定のクラスを持つすべてのtextareaで機能します。

クラスmceEditorですべてのテキストエリアを操作するには、これを使用できます。

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

セレクターでクラスを使用する2つ以上のtextareaがあるため、小さな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',
    .
    .
    .
0
Omid Ahmadyani