push_type_wysiwyg 0.2.0.beta2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 53a41e1f5039820e921d517c59b75829c446f62f
+  data.tar.gz: 34fc5ae82f747a0c73b6e3bcee2a33371b9190c0
+SHA512:
+  metadata.gz: 2a8445aa224978e5a16c40f25c8576f09d5c55531dcdbd4df4748e028b6a2c2b6198d10abb45d86cb4734955c305596f3888744809cfa6d4615acdbbb933b988
+  data.tar.gz: 5c9ffe9f80c720b720892a1734389ded25ad8254b43a484ac143efbaa5312f8fcc93767f63551337970b8109921aecde6a9dea4c7f57648d830fec36f09d7ce8

data/LICENSE.md

@@ -0,0 +1,20 @@
+Copyright 2014 Push Code Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,3 @@
+# PushType-Wysiwyg
+
+This project rocks and uses MIT-LICENSE.

data/app/assets/javascripts/push_type/froala_overrides/file_upload.js

@@ -0,0 +1,133 @@
+$.Editable.prototype.fileUploadHTML = function () {
+  var html = '<div class="froala-popup froala-file-popup" style="display: none;"><h4><span data-text="true">Upload file</span><i title="Cancel" class="fa fa-times" id="f-file-close-' + this._id + '"></i></h4>';
+
+  html += '<div id="f-file-list-' + this._id + '">';
+
+  html += '<div class="f-popup-line drop-upload">';
+  html += '<div class="f-upload" id="f-file-upload-div-' + this._id + '"><strong data-text="true">Drop File</strong><br>(<span data-text="true">or click</span>)<form target="file-frame-' + this._id + '" enctype="multipart/form-data" encoding="multipart/form-data" action="' + this.options.fileUploadURL + '" method="post" id="f-file-form-' + this._id + '"><input id="f-file-upload-' + this._id + '" type="file" name="' + this.options.fileUploadParam + '" accept="/*"></form></div>';
+
+  if (this.browser.msie && $.Editable.getIEversion() <= 9) {
+    html += '<iframe id="file-frame-' + this._id + '" name="file-frame-' + this._id + '" src="javascript:false;" style="width:0; height:0; border:0px solid #FFF; position: fixed; z-index: -1;" data-loaded="true"></iframe>';
+  }
+
+  html += '</div>';
+
+  if (this.options.fileLink) {
+    html += '<div class="f-popup-line"><label><span data-text="true">Enter URL</span>: </label><input id="f-file-url-' + this._id + '" type="text" placeholder="http://example.com"><button class="f-browse fr-p-bttn" id="f-browser-' + this._id + '"><i class="fa fa-search"></i></button><button data-text="true" class="f-ok fr-p-bttn" id="f-file-ok-' + this._id + '">OK</button></div>';
+  }
+
+  html += '</div>';
+  html += '<p class="f-progress" id="f-file-progress-' + this._id + '"><span></span></p>';
+  html += '</div>';
+
+  return html;
+}
+
+
+/**
+ * Build file upload.
+ */
+$.Editable.prototype.buildFileUpload = function () {
+  // Add file wrapper to editor.
+  this.$file_wrapper = $(this.fileUploadHTML());
+  this.$popup_editor.append(this.$file_wrapper);
+
+  this.buildFileDrag();
+
+  var that = this;
+
+  // Stop event propagation in file.
+  this.$file_wrapper.on('mouseup touchend', $.proxy(function (e) {
+    if (!this.isResizing()) {
+      e.stopPropagation();
+    }
+  }, this));
+
+  this.addListener('hidePopups', $.proxy(function () {
+    this.hideFileWrapper();
+  }), this);
+
+  // Init progress bar.
+  this.$file_progress_bar = this.$file_wrapper.find('p#f-file-progress-' + this._id);
+
+  // Build upload frame.
+  if (this.browser.msie && $.Editable.getIEversion() <= 9) {
+    var iFrame = this.$file_wrapper.find('iframe').get(0);
+
+    if (iFrame.attachEvent) {
+      iFrame.attachEvent('onload', function () { that.iFrameLoad() });
+    } else {
+      iFrame.onload  = function () { that.iFrameLoad() };
+    }
+  }
+
+  // File was picked.
+  this.$file_wrapper.on('change', 'input[type="file"]', function () {
+    // Files were picked.
+    if (this.files !== undefined) {
+      that.uploadFile(this.files);
+    }
+
+    // IE 9 upload.
+    else {
+      var $form = $(this).parents('form');
+      $form.find('input[type="hidden"]').remove();
+      var key;
+      for (key in that.options.fileUploadParams) {
+        $form.prepend('<input type="hidden" name="' + key + '" value="' + that.options.fileUploadParams[key] + '" />');
+      }
+
+      that.$file_wrapper.find('#f-file-list-' + that._id).hide();
+      that.$file_progress_bar.show();
+      that.$file_progress_bar.find('span').css('width', '100%').text('Please wait!');
+      that.showFileUpload();
+
+      $form.submit();
+    }
+
+    // Chrome fix.
+    $(this).val('');
+  });
+
+  // Create a list with all the items from the popup.
+  this.$file_wrapper.on('click', '#f-file-ok-' + this._id, $.proxy(function () {
+    var file = this.$file_wrapper.find('#f-file-url-' + this._id).val();
+    if (file !== '') {
+      this.writeFile(file, file);
+    }
+  }, this));
+
+  // Wrap things in file wrapper.
+  this.$file_wrapper.on(this.mouseup, '#f-file-close-' + this._id, $.proxy(function () {
+    e.stopPropagation();
+    e.preventDefault();
+
+    this.$bttn_wrapper.show();
+    this.hideFileWrapper();
+
+    this.restoreSelection();
+    this.focus();
+
+    this.hide();
+  }, this))
+
+  this.$file_wrapper
+    .on('click', '#f-browser-' + this._id, $.proxy(function () {
+      this.showMediaManager('file');
+    }, this))
+    .on('click', '#f-browser-' + this._id + ' i', $.proxy(function () {
+      this.showMediaManager('file');
+    }, this));
+
+  this.$file_wrapper.find('#f-browser-' + this._id).show();
+
+  this.$file_wrapper.on('click', function (e) {
+    e.stopPropagation();
+  });
+
+  this.$file_wrapper.on('click', '*', function (e) {
+    e.stopPropagation();
+  });
+};
+
+$.Editable.initializers.push($.Editable.prototype.buildFileUpload);

