TinyMCEはあらかじめ定義されたhtml構造を保持します

Question

編集時にTinyMCEが事前定義済みのHTML構造を強制する方法を探しています。

例えば、以下の構造を持っているとします。ユーザーがセクション間でコンテンツを追加できるようにしたいが、セクションヘッダー自体は削除しない。

私は、各セクションをクリックしたとき、私は現在、動的にTinyMCEのインスタンスを開くことによって、これを行う、しかし、私はむしろ、ユーザーにとってより良い体験を提供します、単一のエディタで、全体的にロードされたコンテンツを持っていると思います。

1. 第1

   ここでエディットテキスト

2. 第2

   ここでエディットテキスト

3. ここ3節

   エディットテキスト

...

Answer 1

TinyMCEのは、あなたがこれを行うに許可する必要がありnoneditableと呼ばれるプラグインがあります。ここでは

https://www.tinymce.com/docs/plugins/noneditable/

は、このプラグインを活用し、いくつかの例のHTMLです：

<table style="width: 60%;" border="1"> 
     <caption class="mceNonEditable">Ephox Sales Analysis</caption> 
     <tbody> 
      <tr class="mceNonEditable"> 
       <th style="width: 40%;">&nbsp;</th> 
       <th style="width: 15%;">Q1</th> 
       <th style="width: 15%;">Q2</th> 
       <th style="width: 15%;">Q3</th> 
       <th style="width: 15%;">Q4</th> 
      </tr> 
      <tr> 
       <td class="mceNonEditable">East Region</td> 
       <td>100</td> <td>110</td> <td>115</td> <td>130</td> 
      </tr> 
      <tr> 
       <td class="mceNonEditable">Central Region</td> 
       <td>100</td> <td>110</td> <td>115</td> <td>130</td> 
      </tr> 
      <tr> 
       <td class="mceNonEditable">West Region</td> 
       <td>100</td> <td>110</td> <td>115</td> <td>130</td> 
      </tr> 
     </tbody> 
    </table> 

そのクラス（およびそのすべての子）を含むタグは編集できません。