Easy editor documentation

Checkout all examples. Following documentation seems wired but you will get what you need.

Usage:

new EasyEditor('#selector', {
    options: options
});

or

$('#selector').easyEditor({
    options: options
});

Supported default buttons:

['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright', 'quote', 'code', 'x']

How to use icon font in button text: e.g. If you are planning to use font awesome then include fontawesome css and do like this -

var easyEditor = new EasyEditor('#editor', {
    buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright', 'quote', 'code', 'image', 'youtube', 'x'],
    buttonsHtml: {
        'bold': '<i class="fa fa-bold"></i>',
        'italic': '<i class="fa fa-italic"></i>',
        'link': '<i class="fa fa-link"></i>',
        'header-2': '<i class="fa fa-header"></i>2',
        'header-3': '<i class="fa fa-header"></i>3',
        'header-4': '<i class="fa fa-header"></i>4',
        'align-left': '<i class="fa fa-align-left"></i>',
        'align-center': '<i class="fa fa-align-center"></i>',
        'align-right': '<i class="fa fa-align-right"></i>',
        'quote': '<i class="fa fa-quote-left"></i>',
        'code': '<i class="fa fa-code"></i>',
        'insert-image': '<i class="fa fa-picture-o"></i>',
        'insert-youtube-video': '<i class="fa fa-youtube"></i>',
        'remove-formatting': '<i class="fa fa-ban"></i>'
    }
});

// list of button identifier
// =========================
// bold
// italic
// link
// header-2
// header-3
// header-4
// align-left
// align-center
// align-right
// quote
// code
// insert-image
// insert-youtube-video
// remove-formatting

Insert custom button:

EasyEditor.prototype.custombutton = function(){
    var _this = this;
    var settings = {
        buttonIdentifier: 'custombutton',
        buttonHtml: 'My custom button',
        clickHandler: function(){
            console.log('Custom button clicked!');
        }
    };

    _this.injectButton(settings);
};

jQuery(document).ready(function($) {
    new EasyEditor('#editor', {
        buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright', 'custombutton']
    });
});

Wrap with HTML tag:

EasyEditor.prototype.wrapSelectionWithNodeName(arg)

arg = {
    name: 'Tag name e.g h2',
    blockElement: 'boolean',
    style: 'e.g color: #ff0000; background: pink',
    class: 'class name',
    attribute: '[arg1, arg2]',
    keepHtml: 'boolean'
};

Usage:
------
EasyEditor.prototype.h5 = function(){
    var _this = this;
    var settings = {
        buttonIdentifier: 'h5',
        buttonHtml: 'h5',
        clickHandler: function(){

            _this.wrapSelectionWithNodeName({ nodeName: 'span' });
            // or
            _this.wrapSelectionWithNodeName({ nodeName: 'a', attribute: ['href', prompt('Insert link', '')] });
            _this.wrapSelectionWithNodeName({ nodeName: 'a', attribute: { 'data-value': 1, 'data-item': 'item-value' } });
            // or
            _this.wrapSelectionWithNodeName({ nodeName: 'p', style: 'text-align: right', class: 'text-right', keepHtml: true });
            // or
            _this.wrapSelectionWithNodeName({ nodeName: 'h4', blockElement: true });

        }
    };

    _this.injectButton(settings);
};

Overwrite default button settings:

var easyEditor = new EasyEditor('#editor', {
    buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright'],
    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',
        }
    }
});

// default bold button settings was
// ================================
// buttonIdentifier: 'bold',
// buttonHtml: 'B',
// clickHandler: function(){
//     _this.wrapSelectionWithNodeName({ nodeName: 'strong', keepHtml: true });
// }

Insert node at caret or cursor position:

EasyEditor.prototype.imageurl = function(){
    var _this = this;
    var settings = {
        buttonIdentifier: 'insert-image-url',
        buttonHtml: 'Insert image url',
        clickHandler: function(){
            var link = prompt('Insert direct image path', '');

            if(link.length > 0) {
                var figure = document.createElement('figure');
                $(figure).html('<img src="'+ link +'" alt="">');
                _this.insertAtCaret(figure);
            }
            else {
                alert('Invalid URL!');
            }

        }
    };

    _this.injectButton(settings);
};

Modal template: This should be inserted when needed only and before body closing tag

<div class="easyeditor-modal is-hidden" id="your-selector-id-here">
    <div class="easyeditor-modal-content">
        <div class="easyeditor-modal-content-header">{{ Modal title here }}</div>
        <div class="easyeditor-modal-content-body">
            <button class="easyeditor-modal-close">x</button>
            {{ Modal body html here }}
        </div>
    </div>
</div>

Working with modal window:

this.openModal('#your-selector-ID-not-class');

Usage:
------
EasyEditor.prototype.image = function(){
    var _this = this;
    var settings = {
        buttonIdentifier: 'insert-image',
        buttonHtml: 'Insert image',
        clickHandler: function(){
            _this.openModal('#easyeditor-modal-1');
        }
    };

    _this.injectButton(settings);
};

When you open modal you must close it by closeModal('#selection-id-name') and when modal opened insertAtCaret will not work. In that case you insertHtml. insertHtml only works when modal has opened!

easyEditor.insertHtml('<figure><img src="http://placehold.it/500x300" alt=""></figure>');
easyEditor.closeModal('#easyeditor-modal-1');

Usage:
------
EasyEditor.prototype.image = function(){
    var _this = this;
    var settings = {
        buttonIdentifier: 'insert-image',
        buttonHtml: 'Insert image',
        clickHandler: function(){
            _this.openModal('#easyeditor-modal-1');
        }
    };

    _this.injectButton(settings);
};

jQuery(document).ready(function($) {
    var easyEditor = new EasyEditor('#editor', {
        buttons: ['bold', 'italic', 'link', 'image']
    });

    $loader = $('.easyeditor-modal-content-body-loader');
    $('.easyeditor-modal-content-body').find('form').ajaxForm({
        beforeSend: function() {
            $loader.css('width', '0%');
        },
        uploadProgress: function(event, position, total, percentComplete) {
            $loader.css('width', percentComplete + '%');
        },
        success: function() {
            $loader.css('width', '100%');
        },
        complete: function(get) {
            if(get.responseText != 'null') {
                easyEditor.insertHtml('<figure><img src="uploader_sdk/images/'+ get.responseText +'" alt=""></figure>');
                easyEditor.closeModal('#easyeditor-modal-1');
            }
        }
    });

});