Chroń element DIV przed usunięciem w TinyMCE

Question

Próbuję utworzyć scenariusz, w którym TYLKO treść w DIV może zostać usunięta, a nie same znaczniki DIV w edytorze TinyMCE używanym w WordPress.

Na przykład;

<div class="name"> 

content 

</div> 

W edytorze TinyMCE Chciałbym użytkownika, aby móc usunięte jego/jej „treść”, ale dla Backspace/kasowanie jest wyłączony, jeśli chodzi o usuwanie powinny być zakazane w tym zakresie.

Pomyślałem o czymś w rodzaju;

<div class="name"> 

<!-- editable --> 

content 

<!-- end editable --> 

</div> 

Ponieważ użytkownik nie widzi HTML w Visual okienku TinyMCE - może to być możliwe, aby umożliwić treści wyłącznie w celu być edytowalne i raz uznane za pusty wszystkich funkcji Delete (mysz/klawiatura) są wyłączone do zachowaj div.

Mam nadzieję, że to ma sens, jeśli nie, proszę dać mi znać, a postaram się dostarczyć dalszych informacji. Wyglądałem wysoko i nisko na potencjalne rozwiązanie, ale nie jestem pewien, jak najlepiej rozwiązać ten problem.

Dziękuję.

Answer 1

Najbliższe, o ile wiem, otrzymasz z NonEditableContent, ale to nie ochroni samego DIV przed usunięciem. Istnieje również tryb ReadOnly, który nie pozwoli ci niczego edytować.

Być może uda Ci się podłączyć do TinyMCE, aby zapobiec usunięciu chronionego DIV, ale myślę, że najlepszym wyjściem nie jest włączenie DIV do edytora i pozwolenie użytkownikom na edytowanie jego zawartości. Po aktualizacji zawartości można korzystać z platformy, aby umieścić zawartość użytkownika w div ...

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

Answer 2

Oto rozwiązanie Kiedyś (za pomocą jQuery do manipulacji DOM):

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

Witam Mam ten sam problem i napisałem tę wtyczkę bez jQuery. Nadzieja pomaga

//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

napisałem plugin, który był inspirowany przez kod Corepany użytkownika.

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

Współpracuje z nieedytowalnego plugin TinyMCE, a teoretycznie sprawia, że ​​tak nie można usunąć bez edytowalnych obszarów.

Zrobiłem to dla własnych celów, ale przesłane, aby każdy, kto ma podobne potrzeby, mógł z niego korzystać.

Patrz:

https://jsfiddle.net/5a5p5vz7/

Zastosowanie:

index.html

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

somefile.js

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