Showing
2 changed files
with
53 additions
and
50 deletions
| 1 | "use strict"; | 1 | "use strict"; |
| 2 | 2 | ||
| 3 | +/** | ||
| 4 | + * Handle pasting images from clipboard. | ||
| 5 | + * @param e - event | ||
| 6 | + * @param editor - editor instance | ||
| 7 | + */ | ||
| 3 | function editorPaste(e, editor) { | 8 | function editorPaste(e, editor) { |
| 4 | if (!e.clipboardData) return | 9 | if (!e.clipboardData) return |
| 5 | - var items = e.clipboardData.items; | 10 | + let items = e.clipboardData.items; |
| 6 | if (!items) return; | 11 | if (!items) return; |
| 7 | - for (var i = 0; i < items.length; i++) { | 12 | + for (let i = 0; i < items.length; i++) { |
| 8 | - if (items[i].type.indexOf("image") !== -1) { | 13 | + if (items[i].type.indexOf("image") === -1) return |
| 9 | - | 14 | + |
| 10 | - var file = items[i].getAsFile(); | 15 | + let file = items[i].getAsFile(); |
| 11 | - var formData = new FormData(); | 16 | + let formData = new FormData(); |
| 12 | - var ext = 'png'; | 17 | + let ext = 'png'; |
| 13 | - var xhr = new XMLHttpRequest(); | 18 | + let xhr = new XMLHttpRequest(); |
| 14 | - | 19 | + |
| 15 | - if (file.name) { | 20 | + if (file.name) { |
| 16 | - var fileNameMatches = file.name.match(/\.(.+)$/); | 21 | + let fileNameMatches = file.name.match(/\.(.+)$/); |
| 17 | - if (fileNameMatches) { | 22 | + if (fileNameMatches) { |
| 18 | - ext = fileNameMatches[1]; | 23 | + ext = fileNameMatches[1]; |
| 19 | - } | ||
| 20 | } | 24 | } |
| 21 | - | ||
| 22 | - var id = "image-" + Math.random().toString(16).slice(2); | ||
| 23 | - var loadingImage = window.baseUrl('/loading.gif'); | ||
| 24 | - editor.execCommand('mceInsertContent', false, '<img src="'+ loadingImage +'" id="' + id + '">'); | ||
| 25 | - | ||
| 26 | - var remoteFilename = "image-" + Date.now() + "." + ext; | ||
| 27 | - formData.append('file', file, remoteFilename); | ||
| 28 | - formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content')); | ||
| 29 | - | ||
| 30 | - xhr.open('POST', window.baseUrl('/images/gallery/upload')); | ||
| 31 | - xhr.onload = function () { | ||
| 32 | - if (xhr.status === 200 || xhr.status === 201) { | ||
| 33 | - var result = JSON.parse(xhr.responseText); | ||
| 34 | - editor.dom.setAttrib(id, 'src', result.thumbs.display); | ||
| 35 | - } else { | ||
| 36 | - console.log('An error occurred uploading the image'); | ||
| 37 | - console.log(xhr.responseText); | ||
| 38 | - editor.dom.remove(id); | ||
| 39 | - } | ||
| 40 | - }; | ||
| 41 | - xhr.send(formData); | ||
| 42 | } | 25 | } |
| 26 | + | ||
| 27 | + let id = "image-" + Math.random().toString(16).slice(2); | ||
| 28 | + let loadingImage = window.baseUrl('/loading.gif'); | ||
| 29 | + editor.execCommand('mceInsertContent', false, `<img src="${loadingImage}" id="${id}">`); | ||
| 30 | + | ||
| 31 | + let remoteFilename = "image-" + Date.now() + "." + ext; | ||
| 32 | + formData.append('file', file, remoteFilename); | ||
| 33 | + formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content')); | ||
| 34 | + | ||
| 35 | + xhr.open('POST', window.baseUrl('/images/gallery/upload')); | ||
| 36 | + xhr.onload = function () { | ||
| 37 | + if (xhr.status === 200 || xhr.status === 201) { | ||
| 38 | + let result = JSON.parse(xhr.responseText); | ||
| 39 | + editor.dom.setAttrib(id, 'src', result.thumbs.display); | ||
| 40 | + } else { | ||
| 41 | + console.log('An error occurred uploading the image', xhr.responseText); | ||
| 42 | + editor.dom.remove(id); | ||
| 43 | + } | ||
| 44 | + }; | ||
| 45 | + xhr.send(formData); | ||
| 46 | + | ||
| 43 | } | 47 | } |
| 44 | } | 48 | } |
| 45 | 49 | ||
| ... | @@ -101,7 +105,7 @@ var mceOptions = module.exports = { | ... | @@ -101,7 +105,7 @@ var mceOptions = module.exports = { |
| 101 | 105 | ||
| 102 | if (type === 'file') { | 106 | if (type === 'file') { |
| 103 | window.showEntityLinkSelector(function(entity) { | 107 | window.showEntityLinkSelector(function(entity) { |
| 104 | - var originalField = win.document.getElementById(field_name); | 108 | + let originalField = win.document.getElementById(field_name); |
| 105 | originalField.value = entity.link; | 109 | originalField.value = entity.link; |
| 106 | $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name); | 110 | $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name); |
| 107 | }); | 111 | }); |
| ... | @@ -115,7 +119,7 @@ var mceOptions = module.exports = { | ... | @@ -115,7 +119,7 @@ var mceOptions = module.exports = { |
| 115 | // to ensure the new value sticks | 119 | // to ensure the new value sticks |
| 116 | win.document.getElementById(field_name).value = image.url; | 120 | win.document.getElementById(field_name).value = image.url; |
| 117 | if ("createEvent" in document) { | 121 | if ("createEvent" in document) { |
| 118 | - var evt = document.createEvent("HTMLEvents"); | 122 | + let evt = document.createEvent("HTMLEvents"); |
| 119 | evt.initEvent("change", false, true); | 123 | evt.initEvent("change", false, true); |
| 120 | win.document.getElementById(field_name).dispatchEvent(evt); | 124 | win.document.getElementById(field_name).dispatchEvent(evt); |
| 121 | } else { | 125 | } else { |
| ... | @@ -123,8 +127,8 @@ var mceOptions = module.exports = { | ... | @@ -123,8 +127,8 @@ var mceOptions = module.exports = { |
| 123 | } | 127 | } |
| 124 | 128 | ||
| 125 | // Replace the actively selected content with the linked image | 129 | // Replace the actively selected content with the linked image |
| 126 | - var html = '<a href="' + image.url + '" target="_blank">'; | 130 | + let html = `<a href="${image.url}" target="_blank">`; |
| 127 | - html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">'; | 131 | + html += `<img src="${image.thumbs.display}" alt="${image.name}">`; |
| 128 | html += '</a>'; | 132 | html += '</a>'; |
| 129 | win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html); | 133 | win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html); |
| 130 | }); | 134 | }); |
| ... | @@ -132,7 +136,7 @@ var mceOptions = module.exports = { | ... | @@ -132,7 +136,7 @@ var mceOptions = module.exports = { |
| 132 | 136 | ||
| 133 | }, | 137 | }, |
| 134 | paste_preprocess: function (plugin, args) { | 138 | paste_preprocess: function (plugin, args) { |
| 135 | - var content = args.content; | 139 | + let content = args.content; |
| 136 | if (content.indexOf('<img src="file://') !== -1) { | 140 | if (content.indexOf('<img src="file://') !== -1) { |
| 137 | args.content = ''; | 141 | args.content = ''; |
| 138 | } | 142 | } |
| ... | @@ -142,7 +146,7 @@ var mceOptions = module.exports = { | ... | @@ -142,7 +146,7 @@ var mceOptions = module.exports = { |
| 142 | 146 | ||
| 143 | // Run additional setup actions | 147 | // Run additional setup actions |
| 144 | // Used by the angular side of things | 148 | // Used by the angular side of things |
| 145 | - for (var i = 0; i < mceOptions.extraSetups.length; i++) { | 149 | + for (let i = 0; i < mceOptions.extraSetups.length; i++) { |
| 146 | mceOptions.extraSetups[i](editor); | 150 | mceOptions.extraSetups[i](editor); |
| 147 | } | 151 | } |
| 148 | 152 | ||
| ... | @@ -158,12 +162,11 @@ var mceOptions = module.exports = { | ... | @@ -158,12 +162,11 @@ var mceOptions = module.exports = { |
| 158 | editor.on('dragstart', function () { | 162 | editor.on('dragstart', function () { |
| 159 | var node = editor.selection.getNode(); | 163 | var node = editor.selection.getNode(); |
| 160 | 164 | ||
| 161 | - if (node.nodeName === 'IMG') { | 165 | + if (node.nodeName !== 'IMG') return; |
| 162 | - wrap = editor.dom.getParent(node, '.mceTemp'); | 166 | + wrap = editor.dom.getParent(node, '.mceTemp'); |
| 163 | 167 | ||
| 164 | - if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) { | 168 | + if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) { |
| 165 | - wrap = node.parentNode; | 169 | + wrap = node.parentNode; |
| 166 | - } | ||
| 167 | } | 170 | } |
| 168 | }); | 171 | }); |
| 169 | 172 | ||
| ... | @@ -188,15 +191,15 @@ var mceOptions = module.exports = { | ... | @@ -188,15 +191,15 @@ var mceOptions = module.exports = { |
| 188 | }); | 191 | }); |
| 189 | })(); | 192 | })(); |
| 190 | 193 | ||
| 191 | - // Image picker button | 194 | + // Custom Image picker button |
| 192 | editor.addButton('image-insert', { | 195 | editor.addButton('image-insert', { |
| 193 | title: 'My title', | 196 | title: 'My title', |
| 194 | icon: 'image', | 197 | icon: 'image', |
| 195 | tooltip: 'Insert an image', | 198 | tooltip: 'Insert an image', |
| 196 | onclick: function () { | 199 | onclick: function () { |
| 197 | window.ImageManager.showExternal(function (image) { | 200 | window.ImageManager.showExternal(function (image) { |
| 198 | - var html = '<a href="' + image.url + '" target="_blank">'; | 201 | + let html = `<a href="${image.url}" target="_blank">`; |
| 199 | - html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">'; | 202 | + html += `<img src="${image.thumbs.display}" alt="${image.name}">`; |
| 200 | html += '</a>'; | 203 | html += '</a>'; |
| 201 | editor.execCommand('mceInsertContent', false, html); | 204 | editor.execCommand('mceInsertContent', false, html); |
| 202 | }); | 205 | }); | ... | ... |
| ... | @@ -248,7 +248,7 @@ | ... | @@ -248,7 +248,7 @@ |
| 248 | } | 248 | } |
| 249 | 249 | ||
| 250 | .tag-display { | 250 | .tag-display { |
| 251 | - margin: $-xl $-xs; | 251 | + margin: $-xl $-m; |
| 252 | border: 1px solid #DDD; | 252 | border: 1px solid #DDD; |
| 253 | min-width: 180px; | 253 | min-width: 180px; |
| 254 | max-width: 320px; | 254 | max-width: 320px; | ... | ... |
-
Please register or sign in to post a comment