import window from 'window'; import _ from '_'; import $ from '$'; import {htmlEditorDefaultConfig, htmlEditorLangsMap} from 'Common/Globals'; import {EventKeyCode} from 'Common/Enums'; import * as Settings from 'Storage/Settings'; class HtmlEditor { /** * @constructor * @param {Object} element * @param {Function=} onBlur * @param {Function=} onReady * @param {Function=} onModeChange */ constructor(element, onBlur = null, onReady = null, onModeChange = null) { this.editor = null; this.blurTimer = 0; this.onBlur = onBlur; this.onReady = onReady; this.onModeChange = onModeChange; this.element = element; this.$element = $(element); this.resize = _.throttle(_.bind(this.resize, this), 100); this.__inited = false; this.init(); } blurTrigger() { if (this.onBlur) { window.clearTimeout(this.blurTimer); this.blurTimer = window.setTimeout(() => { this.onBlur(); }, 200); } } focusTrigger() { if (this.onBlur) { window.clearTimeout(this.blurTimer); } } /** * @returns {boolean} */ isHtml() { return this.editor ? 'wysiwyg' === this.editor.mode : false; } /** * @param {string} signature * @param {bool} html * @param {bool} insertBefore */ setSignature(signature, html, insertBefore) { if (this.editor) { this.editor.execCommand('insertSignature', { isHtml: html, insertBefore: insertBefore, signature: signature }); } } /** * @returns {boolean} */ checkDirty() { return this.editor ? this.editor.checkDirty() : false; } resetDirty() { if (this.editor) { this.editor.resetDirty(); } } /** * @param {boolean=} wrapIsHtml = false * @returns {string} */ getData(wrapIsHtml = false) { let result = ''; if (this.editor) { try { if ('plain' === this.editor.mode && this.editor.plugins.plain && this.editor.__plain) { result = this.editor.__plain.getRawData(); } else { result = wrapIsHtml ? '
' + this.editor.getData() + '
' : this.editor.getData(); } } catch (e) {} // eslint-disable-line no-empty } return result; } /** * @param {boolean=} wrapIsHtml = false * @returns {string} */ getDataWithHtmlMark(wrapIsHtml = false) { return (this.isHtml() ? ':HTML:' : '') + this.getData(wrapIsHtml); } modeToggle(plain, resize) { if (this.editor) { try { if (plain) { if ('plain' === this.editor.mode) { this.editor.setMode('wysiwyg'); } } else if ('wysiwyg' === this.editor.mode) { this.editor.setMode('plain'); } } catch (e) {} // eslint-disable-line no-empty if (resize) { this.resize(); } } } setHtmlOrPlain(text, focus) { if (':HTML:' === text.substr(0, 6)) { this.setHtml(text.substr(6), focus); } else { this.setPlain(text, focus); } } setHtml(html, focus) { if (this.editor && this.__inited) { this.modeToggle(true); html = html.replace(/]*><\/p>/ig, ''); try { this.editor.setData(html); } catch (e) {} // eslint-disable-line no-empty if (focus) { this.focus(); } } } replaceHtml(find, replaceHtml) { if (this.editor && this.__inited && 'wysiwyg' === this.editor.mode) { try { this.editor.setData( this.editor.getData().replace(find, replaceHtml)); } catch (e) {} // eslint-disable-line no-empty } } setPlain(plain, focus) { if (this.editor && this.__inited) { this.modeToggle(false); if ('plain' === this.editor.mode && this.editor.plugins.plain && this.editor.__plain) { this.editor.__plain.setRawData(plain); } else { try { this.editor.setData(plain); } catch (e) {} // eslint-disable-line no-empty } if (focus) { this.focus(); } } } init() { if (this.element && !this.editor) { const initFunc = () => { const config = htmlEditorDefaultConfig, language = Settings.settingsGet('Language'), allowSource = !!Settings.appSettingsGet('allowHtmlEditorSourceButton'), biti = !!Settings.appSettingsGet('allowHtmlEditorBitiButtons'); if ((allowSource || !biti) && !config.toolbarGroups.__cfgInited) { config.toolbarGroups.__cfgInited = true; if (allowSource) { config.removeButtons = config.removeButtons.replace(',Source', ''); } if (!biti) { config.removePlugins += (config.removePlugins ? ',' : '') + 'bidi'; } } config.enterMode = window.CKEDITOR.ENTER_BR; config.shiftEnterMode = window.CKEDITOR.ENTER_P; config.language = htmlEditorLangsMap[(language || 'en').toLowerCase()] || 'en'; if (window.CKEDITOR.env) { window.CKEDITOR.env.isCompatible = true; } this.editor = window.CKEDITOR.appendTo(this.element, config); this.editor.on('key', (event) => { if (event && event.data && EventKeyCode.Tab === event.data.keyCode) { return false; } return true; }); this.editor.on('blur', () => { this.blurTrigger(); }); this.editor.on('mode', () => { this.blurTrigger(); if (this.onModeChange) { this.onModeChange('plain' !== this.editor.mode); } }); this.editor.on('focus', () => { this.focusTrigger(); }); if (window.FileReader) { this.editor.on('drop', (event) => { if (0 < event.data.dataTransfer.getFilesCount()) { const file = event.data.dataTransfer.getFile(0); if (file && window.FileReader && event.data.dataTransfer.id && file.type && file.type.match(/^image/i)) { const id = event.data.dataTransfer.id, imageId = `[img=${id}]`, reader = new window.FileReader(); reader.onloadend = () => { if (reader.result) { this.replaceHtml(imageId, ``); } }; reader.readAsDataURL(file); event.data.dataTransfer.setData('text/html', imageId); } } }); } this.editor.on('instanceReady', () => { if (this.editor.removeMenuItem) { this.editor.removeMenuItem('cut'); this.editor.removeMenuItem('copy'); this.editor.removeMenuItem('paste'); } this.__resizable = true; this.__inited = true; this.resize(); if (this.onReady) { this.onReady(); } }); }; if (window.CKEDITOR) { initFunc(); } else { window.__initEditor = initFunc; } } } focus() { if (this.editor) { try { this.editor.focus(); } catch (e) {} // eslint-disable-line no-empty } } hasFocus() { if (this.editor) { try { return !!this.editor.focusManager.hasFocus; } catch (e) {} // eslint-disable-line no-empty } return false; } blur() { if (this.editor) { try { this.editor.focusManager.blur(true); } catch (e) {} // eslint-disable-line no-empty } } resize() { if (this.editor && this.__resizable) { try { this.editor.resize(this.$element.width(), this.$element.innerHeight()); } catch (e) {} // eslint-disable-line no-empty } } setReadOnly(value) { if (this.editor) { try { this.editor.setReadOnly(!!value); } catch (e) {} // eslint-disable-line no-empty } } clear(focus) { this.setHtml('', focus); } } export {HtmlEditor, HtmlEditor as default};