Simple WYSIWYG Editor For Web - jQuery sumoeditor

File Size: 108 KB
Views Total: 9743
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 ... ">

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

<script src="//"></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:






  • fixed for list.


  • 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.