Simple Customizable Rich Text WYSIWYG Editor - Easy Editor

Easy Editor is a jQuery plugin which makes it easier to create a nice, highly customizable WYSIWYG rich text editor for your contact / comment forms and CMS / Blog systems. Easy Editor is completely free and open source for educational and commercial purpose.

Features:

• 3 additional themes: Disqus, Mac and Mac Alt.
• Custom editor buttons.
• Lots of examples.
• Multiple instances on one page.

Basic usage:

1. Include the core JavaScript & CSS files and a theme CSS of you choice on the webpage.

<link rel="stylesheet" href="src/easyeditor.css">
<link rel="stylesheet" href="src/easyeditor-modal.css">

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="src/jquery.easyeditor.js"></script>

2. Create a DIV element that will be served as the container for the easy editor.

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

3. The JavaScript to create a new easy editor inside the DIV container you just created.

new EasyEditor('#editor');

4. Customize the editor.

new EasyEditor('#editor',{

    // custom editor buttons
    buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright'],

    /* 
       buttonsHtml: {
        'bold': '<i class="fa fa-bold"></i>',
       }
    */
    buttonsHtml: null,

    /*
       overwriteButtonSettings: {
        'bold' : {
            buttonIdentifier: 'overwritten-bold',
            buttonHtml: 'Overwritten Bold',
            buttonTitle: 'Make text bold',
            clickHandler: function(){
                easyEditor.wrapSelectionWithNodeName({ nodeName: 'b', keepHtml: true });
            }
        },
        'italic': {
            buttonHtml: 'Overwritten Italic',
            buttonTitle: 'Make text italic',
        }
      }
    */
    overwriteButtonSettings: null,

    // additional CSS styles
    css: null,

    // callback
    onLoaded: null,

    // 'theme-disqus','theme-mac','theme-mac-alt'
    theme: null,

    // for buttion dropdown
    dropdown: {}
    
});

---

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