1. Hyper
  2. Forms
  3. Editors

Editors

Summernote

Super simple WYSIWYG editor.

Please include following css file at head element

                                                    
                                                        <!-- Summernote css -->
                                                        <link href="assets/css/vendor/summernote-bs4.css" rel="stylesheet" type="text/css" />

Make sure to include following js files at end of body element

                                                    
                                                        <!-- plugin js -->
                                                        <script src="assets/js/vendor/summernote-bs4.min.js"></script>
                                                        <!-- Summernote demo -->
                                                        <script src="assets/js/pages/demo.summernote.js"></script>
                                                    
                                                
                                                    
                                                        <!-- HTML-->
                                                        <div id="summernote-basic"></div>
  • Air-mode (Inline)

    Air-mode give an interface without the Toolbar. To reveal popover Toolbar, select a text where you want to modify. Simply turn on airMode and just focus on text.

    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

                                                                
                                                                <div id="summernote-airmode">
                                                                    <p>This is an Air-mode editable area.</p>
                                                                    <ul>
                                                                        <li>Select a text to reveal the toolbar.</li>
                                                                        <li>Edit rich document on-the-fly, so elastic!</li>
                                                                    </ul>
                                                                    <p>End of air-mode area</p>
                                                                </div>
  • Click to edit

    You can edit content on the fly.

    Hello User,

    We create simple, flat & responsive admin dashboard template.

    Please, write text here!

    Super simple WYSIWYG editor on bootstrap.

                                                                
                                                                <div id="summernote-editmode">
                                                                    <h5>Hello User, </h5>
                                                                    <p>We create simple, flat & responsive admin dashboard template.</p>
                                                                    <p>Please, write text here!</p>
                                                                    <p class="lead">Super simple WYSIWYG editor on bootstrap.</p>
                                                                </div>
                                                                <button id="summernote-edit" class="btn btn-primary btn-sm"><i class="mdi mdi-pencil mr-1"></i> Edit</button>
                                                                <button id="summernote-save" class="btn btn-success btn-sm mt-2" style="display: none;"><i class="mdi mdi-content-save-outline mr-1"></i> Save Changes</button>
  • Hint for Words

    Summernote supports autocomplete features, hint to help typing. You can define custom hints with options. Hint options can be an object or array for multiple hints.

                                                                
                                                                <div id="summernote-hint"></div>
  • Hint for Emoji

    For Emoji’s you can use https://api.github.com/emojis

                                                                
                                                                <div id="summernote-emoji"></div>
  • Hint for Mentions

    For Mentions: [jayden, sam, alvin, david]

                                                                
                                                                <div id="summernote-hint-mentions"></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/css/vendor/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/js/vendor/simplemde.min.js"></script>
                                                        <!-- SimpleMDE demo -->
                                                        <script src="assets/js/pages/demo.simplemde.js"></script>
                                                    
                                                
                                                    
                                                        <!-- HTML -->
                                                        <textarea id="simplemde1"></textarea>
Settings
Color Scheme
Width
Left Sidebar
Purchase Now