html - 複数の tinymce テキストエリア

Question

少なくとも 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>

すべて の 'sで tinymce 編集を有効にする構成は何ですかtextarea。

score 24 · Accepted Answer

「exact」モードを使用している場合は、エディターに変換する要素の 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() を呼び出す必要があることを覚えておいてください。tinyMCE がそれらを変換できるようにするには、要素が存在する必要があるためです。

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

score 3 · Accepted Answer

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>

score 2 · Accepted Answer

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

クラスmceEditorを使用してすべてのテキスト領域で作業するには、次を使用できます。

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

score -1 · Accepted Answer

tinymce.com/wiki.php/Configuration:selectorによると、セレクターは、編集可能にする要素を選択するための推奨される方法です。

要求に応じて、すべての textarea 要素について:

selector: "textarea",

または、よりエレガントに、特定の CSS タグを持つ要素のみ:

selector: "textarea.editme",

<textarea class="editme">

html - 複数の tinymce テキストエリア

5 に答える 5

Related

Reference