Easy editor Select a text and add html tag around it with a custom attribute

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.spanWithAttribute = function(){
        var _this = this;
        var settings = {
            buttonIdentifier: 'span-with-attribute',
            buttonHtml: 'Wrap selected text with span tag with data-value="Awesome"',
            clickHandler: function(){
                _this.wrapSelectionWithNodeName({ nodeName: 'span', attribute: ['data-value', prompt('Enter your custom value e.g Awesome', 'Awesome')] });
                // or you can add multiple attribute by attribute: { 'data-value': 1, 'data-item': 'item-value' }
            }
        };

        _this.injectButton(settings);
    };

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