data/app/assets/javascripts/push_type/froala_overrides/froala_editor.js

@@ -0,0 +1,34 @@
+/**
+ * Override so the popup is never too bar below bottom of editor element
+ */
+$.Editable.prototype.showByCoordinates = function (x, y) {
+  
+  var editor_width = Math.max(this.$popup_editor.width(), 250),
+      bottom        = this.$element.offset().top + this.$element.outerHeight();
+
+  y = Math.min(y, bottom);
+
+  x = x - 20;
+  y = y + 15;
+
+
+  if (x + editor_width >= $(window).width() - 50 && (x + 40) - editor_width > 0) {
+    this.$popup_editor.addClass('right-side');
+    x = $(window).width() - (x + 40);
+    this.$popup_editor.css('top', y);
+    this.$popup_editor.css('right', x);
+    this.$popup_editor.css('left', 'auto');
+  } else if (x + editor_width < $(window).width() - 50) {
+    this.$popup_editor.removeClass('right-side');
+    this.$popup_editor.css('top', y);
+    this.$popup_editor.css('left', x);
+    this.$popup_editor.css('right', 'auto');
+  } else {
+    this.$popup_editor.removeClass('right-side');
+    this.$popup_editor.css('top', y);
+    this.$popup_editor.css('left', Math.max(($(window).width() - editor_width), 10) / 2);
+    this.$popup_editor.css('right', 'auto');
+  }
+
+  this.$popup_editor.show();
+};

data/app/assets/javascripts/push_type/froala_overrides/image_editor.js

