uEditor : éditeur HTML WYSIWYG

1. Usage

1.1 Prérequis

uEditor nécessite jQuery dans sa version 1.2.6 ou supérieure.

1.2 Options par défaut

Vous pouvez utiliser uEditor sans définir d'options spécifiques en utilisant le code suivant :

$('.uEditor').uEditor();

(où .uEditor correspond à la classe du/des textarea à transformer). Voir ci-dessous pour la liste des options définies par défaut.

1.3 Usage personnalisé

Il est également possible de modifier les paramètres utilisés en spécifiant les votres dans un objet passé en référence. Ainsi, pour disposer d'un éditeur aux fonctionnalités restreintes, nous utiliserons le code suivant :

$('.uEditor).uEditor({
	insertParagraphs : false,
	stylesheet : 'myStylesheet.css',
	toolbarItems : ['bold','italic','hyperlink','unorderedlist']
});

Paramètres

• allowedAttributes Array

  Attributs autorisés dans les balises html. Si vous copiez/collez des éléments d'une page html dans l'éditeur, il est possible qu'ils soient déjà formatés; les attributs non autorisés ici seront alors supprimés. Défaut: ['class', 'id', 'href', 'title', 'alt', 'src'];

• allowedClasses Array

  Classes CSS autorisées. Défaut: vide

• allowedIDs Array

  ID autorisés. Défaut: vide

• containerClass String

  Classe attribuée au div contenant l'éditeur. Défaut: "uEditor"

• insertParagraphs Boolean

  Permet de définir l'ajout automatique de paragraphes entre les éléments selon les retours chariots. Défaut: true

• selectBlockOptions Array

  Tableau comportant la liste des options de formatage de l'élément de type block en cours d'édition.
  Défaut: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']

• stylesheet String

  Adresse de la feuille de style utilisée pour le rendu du texte dans l'éditeur. Défaut: "uEditorContent.css"

• toolbarItems Array

  Tableau spécifiant les éléments de la barre d'outil à afficher.
  Défaut: ['bold', 'italic', 'link', 'unorderedlist', 'orderedlist', 'image', 'htmlsource', 'blockformat']

• translation Object

  Objet contenant les différents textes de l'interface. Pour une traduction en français, on utilisera le code suivant :

  var uEditorFR = {
  	bold : 'Gras',
  	italic : 'Italique',
  	link : 'Lien',
  	unorderedlist : 'Liste',
  	orderedlist : 'Liste ordonnée',
  	image : 'Insérer une image',
  	htmlsource : 'Source HTML',
  	blockformat : 'Changer le type de bloc',
  	h1 : "Titre de niveau 1",
  	h2 : "Titre de niveau 2",
  	h3 : "Titre de niveau 3",
  	h4 : "Titre de niveau 4",
  	h5 : "Titre de niveau 5",
  	h6 : "Titre de niveau 6",
  	p : "Paragraphe",
  	selectTextToHyperlink : "Veuillez sélectionner le texte que vous souhaitez transformer en lien.",
  	linkURL : "URL du lien:",
  	imageLocation : "Location de l'image:",
  	imageAlternateText : "Texte alternatif pour cette image:"
  };

  qu'il nous faudra alors affecter ainsi à l'éditeur :

  $('.uEditor).uEditor({ translation : uEditorFR });

2. Écrire un plugin pour uEditor

Étendre la barre d'outil en ajoutant vos propres boutons est aisé. Cela se fait de la manière suivante :

$.extend($.uEditorToolbarItems, {
	monBouton : { // bouton numéro 1
		action : function() { // fonction executée lors du clic
			alert('le bouton 1 a été cliqué!');
		},
		className : 'myButtonClass', // classe du bouton
		label : 'Mon texte' // texte du bouton
	},
	monSecondBouton : { // bouton numéro 2
		action : function() {
			alert('le bouton 2 a été cliqué!');
		},
		label : 'Un autre texte',
		className : 'mySecondButtonClass'
	}
});

Il vous faut ensuite ajouter les boutons à l'éditeur lors de l'initialisation de celui-ci :

$('.uEditorCustom').uEditor({
	toolbarItems : ['bold','italic','monBouton','monSecondBouton']
});

Et le tour est joué !

Pour accéder aux méthodes et propriété de la classe uEditor à l'intérieur de la fonction définie pour un bouton, il est possible d'accéder à une instance de celle-ci ainsi :

var editor = $.data(this, 'editor');
// editor.container : le conteneur
// editor.iframe : la frame où le contenu est executé en mode WYSIWYG
// editor.textarea  : le textarea affiché en mode source

Pour récuperer la sélection en cours, on pourra ainsi faire :

$(editor.iframe).getSelection()

Une instance de uToolbar est également stockée dans editor.toolbar.
Vous pouvez utiliser :

editor.toolbar.setState('myToolbarItem','on');

pour définir comme actif un bouton.

3. Démos

• Par défaut
• Avec un skin et des options personnalisées

4. Téléchargement

Archive zip – 48ko.