/** * @constructor * @param {Object} oElement * @param {Function=} fOnBlur * @param {Function=} fOnReady */ function HtmlEditorWrapper(oElement, fOnBlur, fOnReady) { var self = this; self.editor = null; self.bHtml = true; self.bPlainDirty = false; self.iBlurTimer = 0; self.fOnBlur = fOnBlur || null; self.fOnReady = fOnReady || null; self.$element = $(oElement); self.LANG = { 'HTML': 'Rich formatting', 'PLAIN': 'Plain text', 'FULL': 'Fullscreen' }; self.init(); } HtmlEditorWrapper.prototype.addInputFormatStyle = function () { if (this.$plain) { this.$plain.addClass('styled'); } if (this.$html) { this.$html.addClass('styled'); } }; HtmlEditorWrapper.prototype.setupLang = function (sHtml, sPlain, sFullscreen) { this.LANG = { 'HTML': sHtml || this.LANG.HTML, 'PLAIN': sPlain || this.LANG.PLAIN, 'FULL': sFullscreen || this.LANG.FULL }; this.setModeButtonText(); }; HtmlEditorWrapper.prototype.blurTrigger = function () { if (this.fOnBlur) { var self = this; window.clearTimeout(self.iBlurTimer); self.iBlurTimer = window.setTimeout(function () { self.fOnBlur(); }, 200); } }; HtmlEditorWrapper.prototype.focusTrigger = function () { if (this.fOnBlur) { window.clearTimeout(this.iBlurTimer); } }; /** * @param {string} sHtml * @return {string} */ HtmlEditorWrapper.prototype.htmlToPlain = function (sHtml) { var sText = '', sQuoteChar = '> ', convertBlockquote = function () { if (arguments && 1 < arguments.length) { var sText = $.trim(arguments[1]) .replace(/__bq__start__([\s\S\n\r]*)__bq__end__/gm, convertBlockquote) ; sText = '\n' + sQuoteChar + $.trim(sText).replace(/\n/gm, '\n' + sQuoteChar) + '\n>\n'; return sText.replace(/\n([> ]+)/gm, function () { return (arguments && 1 < arguments.length) ? '\n' + $.trim(arguments[1].replace(/[\s]/, '')) + ' ' : ''; }); } return ''; }, convertDivs = function () { if (arguments && 1 < arguments.length) { var sText = $.trim(arguments[1]); if (0 < sText.length) { sText = sText.replace(/
]*>/gmi, '\n__bq__start__\n') .replace(/<\/blockquote>/gmi, '\n__bq__end__\n') .replace(/]*>([\s\S]*?)<\/a>/gmi, convertLinks) .replace(/ /gi, ' ') .replace(/<[^>]*>/gm, '') .replace(/>/gi, '>') .replace(/</gi, '<') .replace(/&/gi, '&') .replace(/&\w{2,6};/gi, '') ; return sText .replace(/\n[ \t]+/gm, '\n') .replace(/[\n]{3,}/gm, '\n\n') .replace(/__bq__start__([\s\S]*)__bq__end__/gm, convertBlockquote) .replace(/__bq__start__/gm, '') .replace(/__bq__end__/gm, '') ; }; /** * @param {string} sPlain * @return {string} */ HtmlEditorWrapper.prototype.plainToHtml = function (sPlain) { return sPlain.toString() .replace(/&/g, '&').replace(/>/g, '>').replace(/'); }; HtmlEditorWrapper.prototype.fullScreenToggle = function () { $('html').toggleClass('html-editor-wrapper-fullscreen'); $('body').toggleClass('html-editor-wrapper-fullscreen'); this.focus(); }; HtmlEditorWrapper.prototype.initToolbar = function () { var self = this; // self.$fullscreen = $('fullscreen') // .addClass('html-editor-wrapper-fullscreen-button') // .on('click', function () { // self.fullScreenToggle(); // }) // ; self.$mode = $('html') .addClass('html-editor-wrapper-mode-button') .on('click', function () { self.modeToggle(true); }) ; self.$toolbar .append(self.$mode) // .append(self.$fullscreen) ; }; /** * @return {boolean} */ HtmlEditorWrapper.prototype.isHtml = function () { return this.bHtml; }; /** * @return {boolean} */ HtmlEditorWrapper.prototype.checkDirty = function () { return this.bHtml && this.editor ? this.editor.checkDirty() : this.bPlainDirty; }; HtmlEditorWrapper.prototype.resetDirty = function () { if (this.editor) { this.editor.resetDirty(); } this.bPlainDirty = false; }; /** * @return {string} */ HtmlEditorWrapper.prototype.getData = function () { if (this.bHtml && this.editor) { return this.editor.getData(); } else { return this.$plain.val(); } }; HtmlEditorWrapper.prototype.setHtml = function (sHtml, bFocus) { if (this.editor) { if (!this.bHtml) { this.modeToggle(bFocus); } this.editor.setData(sHtml); } }; HtmlEditorWrapper.prototype.setPlain = function (sPlain, bFocus) { if (this.bHtml) { this.modeToggle(bFocus); } this.$plain.val(sPlain); }; HtmlEditorWrapper.prototype.init = function () { if (this.$element && this.$element[0]) { var self = this; self.$toolbar = $('') .addClass('html-editor-wrapper-toolbar') ; self.$plain = $('') .addClass('html-editor-wrapper-plain') .on('change', function () { self.bPlainDirty = true; }) .on('blur', function() { self.blurTrigger(); }) .on('focus', function() { self.focusTrigger(); }) .hide() ; self.$html = $('') .addClass('html-editor-wrapper-html') .attr('contenteditable', 'true') .on('blur', function() { self.blurTrigger(); }) .on('focus', function() { self.focusTrigger(); }) .hide() ; if (self.bHtml) { self.$html.show(); } else { self.$plain.show(); } self.$element .addClass('html-editor-wrapper') .append(self.$toolbar) .append(self.$plain) .append(self.$html) ; self.editor = window.CKEDITOR.inline(self.$html[0]); if (self.fOnReady) { self.editor.on('instanceReady', function () { self.fOnReady(); }); } self.initToolbar(); self.setModeButtonText(); } }; HtmlEditorWrapper.prototype.focus = function () { if (this.bHtml) { this.$html.focus(); } else { this.$plain.focus(); } }; HtmlEditorWrapper.prototype.blur = function () { if (this.bHtml) { this.$html.blur(); } else { this.$plain.blur(); } }; HtmlEditorWrapper.prototype.setModeButtonText = function () { this.$mode.text(this.bHtml ? this.LANG.PLAIN : this.LANG.HTML); }; HtmlEditorWrapper.prototype.clear = function (bFocus) { this.setHtml('', bFocus); }; HtmlEditorWrapper.prototype.modeToggle = function (bFocus) { bFocus = Utils.isUnd(bFocus) ? true : !!bFocus; if (bFocus) { this.blur(); } if (this.bHtml) { this.$html.hide(); this.$plain .val(this.htmlToPlain(this.$html.html())) .show() ; this.bHtml = false; this.bPlainDirty = true; } else { this.$plain.hide(); this.$html .html(this.plainToHtml(this.$plain.val())) .show() ; this.bHtml = true; this.bPlainDirty = true; } this.setModeButtonText(); if (bFocus) { this.focus(); } this.blurTrigger(); };