uEditor has not bee updated since January 2009 and the project has been forked since then. If you're interested in downloading a more up-to-date version, I’d suggest you to clone this github repo which is still maintained.

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

4. Download

Zip archive – 48ko.


About: informations, contacts & more

Tool designed by Denis Hovart <denis@upian>.

Since 1998, Upian is accompanying interactive agencies. Since 1998, Upian also produces independent and cultural content.