Simple Jquery éditeur WYSIWYG question

Question

J'ai cet éditeur avec moi appelé jWYSIWYG, c'est fondamentalement un plugin Jquery. Donc quand je sélectionne du texte et que je clique sur H1/H2/p ou n'importe quoi du panneau, mon texte est enveloppé dans les étiquettes correspondantes

(par exemple <h1>My text</h1>).

Ma question simple: Comment attacher des classes spécifiques à ces balises. Je veux dire, chaque fois qu'un utilisateur clique sur le bouton de la balise H1, je veux qu'il produise quelque chose comme

<h1 class="someclassname">H1</h1>

Je sais que cela doit être simple, si quelqu'un pouvait aider, serait génial.

Voici le lien vers le projet que je utilise: https://github.com/akzhan/jwysiwyg

Merci.

Answer 1

Je sais que c'est un vieux fil, mais pensé que je poste mes conclusions pour les autres, comme je cherchais aussi un similaire tweak à jWYSIWYG.

Vous pouvez remplacer le comportement par défaut des contrôles en utilisant "exec".

h1: { 
    exec: function() { 
     var range = this.getInternalRange(), 
      common = $(range.commonAncestorContainer), 
      $nodeName = range.commonAncestorContainer.nodeName.toLowerCase(); 
     if (common.parent('h1').length) { 
      common.unwrap(); 
     } else { 
      if ($nodeName !== 'body') { 
       common.wrap('<h1 class="someclassname" />'); 
      } 
     } 
    } 
} 

Answer 2

regardant la documentation, il devrait y avoir quelque chose comme ceci:

$('#wysiwyg').wysiwyg({ 
    controls: { 
     h1: { className: 'your-class-name' }, 
     h2: { className: 'your-other-class-name' }, 
    } 
});