Easy editor Upload and insert image into EasyEditor

We will use jQuery form plugin for ajax upload or you can use your preffered one!

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>

Add modal HTML before body tag

<!-- easy editor modal starts -->
<div class="easyeditor-modal is-hidden" id="easyeditor-modal-1">
    <div class="easyeditor-modal-content">
        <div class="easyeditor-modal-content-header">Upload image</div>
        <div class="easyeditor-modal-content-body">
            <div class="easyeditor-modal-content-body-loader"></div>
            <button class="easyeditor-modal-close">x</button>

            <form action="uploader_sdk/" method="post" enctype="multipart/form-data">
                <input type="file" name="file" id="easyeditor-file">
                <button type="submit" name="easyeditor-upload">Upload and insert</button>
            </form>

        </div>
    </div>
</div>
<!-- easy editor modal ends -->

CSS:

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

JS:

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

<script>
    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']
        });

        // form uploader starts using jquery.form.min.js
        $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');
                }
            }
        });
        // form uploader ends using jquery.form.min.js

    });
</script>

PHP

I have added a sample uploader using PHP located here which does upload image and return filename. That's it!