uEditor: WYSIWYG HTML editor

1. Use

1.1 Prerequisite

uEditor requires jQuery 1.2.6+

1.2 Default options

You can use uEditor without defining specific options by using the following code:

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

(where .uEditor matches the name of the textarea(s) to transform). See below for default configuration options list.

1.3 Custom use

You can also modify the parameters used by specifying yours in an object passed by reference. To display an editor with limited functionnalities, we would use the following snippet:

$('.uEditor).uEditor({
	insertParagraphs : false,
	toolbarItems : ['bold','italic','hyperlink','unorderedlist'],
	selectBlockOptions : ['h1', 'h2', 'p']
});

Parameters

• allowedAttributes Array

  Allowed attributes inside html tags. If you copy and paste content from a web page to the editor, it might be already formatted; the attributes not allowed here would then be removed. Default: ['class', 'id', 'href', 'title', 'alt', 'src'];

• allowedClasses Array

  Allowed CSS classes. Default: empty

• allowedIDs Array

  Allowed IDs. Default: empty

• containerClass String

  Class assigned to the container div. Default: "uEditor"

• insertParagraphs Boolean

  Adds paragraphs between elements according to line breaks. Default: true

• selectBlockOptions Array

  Array containing a list of options for formatting the block element being edited.
  Default: ['h1','h2','h3','h4','h5','h6','p']

• stylesheet String

  Url of the stylesheet used for rendering the content. Default: "uEditorContent.css"

• toolbarItems Array

  Array specifying toolbar items to display.
  Default: ['bold', 'italic', 'link', 'unorderedlist', 'orderedlist', 'image', 'htmlsource', 'blockformat']

• translation Object

  Object containing the interface texts. For a french translation, one would use it as follows:

  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:"
  };

  and then assign it to the editor like so:

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

2. Plugin authoring

Extending toolbar by adding your own buttons is easy. You can do it this way:

$.extend($.uEditorToolbarItems, {
		myButton : { // button 1
			action : function() { // function executed on click
				alert('The first button has been clicked !');
			},
			className : 'myButtonClass', // button class
			label : 'My text' // button text
		},
		mySecondButton : { // button 2
			action : function() {
				alert('The second button has been clicked.');
			},
			label : 'Another text',
			className : 'mySecondButtonClass'
		}
	});
	

You then need to add your buttons to the editor when the latter is initialised:

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

That's done !

To access method and properties of the uEditor class inside a function defined for a button, you can access its instance like so:

var editor = $.data(this, 'editor');
// editor.container : the container div
// editor.iframe : the frame where the content is displayed in WYSIWYG mode
// editor.textarea  : the textarea displayed in source mode

To grab the current selection inside the frame, you can do:

$(editor.iframe).getSelection()

An instance of uToolbar is also stocked in editor.toolbar.
You can use:

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

to set as active a button.

3. Demos

• Default
• With custom options and skin

4. Download

Zip archive – 48ko.