Replace a textarea with one line of code:

HTMLEditor.replaceTextArea(document.getElementById("myTextArea"));

Download

Editor with custom CSS classes

Add CSS classes to the toolbar (see "Classes..." SELECT element) and also to IMG elements (see the popup from the contextmenu to edit an image).

<h3>HTMLEditor</h3><p>Just some initial content...</p>

Code

var toolbarItemsObject = HTMLEditor.getDefaultToolbarItemsObject();
toolbarItemsObject["classes"] = {
	"type" : "selectWithAttribute",
	"values" : [
		{
			"text" : "Classes...",
			"value" : ""
		},
		{
			"tag" : "div",
			"value" : "example1",
			"text" : "DIV.example1"
		},
		{
			"tag" : "span",
			"value" : "example2",
			"text" : "SPAN.example2"
		},
		{
			"tag" : "span",
			"value" : "example3",
			"text" : "SPAN.example3"
		}
	]
};

var toolbarItems = ["html", "fullscreen", "block", "classes", "bold", "italic",
	"remove_format", "link", "image", "table", "bullet_list", "numbered_list",
	"special_characters"];

var editor = HTMLEditor.replaceTextArea(
	$("content"), 
	{
		"imageClasses" : [
			{
				"value" : "example4",
				"text" : "Example4"
			},
			{
				"value" : "example5",
				"text" : "Example5"
			}
		],
		"toolbarItems" : toolbarItems,
		"toolbarItemsObject" : toolbarItemsObject
	}
);

---

Editor with custom toolbarbuttons and no statusbar

Custom toolbarbuttons with custom functionality. You can add buttons before and after the editor has been created (easy for plugins to alter the editor).

Code

// 1) First get the default toolbaritemsobject and add the "blockquote" item to it.
var toolbarItemsObject = HTMLEditor.getDefaultToolbarItemsObject();
toolbarItemsObject["blockquote"] = {
	"type" : "button",
	"text" : "Blockquote",
	"func" : "showBlockquotePopup",
	"tag" : "blockquote",
	"image" : "../blockquote.png"
};
toolbarItemsObject["info"] = {
	"type" : "button",
	"text" : "Info",
	"func" : function() {
		alert("Webessence HTMLEditor 2.0");
	},
	"image" : "../help.png"
};
toolbarItemsObject["sep"] = {
	"type" : "separator"
};

// 2) Second add this new items to the toolbar.
var toolbarItems = ["html", "block", "bold", "italic", "bullet_list",
	"numbered_list", "blockquote", "special_characters", "sep", "info"];

// 4) Create the editor.
var editor = HTMLEditor.replaceTextArea(
	$("content2"),
	{
		"show_statusbar" : false,
		"toolbarItemsObject" : toolbarItemsObject,
		"toolbarItems" : toolbarItems
	}
);

// toolbarbutton after creation!
editor.toolbarItemsObject["info2"] = {
	"type" : "button",
	"text" : "Info",
	"func" : function() {
		alert("Webessence HTMLEditor 2.0 - this button was added after
			creation of the editor!");
	},
	"image" : "../help.png"
};
toolbarItemsObject["sep2"] = {
	"type" : "separator"
};
editor.toolbarItems.push("sep2");
editor.toolbarItems.push("info2");
editor.insertToolbarItem("sep2");
editor.insertToolbarItem("info2");

// Create the functions to show the custom popup
editor.showBlockquotePopup = function(arg)
{
	if (arg.className == "activeButton")
	{
		this.extractFromRange(arg.bindedElement);
	}
	else
	{
		if (!this.set_range(false)) {
			return;
		}
		var dir = this.path_popups == "" ? "" : this.path_popups + "/";
		var me = this;
		this.popup_show(dir + "test_blockquote.html",
			function() {me.popup_close();},
			function(arg) {me.BlockquotePopupOk(arg); }, null);
	}
};

editor.BlockquotePopupOk = function(arg) {
	this.surroundRange("blockquote", arg, null);
	this.popup_close();
}

Note: see the popup file test_blockquote.html for the implementation of a popup!

---

Default editor

Replace a textarea with one line of code.

Code

var editor3 = HTMLEditor.replaceTextArea($("content3"));