wysihtml5.js
4.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
/**
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));