[ AngularJS ] Angular-redactor WYSIWYG editor

 

myApp.config(['redactorOptions'], function(redactorOptions){

redactorOptions.imageUpload = "/api/images"
redactorOptions.callbacks = {
imageUploadError: function(json, xhr){
json.errors // if json response is {'error': true, 'errors': [...]}
}
}

})

ref : https://github.com/TylerGarlick/angular-redactor

Example :

1. imageUpload configuration : Sets URL path to the image upload script

2. focus onload

3. toolbarFixed : affixes external toolbar to a specific position on a page. When the is being scrolled down, fixed toolbar will remain in place and preserve its initial width

4. plugins

source ( https://imperavi.com/redactor/plugins/source/ ),

alignment ( https://imperavi.com/redactor/plugins/alignment/ ),

Create own plugin

embed

icons

(function($)
{
 $.Redactor.prototype.myPluginName = function()
 {
  return {
    init: function()
   {
var _this = this;
      var button = this.button.addBefore('horizontalrule', 'myPluginName', 'Align');

      this.button.addDropdown(button, {

      left : { title: 'Align left', func: _this.myPluginName .setLeft },
      center : { title: 'Align-center', func: _this.myPluginName .setCenter },
      right : { title: 'Align-right', func: _that.myPluginName.setRight }

    });
 },
 removeAlign: function()
 {
 this.block.removeClass('text-center');
 this.block.removeClass('text-right');
 },
 setLeft: function()
 {
 this.buffer.set();
 this.alignment.removeAlign();
 },
 setCenter: function()
 {
 this.buffer.set();
 this.alignment.removeAlign();
 this.block.addClass('text-center');
 },
 setRight: function()
 {
 this.buffer.set();
 this.alignment.removeAlign();
 this.block.addClass('text-right');
 }
 };
 };
})(jQuery);

ref : https://imperavi.com/redactor/docs/how-to-create-plugin/

 

ref : https://imperavi.com/redactor/docs/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s