Summernote Editor

A JavaScript library that helps you create WYSIWYG editors online.
Official documentation

Default

data-provide="summernote" applies to <textarea>


Set options

You can apply summernote's options using data attributes. For example to set height option, add data-height="150" to the <textarea> and for minHeight option use data-min-height="150".

Slim toolbar

data-toolbar="slim" applies to the summernote.

Full toolbar

data-toolbar="full" applies to the summernote.

Air mode

data-air-mode="true" applies to the summernote. Select a text to see the editor.

This is an Air-mode editable area.

  • Select a text to reveal the toolbar.
  • Edit rich document on-the-fly, so elastic!

End of air-mode area

Click to edit

Sample text to edit.

Quill Editor

Quill is a modern rich text editor built for compatibility and extensibility.
Official documentation

Default

<div id="editor-id" data-provide="quill"></div>

Quill Rich Text Editor


Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.


Bubble

<div id="editor-id" data-provide="quill" data-theme="bubble"></div>

Quill Rich Text Editor


Select part of this text to see the editor!

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.


Full

<div id="editor-id" data-provide="quill" data-toolbar="full"></div>

Quill Rich Text Editor


Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.