Easy editor Insert button and add video example

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.youtube = function(){
        var _this = this;
        var settings = {
            buttonIdentifier: 'insert-youtube-video',
            buttonHtml: 'Insert youtube video',
            clickHandler: function(){
                var videoLink = prompt('Insert youtube video link', '');
                var videoId = _this.getYoutubeVideoIdFromUrl(videoLink);

                if(videoId.length > 0) {
                    var iframe = document.createElement('iframe');
                    $(iframe).attr({ width: '560', height: '315', frameborder: 0, allowfullscreen: true, src: 'https://www.youtube.com/embed/' + videoId });
                    _this.insertAtCaret(iframe);
                }
                else {
                    alert('Invalid YouTube URL!');
                }

            }
        };

        _this.injectButton(settings);
    };

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