@@ -0,0 +1,215 @@
+/**
+ * Init popup for image.
+ */
+$.Editable.prototype.initImagePopup = function () {
+  this.$image_editor = $('<div class="froala-popup froala-image-editor-popup" style="display: none">');
+
+  var $buttons = $('<div class="f-popup-line f-popup-toolbar">').appendTo(this.$image_editor);
+  for (var i = 0; i < this.options.imageButtons.length; i++) {
+    var cmd = this.options.imageButtons[i];
+    if ($.Editable.image_commands[cmd] === undefined) {
+      continue;
+    }
+    var button = $.Editable.image_commands[cmd];
+
+    var btn = '<button class="fr-bttn" data-callback="' + cmd + '" data-cmd="' + cmd + '" title="' + button.title + '">';
+
+    if (this.options.icons[cmd] !== undefined) {
+      btn += this.prepareIcon(this.options.icons[cmd], button.title);
+    } else {
+      btn += this.prepareIcon(button.icon, button.title);
+    }
+
+    btn += '</button>';
+
+    $buttons.append(btn);
+  }
+
+  this.addListener('hidePopups', this.hideImageEditorPopup);
+
+  if (this.options.imageStyle) {
+    $('<div class="f-popup-line f-image-style">').appendTo(this.$image_editor);
+    $('<div class="f-popup-line f-image-custom-style">').hide().appendTo(this.$image_editor);
+  }
+
+  if (this.options.imageTitle) {
+    $('<div class="f-popup-line f-image-alt">')
+      .append('<label><span data-text="true">Title</span>: </label>')
+      .append($('<input type="text">').on('mouseup keydown', function (e) {
+        var keyCode = e.which;
+        if (!keyCode || keyCode !== 27) {
+          e.stopPropagation();
+        }
+      }))
+      .append('<button class="fr-p-bttn f-ok" data-text="true" data-callback="setImageAlt" data-cmd="setImageAlt" title="OK">OK</button>')
+      .appendTo(this.$image_editor);
+  }
+
+  this.$popup_editor.append(this.$image_editor);
+
+  this.bindCommandEvents(this.$image_editor);
+};
+
+
+/**
+ * Show image editor popup.
+ */
+$.Editable.prototype.showImageEditorPopup = function () {
+  if (this.$image_editor) {
+    var _self = this;
+    setTimeout( function(){ 
+      _self.$image_editor.find('.f-image-style')
+        .html('<label><span data-text="true">Style</span>: </label>')
+        .append( $('<select />').append( _self.mediaStyleOptions() ).on('change', function(e) {
+          _self.setImageStyle();
+        }));
+
+      currentStyle = _self.currentMediaStyle();
+      $customRow = _self.$image_editor.find('.f-image-custom-style')
+        .html('<label><span data-text="true">Size</span>: </label>')
+        .append($('<input type="text" value="'+ ( $.inArray(currentStyle, _self.options.mediaStyles) === -1 ? currentStyle : '' ) +'">').on('mouseup keydown', function(e) {
+          var keyCode = e.which;
+          if (!keyCode || keyCode !== 27) {
+            e.stopPropagation();
+          }
+        }))
+        .append('<button class="fr-p-bttn f-ok" data-text="true" data-callback="setImageCustomStyle" data-cmd="setImageCustomStyle" title="OK">OK</button>');
+      $.inArray(currentStyle, _self.options.mediaStyles) === -1 ? $customRow.show() : $customRow.hide();
+    }, 0);
+    this.$image_editor.show();
+  }
+
+  if (!this.options.imageMove) {
+    this.$element.attr('contenteditable', false);
+  }
+};
+
+
+/**
+ * Media style options for select
+ */
+$.Editable.prototype.mediaStyleOptions = function() {
+  var currentStyle  = this.currentMediaStyle();
+
+  var options = $.map(this.options.mediaStyles, function(style) {
+    var label = style.charAt(0).toUpperCase() + style.substring(1).replace(/_/, ' ');
+    return '<option value="'+ style +'"'+ (style == currentStyle ? ' selected' : '') +'>'+ label + '</option>';
+  });
+  options.push('<option value="_custom"'+ ( $.inArray(currentStyle, this.options.mediaStyles) === -1 ? ' selected' : '' ) +'>Custom</option>');
+
+  return options.join();
+}
+
+
+/**
+ * Get the current media style
+ */
+$.Editable.prototype.currentMediaStyle = function() {
+  var $image_editor = this.$element.find('span.f-img-editor');
+  var image_src     = $image_editor.find('img').attr('src'),
+      mediaMatch    = image_src != 'undefined' ? image_src.match(/\?.*style=(\w+[%0-9a-z!]*)/i) : false;
+
+  return mediaMatch ? decodeURIComponent(mediaMatch[1]) : 'original';
+}
+
+
+/**
+ * Set image styke.
+ */
+$.Editable.prototype.setImageStyle = function () {
+  var $image_editor = this.$element.find('span.f-img-editor'),
+      style         = this.$image_editor.find('.f-image-style select').val(),
+      image_src     = $image_editor.find('img').attr('src').split('?')[0] + '?style=' + encodeURIComponent(style);
+
+  if (style == '_custom') {
+    this.$image_editor.find('.f-image-custom-style').slideDown();
+  } else {
+    this.$image_editor.find('.f-image-custom-style').slideUp();
+    $image_editor.find('img').attr('src', image_src).removeAttr('width').on('load', function(){
+      $(this).click();
+    });
+
+    this.triggerEvent('imageStyleSet');
+  }
+};
+
+
+/**
+ * Set image styke.
+ */
+$.Editable.prototype.setImageCustomStyle = function () {
+  var $image_editor = this.$element.find('span.f-img-editor'),
+      style         = this.$image_editor.find('.f-image-custom-style input').val(),
+      image_src     = $image_editor.find('img').attr('src').split('?')[0] + '?style=' + encodeURIComponent(style);
+
+  $image_editor.find('img').attr('src', image_src).removeAttr('width');
+
+  this.hide();
+  this.closeImageMode();
+
+  this.triggerEvent('imageStyleSet');
+};
+
+
+/**
+ * Insert image command.
+ * Override so the image_link is manipulated to add default style
+ * an image title is grabbed from $media_images
+ * @param image_link
+ */
+$.Editable.prototype.writeImage = function (image_link, sanitize) {
+  if (sanitize) {
+    image_link = this.sanitizeURL(image_link);
+    if (image_link === '') {
+      return false;
+    }
+  }
+
+  var image_data = this.$media_images.find('img[data-src="'+ image_link +'"]').data();
+  if ( typeof image_data != 'undefined' && 'title' in image_data ) {
+    image_title = image_data.title;
+  } else {
+    image_title = this.options.defaultImageTitle;
+  }
+
+  var img = new Image();
+  img.onerror = $.proxy(function () {
+    this.hideImageLoader();
+    this.throwImageError(1);
+  }, this);
+
+  if (this.imageMode) {
+    img.onload = $.proxy(function () {
+      var $img = this.$element.find('.f-img-editor > img');
+      $img.attr({
+        src:  image_link,
+        alt:  image_title
+      }).removeAttr('title');
+
+      this.hide();
+      this.hideImageLoader();
+      this.$image_editor.show();
+
+      this.enable();
+
+      // call with (image HTML)
+      this.triggerEvent('imageReplaced', [$img]);
+
+      setTimeout(function () {
+        $img.trigger('click');
+      }, 0);
+    }, this);
+  }
+
+  else {
+    img.onload = $.proxy(function () {
+      this.insertLoadedImage(image_link);
+      var $img = this.$element.find('.f-img-editor > img');
+      $img.attr('alt', image_title);
+    }, this);
+  }
+
+  this.showImageLoader(true);
+
+  img.src = image_link;
+};

