You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
4.1 KiB
127 lines
4.1 KiB
/** |
|
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(); |
|
} |
|
}); |
|
|
|
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));
|
|
|