6 var readFileIntoDataUrl =
function (fileInfo) {
7 var loader = $.Deferred(),
8 fReader =
new FileReader();
9 fReader.onload =
function (e) {
10 loader.resolve(e.target.result);
12 fReader.onerror = loader.reject;
13 fReader.onprogress = loader.notify;
14 fReader.readAsDataURL(fileInfo);
15 return loader.promise();
17 $.fn.cleanHtml =
function () {
18 var html = $(
this).html();
19 return html && html.replace(/(<br>|\s|<div><br><\/div>| )*$/,
'');
21 $.fn.wysiwyg =
function (userOptions) {
26 updateToolbar =
function () {
27 if (options.activeToolbarClass) {
28 $(options.toolbarSelector).find(toolbarBtnSelector).each(
function () {
29 var command = $(
this).data(options.commandRole);
30 if (document.queryCommandState(command)) {
31 $(
this).addClass(options.activeToolbarClass);
33 $(
this).removeClass(options.activeToolbarClass);
38 execCommand =
function (commandWithArgs, valueArg) {
39 var commandArr = commandWithArgs.split(
' '),
40 command = commandArr.shift(),
41 args = commandArr.join(
' ') + (valueArg ||
'');
42 document.execCommand(command, 0, args);
45 bindHotkeys =
function (hotKeys) {
46 $.each(hotKeys,
function (hotkey, command) {
47 editor.keydown(hotkey,
function (e) {
48 if (editor.attr(
'contenteditable') && editor.is(
':visible')) {
53 }).keyup(hotkey,
function (e) {
54 if (editor.attr(
'contenteditable') && editor.is(
':visible')) {
61 getCurrentRange =
function () {
62 var sel = window.getSelection();
63 if (sel.getRangeAt && sel.rangeCount) {
64 return sel.getRangeAt(0);
67 saveSelection =
function () {
68 selectedRange = getCurrentRange();
70 restoreSelection =
function () {
71 var selection = window.getSelection();
74 selection.removeAllRanges();
76 document.body.createTextRange().select();
77 document.selection.empty();
80 selection.addRange(selectedRange);
83 insertFiles =
function (files) {
85 $.each(files,
function (idx, fileInfo) {
87 $.when(readFileIntoDataUrl(fileInfo)).done(
function (dataUrl) {
88 execCommand(
'insertimage', dataUrl);
89 }).fail(
function (e) {
90 options.fileUploadError(
"file-reader", e);
93 options.fileUploadError(
"unsupported-file-type", fileInfo.type);
97 markSelection =
function (input, color) {
99 if (document.queryCommandSupported(
'hiliteColor')) {
100 document.execCommand(
'hiliteColor', 0, color ||
'transparent');
103 input.data(options.selectionMarker, color);
105 bindToolbar =
function (toolbar, options) {
106 toolbar.find(toolbarBtnSelector).click(
function () {
109 execCommand($(
this).data(options.commandRole));
112 toolbar.find(
'[data-toggle=dropdown]').click(restoreSelection);
114 toolbar.find(
'input[type=text][data-' + options.commandRole +
']').on(
'webkitspeechchange change',
function () {
115 var newValue = this.value;
120 execCommand($(
this).data(options.commandRole), newValue);
123 }).on(
'focus',
function () {
125 if (!input.data(options.selectionMarker)) {
126 markSelection(input, options.selectionColor);
129 }).on(
'blur',
function () {
131 if (input.data(options.selectionMarker)) {
132 markSelection(input,
false);
135 toolbar.find(
'input[type=file][data-' + options.commandRole +
']').change(
function () {
137 if (this.type ===
'file' && this.files && this.files.length > 0) {
138 insertFiles(this.files);
144 initFileDrops =
function () {
145 editor.on(
'dragenter dragover',
false)
146 .on(
'drop',
function (e) {
147 var dataTransfer = e.originalEvent.dataTransfer;
150 if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
151 insertFiles(dataTransfer.files);
155 options = $.extend({}, $.fn.wysiwyg.defaults, userOptions);
156 toolbarBtnSelector =
'a[data-' + options.commandRole +
'],button[data-' + options.commandRole +
'],input[type=button][data-' + options.commandRole +
']';
157 bindHotkeys(options.hotKeys);
158 if (options.dragAndDropImages) {
161 bindToolbar($(options.toolbarSelector), options);
162 editor.attr(
'contenteditable',
true)
163 .on(
'mouseup keyup mouseout',
function () {
167 $(window).bind(
'touchend',
function (e) {
168 var isInside = (editor.is(e.target) || editor.has(e.target).length > 0),
169 currentRange = getCurrentRange(),
170 clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset);
171 if (!clear || isInside) {
178 $.fn.wysiwyg.defaults = {
180 'ctrl+b meta+b':
'bold',
181 'ctrl+i meta+i':
'italic',
182 'ctrl+u meta+u':
'underline',
183 'ctrl+z meta+z':
'undo',
184 'ctrl+y meta+y meta+shift+z':
'redo',
185 'ctrl+l meta+l':
'justifyleft',
186 'ctrl+r meta+r':
'justifyright',
187 'ctrl+e meta+e':
'justifycenter',
188 'ctrl+j meta+j':
'justifyfull',
189 'shift+tab':
'outdent',
192 toolbarSelector:
'[data-role=editor-toolbar]',
194 activeToolbarClass:
'btn-info',
195 selectionMarker:
'edit-focus-marker',
196 selectionColor:
'darkgrey',
197 dragAndDropImages:
true,
198 fileUploadError:
function (reason, detail) { console.log(
"File upload error", reason, detail); }