data/app/assets/javascripts/push_type/froala_overrides/media_manager.js

@@ -0,0 +1,184 @@
+$.Editable.prototype.showMediaManager = function (kind) {
+  this.$image_modal.data('context', kind);
+  this.$image_modal.find('h4 span').text('Manage '+ kind +'s');
+  this.$image_modal.show();
+  this.$overlay.show();
+  this.loadImages();
+  $('body').css('overflow','hidden');
+}
+
+$.Editable.prototype.mediaModalHTML = function () {
+  var html = '<div class="froala-modal"><div class="f-modal-wrapper"><h4><span data-text="true">Manage images</span><i title="Cancel" class="fa fa-times" id="f-modal-close-' + this._id + '"></i></h4>'
+
+  html += '<img class="f-preloader" id="f-preloader-' + this._id + '" alt="Loading..." src="' + this.options.preloaderSrc + '" style="display: none;">';
+
+  if (WYSIWYGModernizr.touch) {
+    html += '<div class="f-image-list f-touch" id="f-image-list-' + this._id + '"></div>';
+  } else {
+    html += '<div class="f-image-list" id="f-image-list-' + this._id + '"></div>';
+  }
+
+  html += '<div class="pagination-centered" id="f-pagination-' + this._id + '"></div>';
+
+  html += '</div></div>';
+
+  return html;
+}
+
+$.Editable.prototype.buildMediaManager = function () {
+  this.$image_modal = $(this.mediaModalHTML()).appendTo('body');
+  this.$preloader = this.$image_modal.find('#f-preloader-' + this._id);
+  this.$media_images = this.$image_modal.find('#f-image-list-' + this._id);
+  this.$overlay = $('<div class="froala-overlay">').appendTo('body');
+
+  // Stop event propagation on overlay.
+  this.$overlay.on('mouseup', $.proxy(function (e) {
+    if (!this.isResizing()) {
+      e.stopPropagation();
+    }
+  }, this));
+
+
+  // Stop event propagation in modal.
+  this.$image_modal.on('mouseup', $.proxy(function (e) {
+    if (!this.isResizing()) {
+      e.stopPropagation();
+    }
+  }, this));
+
+  // Close button.
+  this.$image_modal.find('i#f-modal-close-' + this._id)
+    .click($.proxy(function () {
+      this.hideMediaManager();
+    }, this));
+
+  // Select image.
+  this.$media_images.on(this.mouseup, 'img', $.proxy(function (e) {
+    e.stopPropagation();
+    var img = e.currentTarget;
+    if ( $(img).data('kind') == 'image' ) {
+      this.writeImage($(img).data('src'));
+    } else {
+      this.writeFile($(img).data('src'), $(img).data('title'));
+    }
+    this.hideMediaManager();
+  }, this));
+
+  // Delete image.
+  this.$media_images.on(this.mouseup, '.f-delete-img', $.proxy(function (e) {
+    e.stopPropagation();
+    var img = $(e.currentTarget).prev();
+    var message = 'Are you sure? Image will be deleted.';
+    if ($.Editable.LANGS[this.options.language]) {
+      message = $.Editable.LANGS[this.options.language].translation[message];
+    }
+
+    // Ask for confirmation.
+    if (confirm(message)) {
+      if (this.triggerEvent('beforeDeleteImage', [$(img)], false) !== false) {
+        $(img).parent().addClass('f-img-deleting');
+        this.deleteImage($(img));
+      }
+    }
+  }, this));
+
+  // Add button for media manager to image.
+  if (this.options.mediaManager) {
+    this.$image_wrapper
+      .on('click', '#f-browser-' + this._id, $.proxy(function () {
+        this.showMediaManager('image');
+      }, this))
+      .on('click', '#f-browser-' + this._id + ' i', $.proxy(function () {
+        this.showMediaManager('image');
+      }, this));
+
+    this.$image_wrapper.find('#f-browser-' + this._id).show();
+  }
+
+  this.hideMediaManager();
+};
+
+$.Editable.prototype.initPagination = function(data) {
+  var mm = this;
+  this.$image_modal.find('#f-pagination-' + this._id).pagination({
+    pages: data.meta.total_pages,
+    currentPage: data.meta.current_page,
+    hrefTextPrefix: '#/media/page-',
+    onPageClick: function(page, e) {
+      e.preventDefault();
+      mm.loadImages(page);
+    }
+  });
+}
+
+// Load images from server.
+$.Editable.prototype.loadImages = function (page) {
+  var isPaginated = (typeof page !== 'undefined');
+
+  this.$preloader.show();
+  this.$media_images.empty();
+
+  if (this.$image_modal.data('context') == 'file') {
+    ajax = {
+      url: this.options.filesLoadURL,
+      opts: this.options.filesLoadParams
+    }
+  } else {
+    ajax = {
+      url: this.options.imagesLoadURL,
+      opts: this.options.imagesLoadParams
+    }
+  }
+  if (isPaginated) {
+    ajax.opts.page = page;
+  }
+
+  if (ajax.url) {
+    $.support.cors = true;
+    $.getJSON(ajax.url, ajax.opts, $.proxy(function (data) {
+      // data
+      this.triggerEvent('imagesLoaded', [data], false);
+      this.processLoadedImages(data.assets);
+      if (!isPaginated && data.meta.total_pages > 1) {
+        this.initPagination(data);
+      }
+      this.$preloader.hide();
+    }, this))
+      .fail($.proxy(function () {
+        this.throwLoadImagesError(2);
+      }, this));
+  }
+  else {
+    this.throwLoadImagesError(3);
+  }
+};
+
+$.Editable.prototype.loadImage = function (src, info) {
+  var img = new Image();
+  var $li = $('<div>').addClass('f-empty');
+  img.onload = $.proxy(function () {
+    var delete_msg = 'Delete';
+    if ($.Editable.LANGS[this.options.language]) {
+      delete_msg = $.Editable.LANGS[this.options.language].translation[delete_msg];
+    }
+
+    var $img = $('<img src="' + src + '"/>');
+    for (var k in info) {
+      $img.attr('data-' + k, info[k]);
+    }
+
+    $li.append($img).append('<span class="f-media-title">'+ info.title +'</span>');
+    $li.removeClass('f-empty');
+    this.$media_images.hide();
+    this.$media_images.show();
+    this.triggerEvent('imageLoaded', [src], false);
+  }, this);
+
+  img.onerror = $.proxy(function () {
+    $li.remove();
+    this.throwLoadImagesError(1);
+  }, this)
+
+  img.src = src;
+  this.$media_images.append($li);
+};

