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; } /** * @returns {void} */ clearCachedSignature() { if (this.editor) { this.editor.execCommand('insertSignature', { clearCache: true }); } } /** * @param {string} signature * @param {bool} html * @param {bool} insertBefore * @returns {void} */ 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 ? '
]*><\/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.clearCachedSignature();
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};