Easy editor Insert image url example

Sample image url - http://placehold.it/500x300

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.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);
    };

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