data/app/assets/javascripts/push_type/media_styles.js.coffee.erb

@@ -0,0 +1,5 @@
+$.Editable.DEFAULTS = $.extend $.Editable.DEFAULTS,
+  defaultImageWidth:  0
+  imageStyle:         true
+  mediaStyles:        [ 'original', <%= PushType.config.media_styles.map { |style, _| "'#{ style }'" }.join(', ') %> ]
+  fileLink:           true

data/app/assets/javascripts/push_type/wysiwyg.js.coffee

@@ -0,0 +1,50 @@
+# This is a manifest file that'll be compiled into application.js, which will include all the files
+# listed below.
+#
+# Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+# or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+#
+# It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+# compiled file.
+#
+# Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+# about supported directives.
+#
+#= require froala_editor.min
+#= require plugins/lists.min
+#= require plugins/file_upload.min
+#= require plugins/media_manager.min
+#= require plugins/video.min
+#= require jquery.simplePagination
+#= require_self
+#= require_tree .
+
+# jQuery init
+$(document).on 'ready page:load', ->
+
+  $('textarea.froala', '.wysiwyg').editable
+    inlineMode:       false
+    buttons:          ['bold', 'italic', 'underline', 'sep', 'formatBlock', 'align', 'insertOrderedList', 'insertUnorderedList', 'sep', 'createLink', 'insertImage', 'uploadFile', 'insertVideo', 'table', 'sep', 'removeFormat', 'undo', 'redo', 'sep' ,'html']
+    blockTags:
+      n:  'Normal'
+      h1: 'Heading 1'
+      h2: 'Heading 2'
+    height:             400
+    filesLoadURL:       '/push_type/wysiwyg_media'
+    filesLoadParams:    { filter: 'file' }
+    fileUploadURL:      '/push_type/wysiwyg_media'
+    fileUploadParam:    'asset[file]'
+    imagesLoadURL:      '/push_type/wysiwyg_media'
+    imagesLoadParams:   { filter: 'image' }
+    imageUploadURL:     '/push_type/wysiwyg_media'
+    imageUploadParam:   'asset[file]'
+    theme:              'pt'
+
+  $('textarea.froala', '.wysiwyg').on 'editable.focus', (e, editor) ->
+    editor.$box.addClass 'focus'
+
+  $('textarea.froala', '.wysiwyg').on 'editable.blur', (e, editor) ->
+    editor.$box.removeClass 'focus'
+
+  $('textarea.froala', '.wysiwyg').on 'editable.imageError', (e, editor, error) ->
+    alert error.message