TinyMCE内でDIV要素が削除されないように保護

Question

DIV内のコンテンツのみを削除でき、WordPressで使用されるTinyMCEエディタではDIVタグ自体を削除できないシナリオを作成しようとしています。

たとえば、私は、ユーザーが彼/彼女の「コンテンツ」を削除したが、バックスペースのために/それは彼らがそうすることで禁止すべき削除することになると無効にするキーを削除できるようにしたいのTinyMCEエディタ内

<div class="name"> 

content 

</div> 

。

私は多分何かの行に沿って考えた。

<div class="name"> 

<!-- editable --> 

content 

<!-- end editable --> 

</div> 

ユーザーはTinyMCEのビジュアルペインにHTMLを見ていないので - ONLY内で編集可能と一度すべて削除機能（マウス/キーボード）に無効化され、空であることを認識するコンテンツを許可することは可能かもしれませんdivを保存します。

私はこれが意味をなさないことを願っています。私に知らせてください、私はいくつかのさらなる情報を提供しようとします。私は潜在的な解決策のために高低に見えましたが、私はこれを解決する最善の方法を確信していません。

ありがとうございます。

Answer 1

私が知る限り、最も近いのはNonEditableContentですが、DIV自体が削除されることはありません。 ReadOnlyモードもあり、何も編集することはできません。

保護されたDIVの削除を防ぐためにTinyMCEにフックできるかもしれませんが、あなたの最善の策はエディタ内にDIVを含めず、ユーザーにコンテンツの編集だけをさせることではないと思います。あなたはdivの中に、ユーザーのコンテンツを置くためにあなたのプラットフォームを使用することができ、コンテンツを更新した後...

<div class="name"> 
    <?php echo $content ?> 
</div> 

Answer 2

ここで私は（DOM操作のためのjQueryを使用して）使用した溶液である：

var settings = { 

    init_instance_callback: function (ed) { 
     insertWrapper(ed.contentDocument.body); //insert wrapper when editor is initialized 
    }, 

    setup: function (editor) { 

     editor.onGetContent.add(function (ed, o) { 
      o.content = $(o.content).unwrap().html(); // remove wrapper prior to extracting content 
     }); 

     editor.onKeyUp.add(function (ed, e) { 
      insertWrapper(ed.contentDocument.body); // if wrapper has been deleted, add it back 
     }); 
    } 
}; 

function insertWrapper(body){ 
    if($(body).find('#body-wrapper').length == 0){ 
     $(body).wrapInner('<div id="body-wrapper" />'); 
    } 
} 

new tinymce.Editor('#my-textarea', settings).render(); 

Answer 3

こんにちは、私は同じ問題があり、私はこのプラグインをjQueryを使って書きました。 は、それは私がCorepanyのコードに触発されたプラグインを書いた

//THIS PLUGIN PREVENTS DELETION OF BOOTSTRAP ELEMENTS WHICH HAS DEFINED CLASS 
tinymce.PluginManager.add('preventdelete', function(ed, link) { 

    var lastContainer; 
    //List of bootstrap elements not to delete 
    var bootstrapElements = ["col-sm-2","col-sm-4","col-sm-8","col-sm-10"]; 

    ed.on('keydown', function(evt) { 

     var node   = ed.selection.getNode(); 
     var range   = ed.selection.getRng(); 
     var startOffset  = range.startOffset; 
     var currentWrapper = range.endContainer.parentElement.className; 

      // if delete Keys pressed 
      if (evt.keyCode == 8 || evt.keyCode == 46){ 

      if (startOffset == "0" && bootstrapElements.indexOf(lastContainer)>-1){ 
       evt.preventDefault(); 
       evt.stopPropagation(); 
       return false; 
      } 


      } 

     lastContainer = currentWrapper; 


    }); 



}); 

Answer 4

お役に立てば幸いです。

https://github.com/csga5000/tinymce-prevent-delete

それはTinyMCEはの編集不可能なプラグインで動作し、あなたが編集不可能な領域を除去することはできませんので、理論的には、それを作ります。

私は自分の目的に合わせて作成しましたが、私に似たニーズを持つ誰でも使用できます。

参照：

https://jsfiddle.net/5a5p5vz7/

使用法：

index.htmlを

... 
<script src="preventdelete.js"></script> 
... 

somefileという。js

tinymce.init({ 
    ... 
    plugins: ["noneditable","preventdelete"] 
    ... 
})