Simple WYSIWYG Editor For Web - jQuery sumoeditor
File Size: | 108 KB |
---|---|
Views Total: | 9491 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.