Proteger elemento DIV de ser eliminado dentro de TinyMCE

Question

Estoy tratando de crear un escenario donde SOLO el contenido dentro de un DIV se puede eliminar y no las etiquetas DIV en el editor TinyMCE utilizado en WordPress.

Por ejemplo;

<div class="name"> 

content 

</div> 

Dentro del editor TinyMCE Me gustaría que el usuario sea capaz de borrar su/su "contenido", pero para la tecla de retroceso/eliminar estar deshabilitado cuando se trata de la eliminación de ellos deben ser prohibidas en hacerlo.

Pensé en algo así como;

<div class="name"> 

<!-- editable --> 

content 

<!-- end editable --> 

</div> 

Puesto que el usuario no ve el código HTML en el panel visual TinyMCE - que podría ser posible para permitir que el contenido sólo en ser editable y una vez reconocido estar vacía todas las funciones de borrado (ratón/teclado) se inhabilitan a preservar el div.

Espero que esto tenga sentido, si no, hágamelo saber y lo intentaré y proporcionaré más información. He buscado alto y bajo para una posible solución, pero no estoy seguro de la mejor manera de resolver esto.

Gracias.

Answer 1

Lo más cercano, por lo que sé, obtendrá con NonEditableContent pero eso no protegerá el DIV para que no se elimine. También hay un modo ReadOnly que no te permite editar nada.

Es posible que pueda conectarse a TinyMCE para evitar la eliminación de la DIV protegida, pero creo que su mejor opción es no incluir el DIV en el editor y dejar que los usuarios editen sus contenidos. Después de actualizar el contenido que usted puede utilizar su plataforma para poner el contenido del usuario en el div ...

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

Answer 2

Aquí está la solución utilicé (usando jQuery para la manipulación 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

Hola tengo el mismo problema y escribí este complemento sin jQuery. creo que sirve

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

escribí un plugin que fue inspirado por el código del Corepany.

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

funciona con el plugin no editable de tinymce, y teóricamente lo hace por lo que no puede eliminar las áreas no editables.

Lo hice para mis propios fines, pero cargué para que cualquier persona con necesidades similares pueda usarlo.

Ver:

https://jsfiddle.net/5a5p5vz7/

Uso:

index.html

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

somefile.js

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