Simple WYSIWYG Editor For Web - jQuery sumoeditor

sumoeditor is a simple jQuery based WYSIWYG text editor for web that provides the basic actions like text styling, headings, lists, links, images, quotes, and more.

How to use it:

1. Load the sumoeditor stylesheet in the head section that provides the basic styles for the WYSIWYG editor.

<link rel="stylesheet" href="easyeditor.css">

2. Create an empty DIV container for the WYSIWYG editor.

<div id="editor" placeholder="Type here ... ">
</div>

3. Load jQuery library and the jQuery sumoeditor's JavaScript at the end of the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.sumoeditor.js"></script>

4. Create a new EasyEditor object and specify the action buttons to be displayed in the WYSIWYG editor.

new EasyEditor('#editor', {
    buttons: ['bold', 'italic', 'link', 'list', 'quote', 'h2', 'h3', 'h4']
});

5. All available editor buttons:

new EasyEditor('#editor', {
    buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright', 'quote', 'code', 'list', 'x', 'source']
});

6. More config options for the WYSIWYG editor:

new EasyEditor('#editor', {

    // custom buttons
    buttonsHtml: null;

    // override button settings
    overwriteButtonSettings: null;

    // additional CSS styles
    css: null;

    // executed on loaded
    onLoaded: null;
    
    // dropdown object
    dropdown: {};
    
});

Change log:

2017-10-16

• HOVER EVENT ON LINK TAG

2017-10-11

• link popup added

2017-08-27

• JS Update

2017-08-25

• fixed for list.

2017-08-24

• stop repetetion of blocks if previous is empty.

---

This awesome jQuery plugin is developed by HemantNegi. For more Advanced Usages, please check the demo page or visit the official website.