123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- /**
- 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));
|