• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/* @file
2 * Copyright (c) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16var RICH_EDITOR = {};
17
18RICH_EDITOR.editor = document.getElementById('editorjs');
19
20RICH_EDITOR.setHtml = function (contents) {
21    var base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
22    if (base64regex.test(contents)) {
23        RICH_EDITOR.editor.innerHTML = decodeURIComponent(escape(atob(contents)));
24    } else {
25        RICH_EDITOR.editor.innerHTML = contents;
26    }
27};
28
29RICH_EDITOR.getHtml = function () {
30    return RICH_EDITOR.editor.innerHTML;
31};
32
33RICH_EDITOR.undo = function () {
34    document.execCommand('undo', false, null);
35};
36
37RICH_EDITOR.redo = function () {
38    document.execCommand('redo', false, null);
39};
40
41RICH_EDITOR.setBold = function () {
42    document.execCommand('bold');
43};
44
45RICH_EDITOR.setItalic = function () {
46    document.execCommand('italic', false, null);
47};
48
49RICH_EDITOR.setSubscript = function () {
50    document.execCommand('subscript', false, null);
51};
52
53RICH_EDITOR.setSuperscript = function () {
54    document.execCommand('superscript', false, null);
55};
56
57RICH_EDITOR.setStrikeThrough = function () {
58    document.execCommand('strikeThrough', false, null);
59};
60
61RICH_EDITOR.setUnderline = function () {
62    document.execCommand('underline', false, null);
63};
64
65RICH_EDITOR.getListStyle = function () {
66    var selection;
67    var type;
68    if (window.getSelection) {
69        selection = getSelection();
70    }
71    if (!selection) {
72        return
73    }
74    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
75    try {
76        var child = range.commonAncestorContainer;
77        for (var i = 0; i < 10; i++) {
78            if (child.nodeName === 'OL') {
79                console.info('insertOrderedList');
80                document.execCommand('insertOrderedList', false, null);
81                return child.style['list-style'];
82            }
83            if (child.nodeName === 'UL') {
84                console.info('insertUnorderedList');
85                document.execCommand('insertUnorderedList', false, null);
86                return child.style['list-style'];
87            }
88            if (child.parentNode) {
89                child = child.parentNode;
90            }
91        }
92    } catch (err) {
93        console.error(err);
94    }
95
96};
97
98RICH_EDITOR.setNumbers = function () {
99    let listStyle = RICH_EDITOR.getListStyle();
100    if (listStyle === 'decimal') {
101        return;
102    }
103    document.execCommand('insertOrderedList', false, null);
104    var selection;
105    var type;
106    if (window.getSelection) {
107        selection = getSelection();
108    }
109    if (!selection) {
110        return
111    }
112    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
113    try {
114        var child = range.commonAncestorContainer;
115        for (var i = 0; i < 10; i++) {
116            if (child.nodeName === 'OL') {
117                child.style['list-style'] = 'decimal';
118                break;
119            }
120            if (child.parentNode) {
121                child = child.parentNode;
122            }
123        }
124    } catch (err) {
125        console.error(err);
126    }
127};
128
129RICH_EDITOR.setABC = function () {
130    let listStyle = RICH_EDITOR.getListStyle();
131    if (listStyle === 'lower-alpha') {
132        return;
133    }
134    document.execCommand('insertOrderedList', false, null);
135    var selection;
136    var type;
137    if (window.getSelection) {
138        selection = getSelection();
139    }
140    if (!selection) {
141        return
142    }
143    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
144    try {
145        var child = range.commonAncestorContainer;
146        for (var i = 0; i < 10; i++) {
147            if (child.nodeName === 'OL') {
148                child.style['list-style'] = 'lower-alpha';
149                break;
150            }
151            if (child.parentNode) {
152                child = child.parentNode;
153            }
154        }
155    } catch (err) {
156        console.error(err);
157    }
158};
159
160RICH_EDITOR.setBullets = function () {
161    let listStyle = RICH_EDITOR.getListStyle();
162    if (listStyle === 'disc') {
163        return;
164    }
165    document.execCommand('insertUnorderedList', false, null);
166    var selection;
167    var type;
168    if (window.getSelection) {
169        selection = getSelection();
170    }
171    if (!selection) {
172        return
173    }
174    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
175    try {
176        var child = range.commonAncestorContainer;
177        for (var i = 0; i < 10; i++) {
178            if (child.nodeName === 'UL') {
179                child.style['list-style'] = 'disc';
180                break;
181            }
182            if (child.parentNode) {
183                child = child.parentNode;
184            }
185        }
186    } catch (err) {
187        console.error(err);
188    }
189};
190
191RICH_EDITOR.setSquare = function () {
192    let listStyle = RICH_EDITOR.getListStyle();
193    if (listStyle === 'square') {
194        return;
195    }
196    document.execCommand('insertUnorderedList', false, null);
197    var selection;
198    var type;
199    if (window.getSelection) {
200        selection = getSelection();
201    }
202    if (!selection) {
203        return
204    }
205    var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
206    try {
207        var child = range.commonAncestorContainer;
208        for (var i = 0; i < 10; i++) {
209            if (child.nodeName === 'UL') {
210                child.style['list-style'] = 'square';
211                break;
212            }
213            if (child.parentNode) {
214                child = child.parentNode;
215            }
216        }
217    } catch (err) {
218        console.error(err);
219    }
220};
221
222RICH_EDITOR.setTextColor = function (color) {
223    document.execCommand('foreColor', false, color);
224};
225
226RICH_EDITOR.setFontSize = function (fontSize) {
227    document.execCommand('fontSize', false, fontSize);
228};
229
230RICH_EDITOR.execFontSize = function (size, unit) {
231    if (size === '12') {
232        document.execCommand('fontSize', false, 3);
233    } else if (size === '16') {
234        document.execCommand('fontSize', false, 4);
235    } else if (size === '20') {
236        document.execCommand('fontSize', false, 5);
237    } else if (size === '24') {
238        document.execCommand('fontSize', false, 6);
239    } else if (size === '28') {
240        document.execCommand('fontSize', false, 7);
241    }
242};
243
244var pad = 24;
245RICH_EDITOR.setIndent = function () {
246    var parents = document.getElementById('editorjs');
247    parents.removeAttribute('padding-left');
248    pad = pad + 24;
249    parents.style.paddingLeft = pad + 'px';
250};
251
252RICH_EDITOR.setOutdent = function () {
253    var parents = document.getElementById('editorjs');
254    parents.removeAttribute('padding-left');
255    if (pad === 24) {
256        parents.style.paddingLeft = 24 + 'px';
257    } else {
258        pad = pad - 24;
259        parents.style.paddingLeft = pad + 'px';
260    }
261};
262
263RICH_EDITOR.setJustifyLeft = function () {
264    document.execCommand('justifyLeft', false, null);
265};
266
267RICH_EDITOR.setJustifyCenter = function () {
268    document.execCommand('justifyCenter', false, null);
269};
270
271RICH_EDITOR.setJustifyRight = function () {
272    document.execCommand('justifyRight', false, null);
273};
274
275RICH_EDITOR.insertImage = function (url) {
276    var html = '<br></br><img src="' + url
277    + '" alt="picvision" style="margin:0px auto;width:90%;display:table-cell;'
278    + 'vertical-align:middle;border-radius:10px;max-width:90%" /><br></br>';
279    RICH_EDITOR.insertHTML(html);
280    RICH_EDITOR.editor.scrollIntoView(false);
281};
282
283RICH_EDITOR.insertHTML = function (html) {
284    document.execCommand('insertHTML', false, html);
285};
286
287RICH_EDITOR.setDone = function () {
288    var html = '<input type="checkbox" checked="checked"/> &nbsp;';
289    document.execCommand('insertHTML', false, html);
290};
291
292RICH_EDITOR.addTodo = function (e) {
293    var KEY_ENTER;
294    KEY_ENTER = 13;
295    if (e.which === KEY_ENTER) {
296        var node = RICH_EDITOR.getSelectedAnchorNode();
297        if (node && node.nodeName === '#text') {
298            node = node.parentElement;
299        }
300        if (node && node.nodeName === 'SPAN' && node.previousElementSibling
301        && node.previousElementSibling.className === 'note-checkbox') {
302            RICH_EDITOR.setTodo();
303            e.preventDefault();
304        }
305    }
306};
307
308RICH_EDITOR.setTodo = function () {
309    var parent = document.getElementById('editorjs');
310    var isContentEmpty = parent.innerHTML.trim().length === 0 || parent.innerHTML === '<br>';
311    var html = (isContentEmpty ? '' : '<br/>')
312    + '<input name="checkbox" type="checkbox" onclick="onCheckChange(this)" class="note-checkbox">'
313    + '<span class="note-checkbox-txt">&nbsp;</span>';
314    document.execCommand('insertHTML', false, html);
315};
316
317function onCheckChange(checkbox) {
318    if (checkbox.checked === true) {
319        checkbox.setAttribute('checked', 'checked');
320    } else {
321        checkbox.removeAttribute('checked');
322    }
323}
324
325RICH_EDITOR.restorerange = function () {
326    var selection = window.getSelection();
327    selection.removeAllRanges();
328    var range = document.createRange();
329    range.setStart(RICH_EDITOR.currentSelection.startContainer, RICH_EDITOR.currentSelection.startOffset);
330    range.setEnd(RICH_EDITOR.currentSelection.endContainer, RICH_EDITOR.currentSelection.endOffset);
331    selection.addRange(range);
332};
333
334// 获取光标开始位置归属节点
335
336RICH_EDITOR.getSelectedAnchorNode = function () {
337    var node;
338    var selection;
339    if (window.getSelection) {
340        selection = getSelection();
341        node = selection.anchorNode;
342    }
343    if (!node && document.selection) {
344        selection = document.selection;
345        var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
346        node = range.commonAncestorContainer ? range.commonAncestorContainer : range.parentElement
347        ? range.parentElement() : range.item(0);
348    }
349    return node;
350};
351var callBackToApp;
352function getHtmlContent() {
353    console.log('getHtmlContent');
354    var htmlString =  RICH_EDITOR.getHtml();
355    let imgName = getImagePathFromContent(htmlString);
356    htmlString = window.btoa(unescape(encodeURIComponent(htmlString)));
357    callBackToApp.callbackImagePath(imgName);
358    var str = callBackToApp.callbackhtml(htmlString);
359    console.log('getHtmlContent end');
360}
361
362function saveHtmlContent() {
363    console.log('saveHtmlContent');
364    var htmlString =  RICH_EDITOR.getHtml();
365    let imgName = getImagePathFromContent(htmlString);
366    htmlString = window.btoa(unescape(encodeURIComponent(htmlString)));
367
368    callBackToApp.callbackImagePath(imgName);
369    var str = callBackToApp.callbackhtmlSave(htmlString);
370    console.log('saveHtmlContent end');
371}
372
373function getImagePathFromContent(contentInfo) {
374    let imgReg = /<img[^>]+>/g;
375    let imgName = "";
376    let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
377    let imgArray = contentInfo.match(imgReg);
378    // 取第一张图片做为标题栏后的缩略图
379    if (imgArray && imgArray.length > 0) {
380        let src = imgArray[0].match(srcReg);
381        if (src != null && src.length > 1) {
382            imgName = src[1];
383            if (imgName.indexOf('shuxue.png') >= 0 || imgName.indexOf('cake.png') >= 0) {
384                imgName = "/res/" + imgName;
385            }
386        }
387    }
388    return imgName;
389}
390
391function scheduledSaveContent() {
392    console.info('scheduledSaveContent');
393    var htmlString = RICH_EDITOR.getHtml();
394    let imgName = getImagePathFromContent(htmlString);
395    htmlString = window.btoa(unescape(encodeURIComponent(htmlString)));
396    callBackToApp.callbackImagePath(imgName);
397    var str = callBackToApp.callbackScheduledSave(htmlString);
398    console.info('scheduledSaveContent end');
399}
400
401document.body.addEventListener('paste', (event) => {
402    let length = event.clipboardData.items.length;
403    if (length > 0) {
404        let file = event.clipboardData.items[0].getAsFile();
405        const reader = new FileReader();
406        reader.onloadend = () => {
407            callBackToApp.callbackPasteImage(reader.result);
408        }
409        reader.readAsDataURL(file);
410        event.preventDefault();
411    }
412});
413
414RICH_EDITOR.getFontSizes = function () {
415    document.execCommand('fontSize', false, null);
416    var fontElements = window.getSelection().anchorNode.parentNode;
417    var getSize = parseInt(window.getComputedStyle(fontElements, null).fontSize)
418    var str = callBackToApp.callbackGetSize(getSize);
419};
420
421RICH_EDITOR.insertImageHtml = function (contents) {
422    let selection = window.getSelection();
423    if (!selection.rangeCount)
424    return false;
425    selection.deleteFromDocument();
426    let img = document.createElement('img');
427    img.src = contents;
428    selection.getRangeAt(0).insertNode(img);
429};
430
431document.addEventListener('click', (e) => {
432    console.info(`lsq: e is ${JSON.stringify(e)}`)
433    var parent = document.getElementById('editorjs');
434    if (parent.id !== 'editorjs') {
435        e.preventDefault()
436    }
437})
438
439document.getElementById('addToDo').addEventListener('click', () => {
440    callBackToApp.addToDo()
441})
442
443document.getElementById('chooseStyle').addEventListener('click', () => {
444    callBackToApp.chooseStyle()
445})
446
447document.getElementById('openAlbum').addEventListener('click', () => {
448    callBackToApp.openAlbum()
449})
450
451function changeSizeToRk() {
452    document.getElementById('img1').style.width = '40px';
453    document.getElementById('img1').style.height = '40px';
454    document.getElementById('img2').style.width = '40px';
455    document.getElementById('img2').style.height = '40px';
456    document.getElementById('img3').style.width = '40px';
457    document.getElementById('img3').style.height = '40px';
458    document.getElementById('lable1').style.fontSize = '20px';
459    document.getElementById('lable2').style.fontSize = '20px';
460    document.getElementById('lable3').style.fontSize = '20px';
461}
462
463function changeSizeToPhone() {
464    document.getElementById('img1').style.width = '24px';
465    document.getElementById('img1').style.height = '24px';
466    document.getElementById('img2').style.width = '24px';
467    document.getElementById('img2').style.height = '24px';
468    document.getElementById('img3').style.width = '24px';
469    document.getElementById('img3').style.height = '24px';
470    document.getElementById('lable1').style.fontSize = '12px';
471    document.getElementById('lable2').style.fontSize = '12px';
472    document.getElementById('lable3').style.fontSize = '12px';
473}
474
475function changeSizeToTablet() {
476    document.getElementById('img1').style.width = '28px';
477    document.getElementById('img1').style.height = '28px';
478    document.getElementById('img2').style.width = '28px';
479    document.getElementById('img2').style.height = '28px';
480    document.getElementById('img3').style.width = '28px';
481    document.getElementById('img3').style.height = '28px';
482    document.getElementById('lable1').style.fontSize = '12px';
483    document.getElementById('lable2').style.fontSize = '12px';
484    document.getElementById('lable3').style.fontSize = '12px';
485}
486
487function hiddenButton() {
488    document.getElementById('buttonBox').style.display = 'none';
489}
490
491RICH_EDITOR.getFocus = function() {
492    return document.getElementById('editorjs').focus();
493}
494
495document.getElementById('editorjs').addEventListener('click', () => {
496    if (callBackToApp.getBreakPoint() === 'sm') {
497        document.getElementById('buttonBox').style.display = 'flex';
498    }
499})