wysihtml5.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. /**
  2. Bootstrap wysihtml5 editor. Based on [bootstrap-wysihtml5](https://github.com/jhollingworth/bootstrap-wysihtml5).
  3. You should include **manually** distributives of `wysihtml5` and `bootstrap-wysihtml5`:
  4. <link href="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" type="text/css"></link>
  5. <script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min.js"></script>
  6. <script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script>
  7. And also include `wysihtml5.js` from `inputs-ext` directory of x-editable:
  8. <script src="js/inputs-ext/wysihtml5/wysihtml5.js"></script>
  9. **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.
  10. @class wysihtml5
  11. @extends abstractinput
  12. @final
  13. @since 1.4.0
  14. @example
  15. <div id="comments" data-type="wysihtml5" data-pk="1"><h2>awesome</h2> comment!</div>
  16. <script>
  17. $(function(){
  18. $('#comments').editable({
  19. url: '/post',
  20. title: 'Enter comments'
  21. });
  22. });
  23. </script>
  24. **/
  25. (function ($) {
  26. "use strict";
  27. var Wysihtml5 = function (options) {
  28. this.init('wysihtml5', options, Wysihtml5.defaults);
  29. //extend wysihtml5 manually as $.extend not recursive
  30. this.options.wysihtml5 = $.extend({}, Wysihtml5.defaults.wysihtml5, options.wysihtml5);
  31. };
  32. $.fn.editableutils.inherit(Wysihtml5, $.fn.editabletypes.abstractinput);
  33. $.extend(Wysihtml5.prototype, {
  34. render: function () {
  35. var deferred = $.Deferred(),
  36. msieOld;
  37. //generate unique id as it required for wysihtml5
  38. this.$input.attr('id', 'textarea_'+(new Date()).getTime());
  39. this.setClass();
  40. this.setAttr('placeholder');
  41. //resolve deffered when widget loaded
  42. $.extend(this.options.wysihtml5, {
  43. events: {
  44. load: function() {
  45. deferred.resolve();
  46. }
  47. }
  48. });
  49. this.$input.wysihtml5(this.options.wysihtml5);
  50. /*
  51. In IE8 wysihtml5 iframe stays on the same line with buttons toolbar (inside popover).
  52. The only solution I found is to add <br>. If you fine better way, please send PR.
  53. */
  54. msieOld = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
  55. if(msieOld) {
  56. this.$input.before('<br><br>');
  57. }
  58. return deferred.promise();
  59. },
  60. value2html: function(value, element) {
  61. $(element).html(value);
  62. },
  63. html2value: function(html) {
  64. return html;
  65. },
  66. value2input: function(value) {
  67. this.$input.data("wysihtml5").editor.setValue(value, true);
  68. },
  69. activate: function() {
  70. this.$input.data("wysihtml5").editor.focus();
  71. },
  72. isEmpty: function($element) {
  73. if($.trim($element.html()) === '') {
  74. return true;
  75. } else if($.trim($element.text()) !== '') {
  76. return false;
  77. } else {
  78. //e.g. '<img>', '<br>', '<p></p>'
  79. return !$element.height() || !$element.width();
  80. }
  81. }
  82. });
  83. Wysihtml5.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
  84. /**
  85. @property tpl
  86. @default <textarea></textarea>
  87. **/
  88. tpl:'<textarea></textarea>',
  89. /**
  90. @property inputclass
  91. @default editable-wysihtml5
  92. **/
  93. inputclass: 'editable-wysihtml5',
  94. /**
  95. Placeholder attribute of input. Shown when input is empty.
  96. @property placeholder
  97. @type string
  98. @default null
  99. **/
  100. placeholder: null,
  101. /**
  102. Wysihtml5 default options.
  103. See https://github.com/jhollingworth/bootstrap-wysihtml5#options
  104. @property wysihtml5
  105. @type object
  106. @default {stylesheets: false}
  107. **/
  108. wysihtml5: {
  109. stylesheets: false //see https://github.com/jhollingworth/bootstrap-wysihtml5/issues/183
  110. }
  111. });
  112. $.fn.editabletypes.wysihtml5 = Wysihtml5;
  113. }(window.jQuery));