logo small logo dark logo small logo
user-image Dominic Keller
  1. Hyper
  2. Forms
  3. Editors

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" />                                                  
                                                            
                                                                <!-- quill js -->
                                                                <script src="assets/vendor/quill/quill.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" />                                                    
                                                    
                                                        <!-- 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>
Theme Settings
Choose Layout
Vertical
Horizontal
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Detached
Topbar Color
Light
Dark
Brand
Menu Color
Light
Dark
Brand
Layout Position
Buy Now