wysihtml5.js
4.07 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
/**
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));