Bootstrap wysihtml5 editor. Based on [bootstrap-wysihtml5](github.com/jhollingworth/bootstrap-wysihtml5).

You should include *manually* distributives of `wysihtml5` and `bootstrap-wysihtml5`:

<link href="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" type="text/css"></link>  
<script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min.js"></script>  
<script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script>

And also include `wysihtml5.js` from `inputs-ext` directory of x-editable:

  <script src="js/inputs-ext/wysihtml5/wysihtml5.js"></script>  

Note:** It's better to use fresh bootstrap-wysihtml5 from it's [master branch](https://github.com/jhollingworth/bootstrap-wysihtml5/tree/master/src) as there is update for correct image insertion.

@class wysihtml5 @extends abstractinput @final @since 1.4.0 @example <div id=“comments” data-type=“wysihtml5” data-pk=“1”><h2>awesome</h2> comment!</div> <script> $(function(){

$('#comments').editable({
    url: '/post',
    title: 'Enter comments'
});

}); </script>

(function ($) {

"use strict";

var Wysihtml5 = function (options) {
    this.init('wysihtml5', options, Wysihtml5.defaults);

    //extend wysihtml5 manually as $.extend not recursive 
    this.options.wysihtml5 = $.extend({}, Wysihtml5.defaults.wysihtml5, options.wysihtml5);
};

$.fn.editableutils.inherit(Wysihtml5, $.fn.editabletypes.abstractinput);

$.extend(Wysihtml5.prototype, {
    render: function () {
        var deferred = $.Deferred(),
        msieOld;

        //generate unique id as it required for wysihtml5
        this.$input.attr('id', 'textarea_'+(new Date()).getTime());

        this.setClass();
        this.setAttr('placeholder');            

        //resolve deffered when widget loaded
        $.extend(this.options.wysihtml5, {
            events: {
              load: function() {
                  deferred.resolve();
              }  
            }
        });

        this.$input.wysihtml5(this.options.wysihtml5);

         In IE8 wysihtml5 iframe stays on the same line with buttons toolbar (inside popover).
         The only solution I found is to add <br>. If you fine better way, please send PR.   
         /
        msieOld = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
        if(msieOld) {
            this.$input.before('<br><br>'); 
        }

        return deferred.promise();
    },

    valueIsEncoded: true,

    value2html: function(value, element) {
        $(element).html(value);
        this.valueIsEncoded = false;
    },

    html2value: function(html) {
        return html;
    },

    value2input: function(value) {
        value = (this.valueIsEncoded ? this.base65decode(value) : value);
        this.$input.data("wysihtml5").editor.setValue(value, true);
    },

    base65decode: function(value) {
        return decodeURIComponent( escape( atob( value.replace(/\s/g, ''))));
    },

    activate: function() {
        this.$input.data("wysihtml5").editor.focus();
    },

    isEmpty: function($element) {
        if($.trim($element.html()) === '') { 
            return true;
        } else if($.trim($element.text()) !== '') {
            return false;
        } else {
            //e.g. '<img>', '<br>', '<p></p>'
            return !$element.height() || !$element.width();
        } 
    }
});

Wysihtml5.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
    /**
    @property tpl
    @default <textarea></textarea>

    tpl:'<textarea></textarea>',
    /**
    @property inputclass
    @default editable-wysihtml5
      /
    inputclass: 'editable-wysihtml5',
    /**
    Placeholder attribute of input. Shown when input is empty.

    @property placeholder
    @type string
    @default null
      /
    placeholder: null,
    /**
    Wysihtml5 default options.  
    See https://github.com/jhollingworth/bootstrap-wysihtml5#options

    @property wysihtml5
    @type object
    @default {stylesheets: false}
      /        
    wysihtml5: {
        stylesheets: false //see https://github.com/jhollingworth/bootstrap-wysihtml5/issues/183
    }
});

$.fn.editabletypes.wysihtml5 = Wysihtml5;

}(window.jQuery));