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