Editors
-
Quill Editor
Snow is a clean, flat toolbar theme.
Hello World!
This is an simple editable area.
- Select a text to reveal the toolbar.
- Edit rich document on-the-fly, so elastic!
End of simple area
Please include following css file at
head
element<!-- Quill css --> <link href="assets/vendor/quill/quill.core.css" rel="stylesheet" type="text/css" /> <link href="assets/vendor/quill/quill.snow.css" rel="stylesheet" type="text/css" />
Make sure to include following js files at end of
body
element<!-- quill js --> <script src="assets/vendor/quill/quill.min.js"></script> <!-- quill Init js--> <script src="assets/js/pages/demo.quilljs.js"></script>
<!-- HTML --> <div id="snow-editor" style="height: 300px;"> <h3><span class="ql-size-large">Hello World!</span></h3> <p><br></p> <h3>This is an simple editable area.</h3> <p><br></p> <ul> <li> Select a text to reveal the toolbar. </li> <li> Edit rich document on-the-fly, so elastic! </li> </ul> <p><br></p> <p> End of simple area </p> </div>
-
Bubble Editor
Bubble is a simple tooltip based theme.
Hello World!
This is an simple editable area.
- Select a text to reveal the toolbar.
- Edit rich document on-the-fly, so elastic!
End of simple area
Please include following css file at
head
element<!-- Quill css --> <link href="assets/vendor/quill/quill.bubble.css" rel="stylesheet" type="text/css" />
<div id="bubble-editor" style="height: 300px;"> <h3><span class="ql-size-large">Hello World!</span></h3> <p><br></p> <h3>This is an simple editable area.</h3> <p><br></p> <ul> <li> Select a text to reveal the toolbar. </li> <li> Edit rich document on-the-fly, so elastic! </li> </ul> <p><br></p> <p> End of simple area </p> </div>
SimpleMDE
SimpleMDE is a light-weight, simple, embeddable, and beautiful JS markdown editor
Please include following css file at head
element
<!-- SimpleMDE css -->
<link href="assets/vendor/simplemde/simplemde.min.css" rel="stylesheet" type="text/css" />
Make sure to include following js files at end of body
element
<!-- SimpleMDE js -->
<script src="assets/vendor/simplemde/simplemde.min.js"></script>
<!-- SimpleMDE demo -->
<script src="assets/js/pages/demo.simplemde.js"></script>
<!-- HTML -->
<textarea id="simplemde1"></textarea>