| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /* http://github.com/mindmup/bootstrap-wysiwyg */ |
| A | 2 | /*global jQuery, $, FileReader*/ |
| 3 | /*jslint browser:true*/ | |
| 4 | (function ($) { | |
| 5 | 'use strict'; | |
| 6 | var readFileIntoDataUrl = function (fileInfo) { | |
| 7 | var loader = $.Deferred(), | |
| 8 | fReader = new FileReader(); | |
| 9 | fReader.onload = function (e) { | |
| 10 | loader.resolve(e.target.result); | |
| 11 | }; | |
| 12 | fReader.onerror = loader.reject; | |
| 13 | fReader.onprogress = loader.notify; | |
| 14 | fReader.readAsDataURL(fileInfo); | |
| 15 | return loader.promise(); | |
| 16 | }; | |
| 17 | $.fn.cleanHtml = function () { | |
| 18 | var html = $(this).html(); | |
| 19 | return html && html.replace(/(<br>|\s|<div><br><\/div>| )*$/, ''); | |
| 20 | }; | |
| 21 | $.fn.wysiwyg = function (userOptions) { | |
| 22 | var editor = this, | |
| 23 | selectedRange, | |
| 24 | options, | |
| 25 | toolbarBtnSelector, | |
| 26 | updateToolbar = function () { | |
| 27 | if (options.activeToolbarClass) { | |
| 28 | $(options.toolbarSelector).find(toolbarBtnSelector).each(function () { | |
| 29 | try { | |
| 30 | var command = $(this).data(options.commandRole); | |
| 31 | if (document.queryCommandState(command)) { | |
| 32 | $(this).addClass(options.activeToolbarClass); | |
| 33 | } else { | |
| 34 | $(this).removeClass(options.activeToolbarClass); | |
| 35 | } | |
| 36 | } catch(e){} | |
| 37 | }); | |
| 38 | } | |
| 39 | }, | |
| 40 | execCommand = function (commandWithArgs, valueArg) { | |
| 41 | var commandArr = commandWithArgs.split(' '), | |
| 42 | command = commandArr.shift(), | |
| 43 | args = commandArr.join(' ') + (valueArg || ''); | |
| 44 | document.execCommand(command, 0, args); | |
| 45 | updateToolbar(); | |
| 46 | }, | |
| 47 | bindHotkeys = function (hotKeys) { | |
| 48 | $.each(hotKeys, function (hotkey, command) { | |
| 49 | editor.keydown(hotkey, function (e) { | |
| 50 | if (editor.attr('contenteditable') && editor.is(':visible')) { | |
| 51 | e.preventDefault(); | |
| 52 | e.stopPropagation(); | |
| 53 | execCommand(command); | |
| 54 | } | |
| 55 | }).keyup(hotkey, function (e) { | |
| 56 | if (editor.attr('contenteditable') && editor.is(':visible')) { | |
| 57 | e.preventDefault(); | |
| 58 | e.stopPropagation(); | |
| 59 | } | |
| 60 | }); | |
| 61 | }); | |
| 62 | }, | |
| 63 | getCurrentRange = function () { | |
| 64 | try { | |
| 65 | var sel = window.getSelection(); | |
| 66 | if (sel.getRangeAt && sel.rangeCount) { | |
| 67 | return sel.getRangeAt(0); | |
| 68 | } | |
| 69 | } catch(e){} | |
| 70 | }, | |
| 71 | saveSelection = function () { | |
| 72 | selectedRange = getCurrentRange(); | |
| 73 | }, | |
| 74 | restoreSelection = function () { | |
| 75 | try { | |
| 76 | var selection = window.getSelection(); | |
| 77 | if (selectedRange) { | |
| 78 | try { | |
| 79 | selection.removeAllRanges(); | |
| 80 | } catch (ex) { | |
| 81 | document.body.createTextRange().select(); | |
| 82 | document.selection.empty(); | |
| 83 | } | |
| 84 | ||
| 85 | selection.addRange(selectedRange); | |
| 86 | } | |
| 87 | } catch(e){} | |
| 88 | }, | |
| 89 | insertFiles = function (files) { | |
| 90 | editor.focus(); | |
| 91 | $.each(files, function (idx, fileInfo) { | |
| 92 | if (/^image\//.test(fileInfo.type)) { | |
| 93 | $.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) { | |
| 94 | execCommand('insertimage', dataUrl); | |
| 95 | }).fail(function (e) { | |
| 96 | options.fileUploadError("file-reader", e); | |
| 97 | }); | |
| 98 | } else { | |
| 99 | options.fileUploadError("unsupported-file-type", fileInfo.type); | |
| 100 | } | |
| 101 | }); | |
| 102 | }, | |
| 103 | markSelection = function (input, color) { | |
| 104 | restoreSelection(); | |
| 105 | if (document.queryCommandSupported('hiliteColor')) { | |
| 106 | document.execCommand('hiliteColor', 0, color || 'transparent'); | |
| 107 | } | |
| 108 | saveSelection(); | |
| 109 | input.data(options.selectionMarker, color); | |
| 110 | }, | |
| 111 | bindToolbar = function (toolbar, options) { | |
| 112 | toolbar.find(toolbarBtnSelector).click(function () { | |
| 113 | restoreSelection(); | |
| 114 | editor.focus(); | |
| 115 | execCommand($(this).data(options.commandRole)); | |
| 116 | saveSelection(); | |
| 117 | }); | |
| 118 | toolbar.find('[data-toggle=dropdown]').click(restoreSelection); | |
| 119 | ||
| 120 | ||
| 121 | //ACE | |
| 122 | //ie 9-11 | |
| 123 | var is_ie = !!window.navigator.msPointerEnabled || (!!document.all && !!document.addEventListener); | |
| 124 | ||
| 125 | toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function () { | |
| 126 | var newValue = this.value; /* ugly but prevents fake double-calls due to selection restoration */ | |
| 127 | this.value = ''; | |
| 128 | restoreSelection(); | |
| 129 | if (newValue) { | |
| 130 | editor.focus(); | |
| 131 | execCommand($(this).data(options.commandRole), newValue); | |
| 132 | } | |
| 133 | saveSelection(); | |
| 134 | }).on('focus', function () { | |
| 135 | //if IE return, not needed | |
| 136 | if(is_ie) return;//ACE | |
| 137 | ||
| 138 | var input = $(this); | |
| 139 | if (!input.data(options.selectionMarker)) { | |
| 140 | markSelection(input, options.selectionColor); | |
| 141 | input.focus(); | |
| 142 | } | |
| 143 | }).on('blur', function () { | |
| 144 | //if IE return, not needed | |
| 145 | if(is_ie) return;//ACE | |
| 146 | ||
| 147 | var input = $(this); | |
| 148 | if (input.data(options.selectionMarker)) { | |
| 149 | markSelection(input, false); | |
| 150 | } | |
| 151 | }); | |
| 152 | toolbar.find('input[type=file][data-' + options.commandRole + ']').change(function () { | |
| 153 | restoreSelection(); | |
| 154 | if (this.type === 'file' && this.files && this.files.length > 0) { | |
| 155 | insertFiles(this.files); | |
| 156 | } | |
| 157 | saveSelection(); | |
| 158 | this.value = ''; | |
| 159 | }); | |
| 160 | }, | |
| 161 | initFileDrops = function () { | |
| 162 | editor.on('dragenter dragover', false) | |
| 163 | .on('drop', function (e) { | |
| 164 | var dataTransfer = e.originalEvent.dataTransfer; | |
| 165 | e.stopPropagation(); | |
| 166 | e.preventDefault(); | |
| 167 | if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) { | |
| 168 | insertFiles(dataTransfer.files); | |
| 169 | } | |
| 170 | }); | |
| 171 | }; | |
| 172 | options = $.extend({}, $.fn.wysiwyg.defaults, userOptions); | |
| 173 | toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']'; | |
| 174 | bindHotkeys(options.hotKeys); | |
| 175 | if (options.dragAndDropImages) { | |
| 176 | initFileDrops(); | |
| 177 | } | |
| 178 | bindToolbar($(options.toolbarSelector), options); | |
| 179 | editor.attr('contenteditable', true) | |
| 180 | .on('mouseup keyup mouseout', function () { | |
| 181 | saveSelection(); | |
| 182 | updateToolbar(); | |
| 183 | }); | |
| 184 | $(window).bind('touchend', function (e) { | |
| 185 | var isInside = (editor.is(e.target) || editor.has(e.target).length > 0), | |
| 186 | currentRange = getCurrentRange(), | |
| 187 | clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset); | |
| 188 | if (!clear || isInside) { | |
| 189 | saveSelection(); | |
| 190 | updateToolbar(); | |
| 191 | } | |
| 192 | }); | |
| 193 | return this; | |
| 194 | }; | |
| 195 | $.fn.wysiwyg.defaults = { | |
| 196 | hotKeys: { | |
| 197 | 'ctrl+b meta+b': 'bold', | |
| 198 | 'ctrl+i meta+i': 'italic', | |
| 199 | 'ctrl+u meta+u': 'underline', | |
| 200 | 'ctrl+z meta+z': 'undo', | |
| 201 | 'ctrl+y meta+y meta+shift+z': 'redo', | |
| 202 | 'ctrl+l meta+l': 'justifyleft', | |
| 203 | 'ctrl+r meta+r': 'justifyright', | |
| 204 | 'ctrl+e meta+e': 'justifycenter', | |
| 205 | 'ctrl+j meta+j': 'justifyfull', | |
| 206 | 'shift+tab': 'outdent', | |
| 207 | 'tab': 'indent' | |
| 208 | }, | |
| 209 | toolbarSelector: '[data-role=editor-toolbar]', | |
| 210 | commandRole: 'edit', | |
| 211 | activeToolbarClass: 'btn-info', | |
| 212 | selectionMarker: 'edit-focus-marker', | |
| 213 | selectionColor: 'darkgrey', | |
| 214 | dragAndDropImages: true, | |
| 215 | fileUploadError: function (reason, detail) { console.log("File upload error", reason, detail); } | |
| 216 | }; | |
| 217 | }(window.jQuery)); | |
