Dan Brown

Added WYSIWYG editor shortcuts

1 +"use strict";
2 +
3 +function editorPaste(e) {
4 + if (!e.clipboardData) return
5 + var items = e.clipboardData.items;
6 + if (!items) return;
7 + for (var i = 0; i < items.length; i++) {
8 + if (items[i].type.indexOf("image") !== -1) {
9 +
10 + var file = items[i].getAsFile();
11 + var formData = new FormData();
12 + var ext = 'png';
13 + var xhr = new XMLHttpRequest();
14 +
15 + if (file.name) {
16 + var fileNameMatches = file.name.match(/\.(.+)$/);
17 + if (fileNameMatches) {
18 + ext = fileNameMatches[1];
19 + }
20 + }
21 +
22 + var id = "image-" + Math.random().toString(16).slice(2);
23 + editor.execCommand('mceInsertContent', false, '<img src="/loading.gif" id="' + id + '">');
24 +
25 + var remoteFilename = "image-" + Date.now() + "." + ext;
26 + formData.append('file', file, remoteFilename);
27 + formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
28 +
29 + xhr.open('POST', '/images/gallery/upload');
30 + xhr.onload = function () {
31 + if (xhr.status === 200 || xhr.status === 201) {
32 + var result = JSON.parse(xhr.responseText);
33 + editor.dom.setAttrib(id, 'src', result.url);
34 + } else {
35 + console.log('An error occured uploading the image');
36 + console.log(xhr.responseText);
37 + editor.dom.remove(id);
38 + }
39 + };
40 + xhr.send(formData);
41 + }
42 + }
43 +}
44 +
45 +function registerEditorShortcuts(editor) {
46 + // Headers
47 + for (let i = 1; i < 5; i++) {
48 + editor.addShortcut('ctrl+' + i, '', ['FormatBlock', false, 'h' + i]);
49 + }
50 +
51 + // Other block shortcuts
52 + editor.addShortcut('ctrl+q', '', ['FormatBlock', false, 'blockquote']);
53 + editor.addShortcut('ctrl+d', '', ['FormatBlock', false, 'p']);
54 + editor.addShortcut('ctrl+e', '', ['FormatBlock', false, 'pre']);
55 + editor.addShortcut('ctrl+s', '', ['FormatBlock', false, 'code']);
56 +}
57 +
1 var mceOptions = module.exports = { 58 var mceOptions = module.exports = {
2 selector: '#html-editor', 59 selector: '#html-editor',
3 content_css: [ 60 content_css: [
...@@ -66,6 +123,8 @@ var mceOptions = module.exports = { ...@@ -66,6 +123,8 @@ var mceOptions = module.exports = {
66 mceOptions.extraSetups[i](editor); 123 mceOptions.extraSetups[i](editor);
67 } 124 }
68 125
126 + registerEditorShortcuts(editor);
127 +
69 (function () { 128 (function () {
70 var wrap; 129 var wrap;
71 130
...@@ -122,49 +181,6 @@ var mceOptions = module.exports = { ...@@ -122,49 +181,6 @@ var mceOptions = module.exports = {
122 }); 181 });
123 182
124 // Paste image-uploads 183 // Paste image-uploads
125 - editor.on('paste', function (e) { 184 + editor.on('paste', editorPaste);
126 - if (e.clipboardData) {
127 - var items = e.clipboardData.items;
128 - if (items) {
129 - for (var i = 0; i < items.length; i++) {
130 - if (items[i].type.indexOf("image") !== -1) {
131 -
132 - var file = items[i].getAsFile();
133 - var formData = new FormData();
134 - var ext = 'png';
135 - var xhr = new XMLHttpRequest();
136 -
137 - if (file.name) {
138 - var fileNameMatches = file.name.match(/\.(.+)$/);
139 - if (fileNameMatches) {
140 - ext = fileNameMatches[1];
141 - }
142 - }
143 -
144 - var id = "image-" + Math.random().toString(16).slice(2);
145 - editor.execCommand('mceInsertContent', false, '<img src="/loading.gif" id="' + id + '">');
146 -
147 - var remoteFilename = "image-" + Date.now() + "." + ext;
148 - formData.append('file', file, remoteFilename);
149 - formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
150 -
151 - xhr.open('POST', '/images/gallery/upload');
152 - xhr.onload = function () {
153 - if (xhr.status === 200 || xhr.status === 201) {
154 - var result = JSON.parse(xhr.responseText);
155 - editor.dom.setAttrib(id, 'src', result.url);
156 - } else {
157 - console.log('An error occured uploading the image');
158 - console.log(xhr.responseText);
159 - editor.dom.remove(id);
160 - }
161 - };
162 - xhr.send(formData);
163 - }
164 - }
165 - }
166 -
167 - }
168 - });
169 } 185 }
170 }; 186 };
...\ No newline at end of file ...\ No newline at end of file
......