mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-11 00:14:50 +03:00
Html editor improvements (new toolbar type)
This commit is contained in:
RainLoop Team
parent
96b37227b2
commit
8da34e8d5f
105 changed files with 1423 additions and 1545 deletions
|
|
@ -87,7 +87,10 @@ Globals.oHtmlEditorDefaultConfig = {
|
|||
'title': false,
|
||||
'stylesSet': false,
|
||||
'customConfig': '',
|
||||
'contentsCss': '',
|
||||
// 'height': '100%',
|
||||
'toolbarGroups': [
|
||||
{name: 'spec'},
|
||||
{name: 'styles'},
|
||||
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
|
||||
{name: 'colors'},
|
||||
|
|
@ -96,17 +99,20 @@ Globals.oHtmlEditorDefaultConfig = {
|
|||
{name: 'insert'}
|
||||
// {name: 'document', groups: ['mode', 'document', 'doctools']}
|
||||
],
|
||||
|
||||
'removeButtons': 'Format,Undo,Redo,Cut,Copy,Paste,Anchor,Strike,Subscript,Superscript,Image,Indent,Outdent',
|
||||
'removeDialogTabs': 'link:advanced;link:target;image:advanced',
|
||||
|
||||
'extraPlugins': 'plain',
|
||||
|
||||
'allowedContent': false,
|
||||
'autoParagraph': false,
|
||||
|
||||
// 'enterMode': window.CKEDITOR.ENTER_BR,
|
||||
// 'shiftEnterMode': window.CKEDITOR.ENTER_P,
|
||||
'enterMode': window.CKEDITOR.ENTER_DIV,
|
||||
// 'enterMode': window.CKEDITOR.ENTER_DIV,
|
||||
'enterMode': window.CKEDITOR.ENTER_BR,
|
||||
'shiftEnterMode': window.CKEDITOR.ENTER_BR,
|
||||
// 'floatSpaceDockedOffsetY': 1,
|
||||
|
||||
'font_defaultLabel': 'Arial',
|
||||
'fontSize_defaultLabel': '12px',
|
||||
|
|
|
|||
|
|
@ -1,450 +0,0 @@
|
|||
|
||||
/**
|
||||
* @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);
|
||||
}
|
||||
};
|
||||
|
||||
HtmlEditorWrapper.prototype.hideEditorToolbar = function ()
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
$('.cke.cke_float').hide();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @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(/<div[^>]*>(.|[\s\S\r\n]*)<\/div>/gmi, convertDivs);
|
||||
sText = '\n' + $.trim(sText) + '\n';
|
||||
}
|
||||
return sText;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
fixAttibuteValue = function () {
|
||||
if (arguments && 1 < arguments.length)
|
||||
{
|
||||
return '' + arguments[1] + arguments[2].replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
|
||||
convertLinks = function () {
|
||||
if (arguments && 1 < arguments.length)
|
||||
{
|
||||
var
|
||||
sName = $.trim(arguments[1])
|
||||
// sHref = $.trim(arguments[0].replace(/<a [\s\S]*href[ ]?=[ ]?["']?([^"']+).+<\/a>/gmi, '$1'))
|
||||
;
|
||||
|
||||
return sName;
|
||||
// sName = (0 === trim(sName).length) ? '' : sName;
|
||||
// sHref = ('mailto:' === sHref.substr(0, 7)) ? '' : sHref;
|
||||
// sHref = ('http' === sHref.substr(0, 4)) ? sHref : '';
|
||||
// sHref = (sName === sHref) ? '' : sHref;
|
||||
// sHref = (0 < sHref.length) ? ' (' + sHref + ') ' : '';
|
||||
// return (0 < sName.length) ? sName + sHref : sName;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
;
|
||||
|
||||
sText = sHtml
|
||||
.replace(/[\s]+/gm, ' ')
|
||||
.replace(/((?:href|data)\s?=\s?)("[^"]+?"|'[^']+?')/gmi, fixAttibuteValue)
|
||||
.replace(/<br\s?\/?>/gmi, '\n')
|
||||
.replace(/<\/h\d>/gi, '\n')
|
||||
.replace(/<\/p>/gi, '\n\n')
|
||||
.replace(/<\/li>/gi, '\n')
|
||||
.replace(/<\/td>/gi, '\n')
|
||||
.replace(/<\/tr>/gi, '\n')
|
||||
.replace(/<hr[^>]*>/gmi, '\n_______________________________\n\n')
|
||||
.replace(/<img [^>]*>/gmi, '')
|
||||
.replace(/<div[^>]*>(.|[\s\S\r\n]*)<\/div>/gmi, convertDivs)
|
||||
.replace(/<blockquote[^>]*>/gmi, '\n__bq__start__\n')
|
||||
.replace(/<\/blockquote>/gmi, '\n__bq__end__\n')
|
||||
.replace(/<a [^>]*>(.|[\s\S\r\n]*)<\/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\r\n]*)__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(/</g, '<')
|
||||
.replace(/\r/g, '').replace(/\n/g, '<br />');
|
||||
};
|
||||
|
||||
HtmlEditorWrapper.prototype.initToolbar = function ()
|
||||
{
|
||||
var self = this;
|
||||
|
||||
self.$mode = $('<a tabindex="-1" href="jav' + 'ascript:v' + 'oid(0);"></a>')
|
||||
.addClass('html-editor-wrapper-mode-button')
|
||||
.on('click', function () {
|
||||
self.modeToggle(true);
|
||||
})
|
||||
;
|
||||
|
||||
self.$toolbar
|
||||
.append(self.$mode)
|
||||
;
|
||||
};
|
||||
|
||||
/**
|
||||
* @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,
|
||||
oConfig = Globals.oHtmlEditorDefaultConfig,
|
||||
sLanguage = RL.settingsGet('Language'),
|
||||
bSource = !!RL.settingsGet('AllowHtmlEditorSourceButton')
|
||||
;
|
||||
|
||||
self.$toolbar = $('<div></div>')
|
||||
.addClass('html-editor-wrapper-toolbar')
|
||||
;
|
||||
|
||||
self.$plain = $('<textarea></textarea>')
|
||||
.addClass('html-editor-wrapper-plain')
|
||||
.on('change', function () {
|
||||
self.bPlainDirty = true;
|
||||
})
|
||||
.on('blur', function() {
|
||||
self.blurTrigger();
|
||||
})
|
||||
.on('focus', function() {
|
||||
self.focusTrigger();
|
||||
})
|
||||
.hide()
|
||||
;
|
||||
|
||||
// self.$html = $('<div></div>')
|
||||
// .addClass('html-editor-wrapper-html')
|
||||
// .attr('contenteditable', 'true')
|
||||
// .on('blur', function() {
|
||||
// self.blurTrigger();
|
||||
// })
|
||||
// .on('focus', function() {
|
||||
// self.focusTrigger();
|
||||
// })
|
||||
// .hide()
|
||||
// ;
|
||||
self.$html = $('<div></div>')
|
||||
.addClass('html-editor-wrapper-html')
|
||||
.attr('contenteditable', 'true')
|
||||
.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)
|
||||
;
|
||||
|
||||
if (bSource && oConfig.toolbarGroups && !oConfig.toolbarGroups.__SourceInited)
|
||||
{
|
||||
oConfig.toolbarGroups.__SourceInited = true;
|
||||
oConfig.toolbarGroups.push({name: 'document', groups: ['mode', 'document', 'doctools']});
|
||||
}
|
||||
|
||||
oConfig.language = Globals.oHtmlEditorLangsMap[sLanguage] || 'en';
|
||||
// self.editor = window.CKEDITOR.appendTo(self.$html[0], oConfig);
|
||||
self.editor = window.CKEDITOR.inline(self.$html[0], oConfig);
|
||||
self.editor.on('blur', function() {
|
||||
self.blurTrigger();
|
||||
});
|
||||
|
||||
self.editor.on('focus', function() {
|
||||
self.focusTrigger();
|
||||
});
|
||||
|
||||
if (self.fOnReady)
|
||||
{
|
||||
self.editor.on('instanceReady', function () {
|
||||
self.fOnReady();
|
||||
});
|
||||
}
|
||||
|
||||
self.initToolbar();
|
||||
self.setModeButtonText();
|
||||
}
|
||||
};
|
||||
|
||||
HtmlEditorWrapper.prototype.toolbarReposition = function ()
|
||||
{
|
||||
if (this.bHtml && this.editor && this.editor.focusManager.hasFocus)
|
||||
{
|
||||
var oEd = this.editor;
|
||||
|
||||
oEd.focusManager.blur(true);
|
||||
_.delay(function () {
|
||||
oEd.focusManager.focus();
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
|
||||
HtmlEditorWrapper.prototype.focus = function ()
|
||||
{
|
||||
if (this.bHtml) {
|
||||
if (this.editor) {
|
||||
this.editor.focusManager.focus();
|
||||
}
|
||||
} else {
|
||||
this.$plain.focus();
|
||||
}
|
||||
};
|
||||
|
||||
HtmlEditorWrapper.prototype.blur = function ()
|
||||
{
|
||||
if (this.bHtml) {
|
||||
if (this.editor) {
|
||||
this.editor.focusManager.blur(true);
|
||||
}
|
||||
} 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.editor)
|
||||
{
|
||||
if (this.bHtml)
|
||||
{
|
||||
this.$html.hide();
|
||||
this.$plain.show();
|
||||
|
||||
this.$plain.val(this.htmlToPlain(this.editor.getData()));
|
||||
|
||||
this.bHtml = false;
|
||||
this.bPlainDirty = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.$plain.hide();
|
||||
this.$html.show();
|
||||
|
||||
this.editor.setData(this.plainToHtml(this.$plain.val()));
|
||||
|
||||
this.bHtml = true;
|
||||
this.bPlainDirty = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.setModeButtonText();
|
||||
|
||||
if (bFocus)
|
||||
{
|
||||
this.focus();
|
||||
}
|
||||
|
||||
this.blurTrigger();
|
||||
};
|
||||
203
dev/Common/NewHtmlEditorWrapper.js
Normal file
203
dev/Common/NewHtmlEditorWrapper.js
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {Object} oElement
|
||||
* @param {Function=} fOnBlur
|
||||
* @param {Function=} fOnReady
|
||||
*/
|
||||
function NewHtmlEditorWrapper(oElement, fOnBlur, fOnReady)
|
||||
{
|
||||
var self = this;
|
||||
self.editor = null;
|
||||
self.iBlurTimer = 0;
|
||||
self.fOnBlur = fOnBlur || null;
|
||||
self.fOnReady = fOnReady || null;
|
||||
|
||||
self.$element = $(oElement);
|
||||
|
||||
self.init();
|
||||
}
|
||||
|
||||
NewHtmlEditorWrapper.prototype.blurTrigger = function ()
|
||||
{
|
||||
if (this.fOnBlur)
|
||||
{
|
||||
var self = this;
|
||||
window.clearTimeout(self.iBlurTimer);
|
||||
self.iBlurTimer = window.setTimeout(function () {
|
||||
self.fOnBlur();
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.focusTrigger = function ()
|
||||
{
|
||||
if (this.fOnBlur)
|
||||
{
|
||||
window.clearTimeout(this.iBlurTimer);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {boolean}
|
||||
*/
|
||||
NewHtmlEditorWrapper.prototype.isHtml = function ()
|
||||
{
|
||||
window.console.log(this.editor.mode);
|
||||
return this.editor ? 'wysiwyg' === this.editor.mode : false;
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {boolean}
|
||||
*/
|
||||
NewHtmlEditorWrapper.prototype.checkDirty = function ()
|
||||
{
|
||||
return this.editor ? this.editor.checkDirty() : false;
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.resetDirty = function ()
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
this.editor.resetDirty();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
NewHtmlEditorWrapper.prototype.getData = function ()
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
if ('plain' === this.editor.mode && this.editor.plugins.plain && this.editor.__plain)
|
||||
{
|
||||
return this.editor.__plain.getRawData();
|
||||
}
|
||||
|
||||
return this.editor.getData();
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.modeToggle = function (bPlain)
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
if (bPlain)
|
||||
{
|
||||
if ('plain' === this.editor.mode)
|
||||
{
|
||||
this.editor.setMode('wysiwyg');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if ('wysiwyg' === this.editor.mode)
|
||||
{
|
||||
this.editor.setMode('plain');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.setHtml = function (sHtml, bFocus)
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
this.modeToggle(true);
|
||||
this.editor.setData(sHtml);
|
||||
|
||||
if (bFocus)
|
||||
{
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.setPlain = function (sPlain, bFocus)
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
this.modeToggle(false);
|
||||
this.editor.setData(sPlain);
|
||||
|
||||
if (bFocus)
|
||||
{
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.init = function ()
|
||||
{
|
||||
if (this.$element && this.$element[0])
|
||||
{
|
||||
var
|
||||
self = this,
|
||||
oConfig = Globals.oHtmlEditorDefaultConfig,
|
||||
sLanguage = RL.settingsGet('Language'),
|
||||
bSource = !!RL.settingsGet('AllowHtmlEditorSourceButton')
|
||||
;
|
||||
|
||||
if (bSource && oConfig.toolbarGroups && !oConfig.toolbarGroups.__SourceInited)
|
||||
{
|
||||
oConfig.toolbarGroups.__SourceInited = true;
|
||||
oConfig.toolbarGroups.push({name: 'document', groups: ['mode', 'document', 'doctools']});
|
||||
}
|
||||
|
||||
oConfig.language = Globals.oHtmlEditorLangsMap[sLanguage] || 'en';
|
||||
self.editor = window.CKEDITOR.appendTo(self.$element[0], oConfig);
|
||||
|
||||
self.editor.on('blur', function() {
|
||||
self.blurTrigger();
|
||||
});
|
||||
|
||||
self.editor.on('mode', function() {
|
||||
self.blurTrigger();
|
||||
});
|
||||
|
||||
self.editor.on('focus', function() {
|
||||
self.focusTrigger();
|
||||
});
|
||||
|
||||
if (self.fOnReady)
|
||||
{
|
||||
self.editor.on('instanceReady', function () {
|
||||
self.fOnReady();
|
||||
self.resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.focus = function ()
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
this.editor.focusManager.focus();
|
||||
}
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.blur = function ()
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
this.editor.focusManager.blur(true);
|
||||
}
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.resize = function ()
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
this.editor.resize(this.$element.width(), this.$element.innerHeight());
|
||||
}
|
||||
};
|
||||
|
||||
NewHtmlEditorWrapper.prototype.clear = function (bFocus)
|
||||
{
|
||||
this.setHtml('', bFocus);
|
||||
};
|
||||
|
||||
|
|
@ -1434,6 +1434,120 @@ Utils.settingsSaveHelperSimpleFunction = function (koTrigger, oContext)
|
|||
return Utils.settingsSaveHelperFunction(null, koTrigger, oContext, 1000);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} sHtml
|
||||
* @return {string}
|
||||
*/
|
||||
Utils.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(/<div[^>]*>(.|[\s\S\r\n]*)<\/div>/gmi, convertDivs);
|
||||
sText = '\n' + $.trim(sText) + '\n';
|
||||
}
|
||||
return sText;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
fixAttibuteValue = function () {
|
||||
if (arguments && 1 < arguments.length)
|
||||
{
|
||||
return '' + arguments[1] + arguments[2].replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
|
||||
convertLinks = function () {
|
||||
if (arguments && 1 < arguments.length)
|
||||
{
|
||||
var
|
||||
sName = $.trim(arguments[1])
|
||||
// sHref = $.trim(arguments[0].replace(/<a [\s\S]*href[ ]?=[ ]?["']?([^"']+).+<\/a>/gmi, '$1'))
|
||||
;
|
||||
|
||||
return sName;
|
||||
// sName = (0 === trim(sName).length) ? '' : sName;
|
||||
// sHref = ('mailto:' === sHref.substr(0, 7)) ? '' : sHref;
|
||||
// sHref = ('http' === sHref.substr(0, 4)) ? sHref : '';
|
||||
// sHref = (sName === sHref) ? '' : sHref;
|
||||
// sHref = (0 < sHref.length) ? ' (' + sHref + ') ' : '';
|
||||
// return (0 < sName.length) ? sName + sHref : sName;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
;
|
||||
|
||||
sText = sHtml
|
||||
.replace(/[\s]+/gm, ' ')
|
||||
.replace(/((?:href|data)\s?=\s?)("[^"]+?"|'[^']+?')/gmi, fixAttibuteValue)
|
||||
.replace(/<br\s?\/?>/gmi, '\n')
|
||||
.replace(/<\/h\d>/gi, '\n')
|
||||
.replace(/<\/p>/gi, '\n\n')
|
||||
.replace(/<\/li>/gi, '\n')
|
||||
.replace(/<\/td>/gi, '\n')
|
||||
.replace(/<\/tr>/gi, '\n')
|
||||
.replace(/<hr[^>]*>/gmi, '\n_______________________________\n\n')
|
||||
.replace(/<img [^>]*>/gmi, '')
|
||||
.replace(/<div[^>]*>(.|[\s\S\r\n]*)<\/div>/gmi, convertDivs)
|
||||
.replace(/<blockquote[^>]*>/gmi, '\n__bq__start__\n')
|
||||
.replace(/<\/blockquote>/gmi, '\n__bq__end__\n')
|
||||
.replace(/<a [^>]*>(.|[\s\S\r\n]*)<\/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\r\n]*)__bq__end__/gm, convertBlockquote)
|
||||
.replace(/__bq__start__/gm, '')
|
||||
.replace(/__bq__end__/gm, '')
|
||||
;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} sPlain
|
||||
* @return {string}
|
||||
*/
|
||||
Utils.plainToHtml = function (sPlain)
|
||||
{
|
||||
return sPlain.toString()
|
||||
.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<')
|
||||
.replace(/\r/g, '').replace(/\n/g, '<br />');
|
||||
};
|
||||
|
||||
Utils.resizeAndCrop = function (sUrl, iValue, fCallback)
|
||||
{
|
||||
var oTempImg = new window.Image();
|
||||
|
|
|
|||
|
|
@ -83,14 +83,6 @@ SettingsIdentities.prototype.deleteIdentity = function (oIdentityToRemove)
|
|||
}
|
||||
};
|
||||
|
||||
SettingsIdentities.prototype.onHide = function ()
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
this.editor.hideEditorToolbar();
|
||||
}
|
||||
};
|
||||
|
||||
SettingsIdentities.prototype.onFocus = function ()
|
||||
{
|
||||
if (!this.editor && this.signatureDom())
|
||||
|
|
@ -100,7 +92,7 @@ SettingsIdentities.prototype.onFocus = function ()
|
|||
sSignature = RL.data().signature()
|
||||
;
|
||||
|
||||
this.editor = new HtmlEditorWrapper(self.signatureDom(), function () {
|
||||
this.editor = new NewHtmlEditorWrapper(self.signatureDom(), function () {
|
||||
RL.data().signature(
|
||||
(self.editor.isHtml() ? ':HTML:' : '') + self.editor.getData()
|
||||
);
|
||||
|
|
@ -114,15 +106,6 @@ SettingsIdentities.prototype.onFocus = function ()
|
|||
self.editor.setPlain(sSignature, false);
|
||||
}
|
||||
});
|
||||
|
||||
this.editor.addInputFormatStyle();
|
||||
|
||||
Utils.initOnStartOrLangChange(function () {
|
||||
self.editor.setupLang(
|
||||
Utils.i18n('EDITOR/TEXT_SWITCHER_RICH_FORMATTING'),
|
||||
Utils.i18n('EDITOR/TEXT_SWITCHER_PLAINT_TEXT')
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -23,14 +23,6 @@ function SettingsIdentity()
|
|||
|
||||
Utils.addSettingsViewModel(SettingsIdentity, 'SettingsIdentity', 'SETTINGS_LABELS/LABEL_IDENTITY_NAME', 'identity');
|
||||
|
||||
SettingsIdentity.prototype.onHide = function ()
|
||||
{
|
||||
if (this.editor)
|
||||
{
|
||||
this.editor.hideEditorToolbar();
|
||||
}
|
||||
};
|
||||
|
||||
SettingsIdentity.prototype.onFocus = function ()
|
||||
{
|
||||
if (!this.editor && this.signatureDom())
|
||||
|
|
@ -40,7 +32,7 @@ SettingsIdentity.prototype.onFocus = function ()
|
|||
sSignature = RL.data().signature()
|
||||
;
|
||||
|
||||
this.editor = new HtmlEditorWrapper(self.signatureDom(), function () {
|
||||
this.editor = new NewHtmlEditorWrapper(self.signatureDom(), function () {
|
||||
RL.data().signature(
|
||||
(self.editor.isHtml() ? ':HTML:' : '') + self.editor.getData()
|
||||
);
|
||||
|
|
@ -54,15 +46,6 @@ SettingsIdentity.prototype.onFocus = function ()
|
|||
self.editor.setPlain(sSignature, false);
|
||||
}
|
||||
});
|
||||
|
||||
this.editor.addInputFormatStyle();
|
||||
|
||||
Utils.initOnStartOrLangChange(function () {
|
||||
self.editor.setupLang(
|
||||
Utils.i18n('EDITOR/TEXT_SWITCHER_RICH_FORMATTING'),
|
||||
Utils.i18n('EDITOR/TEXT_SWITCHER_PLAINT_TEXT')
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
@import "_FontasticToBoot.less";
|
||||
@import "_BootstrapFix.less";
|
||||
@import "_InputosaurusFix.less";
|
||||
@import "_CkeFix.less";
|
||||
|
||||
@import "Ui.less";
|
||||
@import "Main.less";
|
||||
|
|
@ -71,5 +72,4 @@
|
|||
@import "SettingsThemes.less";
|
||||
|
||||
@import "Animations.less";
|
||||
@import "HtmlEditorWrapper.less";
|
||||
@import "_End.less";
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.textAreaParent {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.b-header-toolbar {
|
||||
|
||||
height: 40px;
|
||||
|
|
@ -45,7 +49,7 @@
|
|||
.b-header {
|
||||
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #333;
|
||||
/*border-bottom: 1px solid #333;*/
|
||||
background-color: #eee;
|
||||
color: #333;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,163 +0,0 @@
|
|||
.html-editor-wrapper {
|
||||
position: relative;
|
||||
/*overflow: hidden;*/
|
||||
}
|
||||
|
||||
.html-editor-wrapper-fullscreen {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html.html-editor-wrapper-fullscreen .html-editor-wrapper {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html, .html-editor-wrapper-plain {
|
||||
background-color: #fff;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
padding: 10px;
|
||||
padding-right: 0;
|
||||
font-family: arial,sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #333;
|
||||
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html:focus, .html-editor-wrapper-plain:focus {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html.styled, .html-editor-wrapper-plain.styled {
|
||||
border: 1px solid #cccccc;
|
||||
|
||||
-webkit-transition: border linear .2s, box-shadow linear .2s;
|
||||
-moz-transition: border linear .2s, box-shadow linear .2s;
|
||||
-o-transition: border linear .2s, box-shadow linear .2s;
|
||||
transition: border linear .2s, box-shadow linear .2s;
|
||||
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
html.html-editor-wrapper-fullscreen .html-editor-wrapper-html.styled, html.html-editor-wrapper-fullscreen .html-editor-wrapper-plain.styled {
|
||||
|
||||
border: 0;
|
||||
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html.styled:focus, .html-editor-wrapper-plain.styled:focus,
|
||||
.html-editor-wrapper-html.styled.focused, .html-editor-wrapper-plain.styled.focused
|
||||
{
|
||||
border: 1px solid #999999;
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-plain {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
resize: none;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-mode-button, .html-editor-wrapper-fullscreen-button {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 25px;
|
||||
z-index: 100;
|
||||
color: #555;
|
||||
text-decoration: underline;
|
||||
font-family: Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
|
||||
font-size: 12px;
|
||||
|
||||
background-color: #fff;
|
||||
/*background-color: rgba(255, 255, 255, 0.8);*/
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-mode-button:hover, .html-editor-wrapper-fullscreen-button:hover {
|
||||
text-decoration: underline;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-fullscreen-button {
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html ul {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html ul li {
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html ol {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.html-editor-wrapper-html ol li {
|
||||
list-style-type: decimal !important;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html blockquote {
|
||||
border: 0;
|
||||
border-left: solid 2px #444;
|
||||
margin: 5px 0 5px 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.html-editor-wrapper-html img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.cke_button__sourcedialog_label {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.e-signature-place {
|
||||
display: inline-block;
|
||||
width: 600px;
|
||||
width: 700px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
|
|
|
|||
101
dev/Styles/_CkeFix.less
Normal file
101
dev/Styles/_CkeFix.less
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
/*.cke_button__sourcedialog_label {
|
||||
display: none !important;
|
||||
}*/
|
||||
|
||||
.cke_plain {
|
||||
|
||||
background-color: #fff;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
padding: 10px;
|
||||
padding-right: 0;
|
||||
font-family: arial,sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #333;
|
||||
resize: none;
|
||||
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cke_plain:focus, .cke_source:focus {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.b-compose .cke_chrome {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cke_wysiwyg_div {
|
||||
padding: 10px !important;
|
||||
font-family: arial,sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #333;
|
||||
|
||||
ul {
|
||||
padding-left: 40px;
|
||||
li {
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 40px;
|
||||
li {
|
||||
list-style-type: decimal !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border: 0;
|
||||
border-left: solid 2px #444;
|
||||
margin: 5px 0 5px 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
blockquote * {
|
||||
font-family: arial,sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
|
||||
&:visited {
|
||||
color: #609;
|
||||
}
|
||||
&:active {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -156,13 +156,12 @@ function PopupsComposeViewModel()
|
|||
}
|
||||
}, this);
|
||||
|
||||
this.emptyToError.subscribe(function (bValue) {
|
||||
if (this.oEditor && bValue)
|
||||
{
|
||||
this.oEditor.toolbarReposition();
|
||||
}
|
||||
}, this);
|
||||
this.editorResizeThrottle = _.throttle(_.bind(this.editorResize, this), 100);
|
||||
|
||||
this.resizer.subscribe(function () {
|
||||
this.editorResizeThrottle();
|
||||
}, this);
|
||||
|
||||
this.canBeSended = ko.computed(function () {
|
||||
return !this.sending() &&
|
||||
!this.saving() &&
|
||||
|
|
@ -564,11 +563,6 @@ PopupsComposeViewModel.prototype.onHide = function ()
|
|||
{
|
||||
this.reset();
|
||||
kn.routeOn();
|
||||
|
||||
if (this.oEditor)
|
||||
{
|
||||
this.oEditor.hideEditorToolbar();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -618,20 +612,10 @@ PopupsComposeViewModel.prototype.editor = function (fOnInit)
|
|||
if (!this.oEditor && this.composeEditorArea())
|
||||
{
|
||||
_.delay(function () {
|
||||
self.oEditor = new HtmlEditorWrapper(self.composeEditorArea(), null, function () {
|
||||
self.oEditor = new NewHtmlEditorWrapper(self.composeEditorArea(), null, function () {
|
||||
fOnInit(self.oEditor);
|
||||
});
|
||||
|
||||
Utils.initOnStartOrLangChange(null, self, function () {
|
||||
if (self.oEditor)
|
||||
{
|
||||
self.oEditor.setupLang(
|
||||
Utils.i18n('EDITOR/TEXT_SWITCHER_RICH_FORMATTING'),
|
||||
Utils.i18n('EDITOR/TEXT_SWITCHER_PLAINT_TEXT')
|
||||
);
|
||||
}
|
||||
});
|
||||
}, 400);
|
||||
}, 300);
|
||||
}
|
||||
else if (this.oEditor)
|
||||
{
|
||||
|
|
@ -904,6 +888,14 @@ PopupsComposeViewModel.prototype.onFocus = function ()
|
|||
this.triggerForResize();
|
||||
};
|
||||
|
||||
PopupsComposeViewModel.prototype.editorResize = function ()
|
||||
{
|
||||
if (this.oEditor)
|
||||
{
|
||||
this.oEditor.resize();
|
||||
}
|
||||
};
|
||||
|
||||
PopupsComposeViewModel.prototype.tryToClosePopup = function ()
|
||||
{
|
||||
var self = this;
|
||||
|
|
@ -951,6 +943,7 @@ PopupsComposeViewModel.prototype.onBuild = function ()
|
|||
|
||||
$window.on('resize', function () {
|
||||
self.triggerForResize();
|
||||
self.editorResizeThrottle();
|
||||
});
|
||||
|
||||
if (this.dropboxEnabled())
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue