Text Editor

Demonstration

Demo editor

Quick use

The HTML part

<textarea name="example" id="example-editor" class="textarea" cols="30" rows="10" data-jd-text-editor>Your text goes here</textarea>

This means you simply have to use the data-jd-text-editor attibute to create a basic text editor! Simple enough, no?

A bit of CSS

.textarea {
	white-space: pre-wrap;
}

Parameters

Customizing the buttons

To use your own buttons style, you can specify which templates to use:

<textarea name="example" id="example-editor" class="textarea" cols="30" rows="10" data-jd-text-editor data-base-url="https://github.com/" data-active-buttons="bold, italic, link, image" data-buttons-tpl="jd-text-editor-buttons-tpl" data-single-button-tpl="jd-text-editor-single-button-tpl">Your text goes here</textarea>

<template id="jd-text-editor-buttons-tpl">
	<div data-inject-buttons></div>
</template>

<template id="jd-text-editor-single-button-tpl">
	<button type="button" title="{{ title }}" data-button data-icon="format_{{ id }}">{{ content }}</button>
</template>

A quick summary of the attributes used on the textarea itself:

Attribute	Role	Default value
`data-jd-text-editor`	Creates the text editor	No value
`data-base-url`	Defines the absolute URL to use for relative paths in `src` and `href` attributes in the preview	`''` (empty string)
`data-active-buttons`	The (comma separated) list of buttons to show	None, all available buttons are shown by default
`data-buttons-tpl`	The id of the template used for the buttons container	None, a default template is used
`data-single-button-tpl`	The id of the template used for each button	None, a default template is used

Now for the attributes used on the buttons container:

Attribute	Role	Default value
`data-inject-buttons`	Used on the element where the buttons should be injected	No value

And finally, the attributes used on the buttons:

Attribute	Role	Default value
`data-button`	Used on the button to apply the click listener (required to make it work)	No value

You can also use some template markes to customize your buttons: