DEPRECATED
This is no longer maintained.
Please consider using d1-web instead.
Add-on for d1.
Lightweight WYSIWYG text editor.
Demo & docs
npm install d1edit
On page load call:
d1edit.init(options);
In your textarea
markup:
- Add
edit
class to enable WYSIWYG editor. - Add
adjust
class to automatically adjust textarea height to content. - Add
data-wys
attribute to set initial editor mode. Set empty string as value for source code editing, any other value for WYSIWYG. If attribute is absent, initial mode is determined automatically (WYSIWYG if text contains HTML tags). - Add
data-tools
attribute to customize WYSIWYG editor toolset.
<textarea class="edit" cols="50" rows="20">
Write <b>formatted</b> text.
</textarea>
Query selector of textarea elements to auto-adjust height.
Default: "textarea.adjust"
Query selector of textarea elements to enable WYSIWYG. Default: "textarea.edit"
Default height of WYSIWYG editor in em
s.
Default: 50
WYSIWYG editor toolset. Each character stands for tool:
/
- toggle editing mode (WYSIWYG/source)*
- insert image@
- insert linkx
- remove linkb
- boldi
- italic_
- remove format.
- unordered list#
- ordered list1
- heading 12
- heading 23
- heading 3p
- paragraph|
- toggle more toolsc
- code,
- abbreviations
- strike through^
- subscriptv
- superscriptd
- divq
- block quotef
- preformatted~
- horizontal rulerT
- table(
- justify left=
- justify center)
- justify rightj
- justify full+
- increase indent-
- decrease indent
Default: "/*@xbi_.#123p|c,s^vdqf~T(=)j+-"
- IE 10+
- Latest Stable: Chrome, Firefox, Opera, Safari