Text Editor

var area = document.getElementById('my-textarea');
new Admin2.TextEditor(area);
			

Or you can simply use the appropriate class in you HTML :

<textarea class="text-editor"></textarea>
			

The plugin automatically changes the textareas with the text-editor class into a text editor.

You can override some configuration if you like :

new Admin2.TextEditor(area, config);
			

Overriding URLs baseURL

If you need to override the URLs used in your editor. For example if you want to use a specific directory as the origin for relative URLs, just do so:

var config = {
	baseURL = './your/specific/dir';
}
			

This will update the URLs in the preview element but keep the original ones in the result sent to your server. Pretty simple, isn't it?

Buttons className

If you want to add some custom class to the editor's buttons, just use this option:

var config = {
	buttonsClassName = 'my-custom-class';
}
			

Or you can use an Array:

var config = {
	buttonsClassName = ['my-custom-class', 'an-other-class'];
}
			

Tailor-made buttons

If you want to use your own buttons, here's how to do it:

var config = {
	buttons = [
		{
			content: 'B', // The content of the button: can be any HTML you want (but you may want to keep it simple),
			command: 'bold', // The parameter used for `execCommand`
		}
	];
}
			

Options available

• content (required) : The content of the button. Can be any HTML string you want (but you may want to keep it simple)
• command (optional) : The parameter to use with execCommand. Should be part of the following list
• customCommand (optional) : Your custom command to execute when the button is clicked. this will be the TextEditor object and the first and only argument will be the button object you're editing
• className (optional) : The HTML class attribute to apply to the button element
• title (optional) : The HTML title attribute to apply to the button element (may be useful to describe what it does)

Note that you should provide at least one the command or customCommand key to make the button do something. If you don't, pressing it will only refresh the content of the textarea, which is already done automatically when typing into the replacement div.