141 lines
4.4 KiB
JavaScript
141 lines
4.4 KiB
JavaScript
/**
|
|
Bootstrap wysihtml5 editor. Based on [bootstrap-wysihtml5](https://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();
|
|
},
|
|
|
|
value2html: function(value, element) {
|
|
$(element).html(value);
|
|
},
|
|
|
|
html2value: function(html) {
|
|
return html;
|
|
},
|
|
|
|
value2input: function(value) {
|
|
this.$input.data("wysihtml5").editor.setValue(value, true);
|
|
},
|
|
|
|
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));
|
|
|