Easy editor Select a text and wrap it HTML tag with custom style and class

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, officiis, ipsam. Nostrum neque id quaerat, iste. Nostrum incidunt hic minus impedit voluptatibus explicabo, quo modi fugit doloribus odit provident labore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime, recusandae, esse eum aliquid natus, repellat ea, temporibus eaque voluptates tempora beatae. Alias laboriosam, vero necessitatibus? Fugiat modi, voluptatum at?

You can change the entire look and feel, can able to add button / event / can do anything with it. Read documentation here or more example here

HTML:

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

CSS:

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

JS:

<script src="path_to/jquery.min.js"></script>
<script src="path_to/jquery.easyeditor.js"></script>

<script>
    EasyEditor.prototype.aside = function(){
        var _this = this;
        var settings = {
            buttonIdentifier: 'aside',
            buttonHtml: 'Wrap selected text with &lt;aside&gt; tag with a class and custom style',
            clickHandler: function(){
                // keepHtml true, means it will not strip HTML tag in selected text
                _this.wrapSelectionWithNodeName({ nodeName: 'aside', style: 'color: #ff0000', class: 'your-custom-class', keepHtml: true });
            }
        };

        _this.injectButton(settings);
    };

    jQuery(document).ready(function($) {
        new EasyEditor('#editor', {
            buttons: ['bold', 'italic', 'link', 'aside']
        });
    });
</script>