Pour commencer, une fois de plus, bravo pour le travail effectué sur le WYMeditor
Je l'ai adopté depuis près de deux ans maintenant dans mes projets, et j'essaie petit à petit d'en améliorer l'intégration et le comportement.
C'est justement un de ces chantiers qui m'amène.
L'éditeur propose une fonction "Coller (depuis Word)" dans sa barre d'outil pour importer du texte en conservant un minimum de mise en forme ( et de supprimer au passage le code inutile issu des logiciels de traitement de texte). L'expérience montre que les gens n'utilisent simplement pas ce bouton, trop habitués qu'ils sont à utiliser les raccourcis clavier Ctrl+C / Ctrl+V ou les options correspondantes du menu contextuel.
Pour m'assurer que mes utilisateurs utiliseront bien cette fonctionnalité, j'ai décidé de capturer les commandes coller passées dans l'éditeur et de déclencher l'ouverture du dialogue correspondant. J'ai écrit pour cela un petit plugin qui se base sur jquery-hotkeys.js (Oui, c'est un peu gros pour l'utilisation que j'en fait et le plugin serait à peine plus long si je faisais cette détection en interne, mais j'ai dans l'idée d'utiliser jquery.hotkeys à d'autres endroit dans le système).
- Code: Select all
WYMeditor.editor.prototype.catchPaste = function(options) {
var wym = this;
var doc = this._doc;
catchPaste = function(e) {
e.stopPropagation();
e.preventDefault();
wym.exec(WYMeditor.PASTE);
}
$(doc).bind('keydown', 'Ctrl+V', catchPaste );
$(doc).bind('keydown', 'Meta+V', catchPaste );
$(doc).bind('keydown', 'Shift+Insert', catchPaste );
$(doc).bind('paste', catchPaste );
};
Note 1 : Meta+V correspond au raccourci clavier pour coller sous Mac OS. L'éditeur propose actuellement quelques raccourcis clavier pour le gras et l'italique, mais il ne les propose qu'avec la touche Ctrl. Il serait interessant autant que simple de les faire fonctionner aussi sous Mac en modifiant les tests de "if(evt.ctrlKey)" à "if(evt.ctrlKey || evt.metaKey)".
Note 2 : Le support de l'évènement "paste" dans les différents navigateurs étant plus qu'aléatoire, il est possible que sous certains d'entre eux le dialogue ne s'ouvre pas automatiquement et que l'utilisateur retrouve le comportement par défaut.
Mon problème est que le dialogue "Coller" fait appel lors de sa fermeture à la méthode WYMeditor.editor.paste(), qui insère automatiquement le contenu après le bloc courant, peu importe où se trouve le curseur à l'intérieur du bloc.
J'ai donc décider de modifier un peu la fonction paste() pour faire en sorte qu'elle soit plus "intelligente".
J'ai réussi sans problème à la modifier pour faire en sorte qu'elle insère le contenu comme le ferrait un copier/coller traditionnel (sans créer de nouveaux paragraphes) lorsque le contenu ne contient qu'une seule ligne.
- Code: Select all
// Backup the original paste method
WYMeditor.editor.prototype._paste = WYMeditor.editor.prototype.paste;
WYMeditor.editor.prototype.paste = function(sData) {
var rExp = new RegExp(this._newLine, "g");
if(sData.search(rExp) != -1) {
/** @todo: split current bloc at cursor position and select the first part **/
this._paste(sData);
} else {
this.insert(sData);
}
}
J'aimerais maintenant faire en sorte que lorsque le contenu collé contient plusieurs lignes, le bloc courant soit scindé en deux au niveau du curseur et le contenu soit inséré après la première partie.
Seulement voilà, j'ai beau chercher dans l'API et dans le code du WYMeditor, je ne trouve aucun moyen de reproduire simplement le comportement obtenu lorsque la touche Entrée est pressée.
Existe-t-il une fonction qui permette cela ?
Merci d'avance.