TinyMCE ajouter des styles d'exécution pour désactiver l'édition d'un élément

Question

J'essaie de créer de meilleurs aperçus «in editor» pour mes shortcodes.

Alors, je les envelopper avec divs CSS classé que je peux style via le rédacteur styles.css comme ceci:

if (customid != 0 && customid == 'divider_bar_soft_up'){ 
     tagtext = "<div class=\"my_editor_style mceItemNoResize\">["+ customid + "/]</div>"; 
    } 

Ce qui fonctionne très bien, sauf que la classe mceItemNoResize est non liée à la l'élément lorsque son transféré dans l'éditeur. Le code source dans l'éditeur ressemble à ceci:

<div class="my_editor_style">[divider_bar_soft_up/]</div> 

Ma question est « Comment puis-je appliquer une classe CSS personnalisée ou de style à cet élément afin qu'il ne puisse pas être modifié par inadvertance (autre que déplacé ou supprimé)

?

Je suis en train d'empêcher l'utilisateur d'insérer accidentellement leur curseur dans mon div wrapper et commencez à taper.

Answer 1

Hmm, vous pourriez attraper des événements cliquez sur l'emballage div et return false.

Exemple: Vérifie si un clic se produit si l'élément spécifié a été cliqué et déplace le curseur après cet élément. Sachez que dans le cas où vous avez plus d'éléments html à l'intérieur de ce div, vous devez faire des vérifications supplémentaires.

ed.on('init', function(e){ 
    ed.on('click', function(evt){ 
     if (evt.target == 'DIV' && evt.target.className == 'my_editor_style') 
     { 
      // remove selection 
      ed.selection.select(evt.target); 
      // collapse selection range to end 
      ed.selection.collapse(0); 
     } 
    }); 
});