').html(t.$ta.val());
//scrub the html before loading into the doc
var safe = $('
').append(html);
$(t.o.tagsToRemove.join(','), safe).remove();
t.$ed.html(safe.contents().html());
}
if (t.o.autogrow) {
t.height = t.$ed.height();
if (t.height !== t.$ta.css('height')) {
t.$ta.css({height: t.height});
t.$c.trigger('tbwresize');
}
}
if (t.o.autogrowOnEnter) {
// t.autogrowEditorOnEnter();
t.$ed.height('auto');
var totalheight = t.autogrowOnEnterWasFocused ? t.$ed[0].scrollHeight : t.$ed.css('min-height');
if (totalheight !== t.$ta.css('height')) {
t.$ed.css({height: totalheight});
t.$c.trigger('tbwresize');
}
}
},
// Analyse and update to semantic code
// @param force : force to sync code from textarea
// @param full : wrap text nodes in
// @param keepRange : leave selection range as it is
semanticCode: function (force, full, keepRange) {
var t = this;
t.saveRange();
t.syncCode(force);
if (t.o.semantic) {
t.semanticTag('b');
t.semanticTag('i');
t.semanticTag('s');
t.semanticTag('strike');
if (full) {
var inlineElementsSelector = t.o.inlineElementsSelector,
blockElementsSelector = ':not(' + inlineElementsSelector + ')';
// Wrap text nodes in span for easier processing
t.$ed.contents().filter(function () {
return this.nodeType === 3 && this.nodeValue.trim().length > 0;
}).wrap('');
// Wrap groups of inline elements in paragraphs (recursive)
var wrapInlinesInParagraphsFrom = function ($from) {
if ($from.length !== 0) {
var $finalParagraph = $from.nextUntil(blockElementsSelector).addBack().wrapAll('
').parent(),
$nextElement = $finalParagraph.nextAll(inlineElementsSelector).first();
$finalParagraph.next('br').remove();
wrapInlinesInParagraphsFrom($nextElement);
}
};
wrapInlinesInParagraphsFrom(t.$ed.children(inlineElementsSelector).first());
t.semanticTag('div', true);
// Unwrap paragraphs content, containing nothing usefull
t.$ed.find('p').filter(function () {
// Don't remove currently being edited element
if (t.range && this === t.range.startContainer) {
return false;
}
return $(this).text().trim().length === 0 && $(this).children().not('br,span').length === 0;
}).contents().unwrap();
// Get rid of temporary span's
$('[data-tbw]', t.$ed).contents().unwrap();
// Remove empty
t.$ed.find('p:empty').remove();
}
if (!keepRange) {
t.restoreRange();
}
t.syncTextarea();
}
},
semanticTag: function (oldTag, copyAttributes) {
var newTag;
if (this.o.semantic != null && typeof this.o.semantic === 'object' && this.o.semantic.hasOwnProperty(oldTag)) {
newTag = this.o.semantic[oldTag];
} else if (this.o.semantic === true && this.DEFAULT_SEMANTIC_MAP.hasOwnProperty(oldTag)) {
newTag = this.DEFAULT_SEMANTIC_MAP[oldTag];
} else {
return;
}
$(oldTag, this.$ed).each(function () {
var $oldTag = $(this);
if($oldTag.contents().length === 0) {
return false;
}
$oldTag.wrap('<' + newTag + '/>');
if (copyAttributes) {
$.each($oldTag.prop('attributes'), function () {
$oldTag.parent().attr(this.name, this.value);
});
}
$oldTag.contents().unwrap();
});
},
// Function call when user click on "Insert Link"
createLink: function () {
var t = this,
documentSelection = t.doc.getSelection(),
node = documentSelection.focusNode,
text = new XMLSerializer().serializeToString(documentSelection.getRangeAt(0).cloneContents()),
url,
title,
target;
while (['A', 'DIV'].indexOf(node.nodeName) < 0) {
node = node.parentNode;
}
if (node && node.nodeName === 'A') {
var $a = $(node);
text = $a.text();
url = $a.attr('href');
if (!t.o.minimalLinks) {
title = $a.attr('title');
target = $a.attr('target');
}
var range = t.doc.createRange();
range.selectNode(node);
documentSelection.removeAllRanges();
documentSelection.addRange(range);
}
t.saveRange();
var options = {
url: {
label: 'URL',
required: true,
value: url
},
text: {
label: t.lang.text,
value: text
}
};
if (!t.o.minimalLinks) {
Object.assign(options, {
title: {
label: t.lang.title,
value: title
},
target: {
label: t.lang.target,
value: target
}
});
}
t.openModalInsert(t.lang.createLink, options, function (v) { // v is value
var url = t.prependUrlPrefix(v.url);
if (!url.length) {
return false;
}
var link = $(['', v.text || v.url, ''].join(''));
if (!t.o.minimalLinks) {
if (v.title.length > 0) {
link.attr('title', v.title);
}
if (v.target.length > 0) {
link.attr('target', v.target);
}
}
t.range.deleteContents();
t.range.insertNode(link[0]);
t.syncCode();
t.$c.trigger('tbwchange');
return true;
});
},
prependUrlPrefix: function (url) {
var t = this;
if (!t.urlPrefix) {
return url;
}
var VALID_LINK_PREFIX = /^([a-z][-+.a-z0-9]*:|\/|#)/i;
if (VALID_LINK_PREFIX.test(url)) {
return url;
}
var SIMPLE_EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (SIMPLE_EMAIL_REGEX.test(url)) {
return 'mailto:' + url;
}
return t.urlPrefix + url;
},
unlink: function () {
var t = this,
documentSelection = t.doc.getSelection(),
node = documentSelection.focusNode;
if (documentSelection.isCollapsed) {
while (['A', 'DIV'].indexOf(node.nodeName) < 0) {
node = node.parentNode;
}
if (node && node.nodeName === 'A') {
var range = t.doc.createRange();
range.selectNode(node);
documentSelection.removeAllRanges();
documentSelection.addRange(range);
}
}
t.execCmd('unlink', undefined, undefined, true);
},
insertImage: function () {
var t = this;
t.saveRange();
var options = {
url: {
label: 'URL',
required: true
},
alt: {
label: t.lang.description,
value: t.getRangeText()
}
};
if (t.o.imageWidthModalEdit) {
options.width = {};
}
t.openModalInsert(t.lang.insertImage, options, function (v) { // v are values
t.execCmd('insertImage', v.url, false, true);
var $img = $('img[src="' + v.url + '"]:not([alt])', t.$box);
$img.attr('alt', v.alt);
if (t.o.imageWidthModalEdit) {
$img.attr({
width: v.width
});
}
t.syncCode();
t.$c.trigger('tbwchange');
return true;
});
},
fullscreen: function () {
var t = this,
prefix = t.o.prefix,
fullscreenCssClass = prefix + 'fullscreen',
isFullscreen;
t.$box.toggleClass(fullscreenCssClass);
isFullscreen = t.$box.hasClass(fullscreenCssClass);
$('body').toggleClass(prefix + 'body-fullscreen', isFullscreen);
$(window).trigger('scroll');
t.$c.trigger('tbw' + (isFullscreen ? 'open' : 'close') + 'fullscreen');
},
/*
* Call method of trumbowyg if exist
* else try to call anonymous function
* and finaly native execCommand
*/
execCmd: function (cmd, param, forceCss, skipTrumbowyg) {
var t = this;
skipTrumbowyg = !!skipTrumbowyg || '';
if (cmd !== 'dropdown') {
t.$ed.focus();
}
try {
t.doc.execCommand('styleWithCSS', false, forceCss || false);
} catch (c) {
}
try {
t[cmd + skipTrumbowyg](param);
} catch (c) {
try {
cmd(param);
} catch (e2) {
if (cmd === 'insertHorizontalRule') {
param = undefined;
} else if (cmd === 'formatBlock' && t.isIE) {
param = '<' + param + '>';
}
t.doc.execCommand(cmd, false, param);
t.syncCode();
t.semanticCode(false, true);
}
if (cmd !== 'dropdown') {
t.updateButtonPaneStatus();
t.$c.trigger('tbwchange');
}
}
},
// Open a modal box
openModal: function (title, content) {
var t = this,
prefix = t.o.prefix;
// No open a modal box when exist other modal box
if ($('.' + prefix + 'modal-box', t.$box).length > 0) {
return false;
}
if (t.o.autogrowOnEnter) {
t.autogrowOnEnterDontClose = true;
}
t.saveRange();
t.showOverlay();
// Disable all btnPane btns
t.$btnPane.addClass(prefix + 'disable');
// Build out of ModalBox, it's the mask for animations
var $modal = $('
', {
class: prefix + 'modal ' + prefix + 'fixed-top'
}).css({
top: t.$box.offset().top + t.$btnPane.height(),
zIndex: 99999
}).appendTo($(t.doc.body));
// Click on overlay close modal by cancelling them
t.$overlay.one('click', function () {
$modal.trigger(CANCEL_EVENT);
return false;
});
// Build the form
var $form = $('
', {
action: '',
html: content
})
.on('submit', function () {
$modal.trigger(CONFIRM_EVENT);
return false;
})
.on('reset', function () {
$modal.trigger(CANCEL_EVENT);
return false;
})
.on('submit reset', function () {
if (t.o.autogrowOnEnter) {
t.autogrowOnEnterDontClose = false;
}
});
// Build ModalBox and animate to show them
var $box = $('
', {
class: prefix + 'modal-box',
html: $form
})
.css({
top: '-' + t.$btnPane.outerHeight() + 'px',
opacity: 0
})
.appendTo($modal)
.animate({
top: 0,
opacity: 1
}, 100);
// Append title
$('
', {
text: title,
class: prefix + 'modal-title'
}).prependTo($box);
$modal.height($box.outerHeight() + 10);
// Focus in modal box
$('input:first', $box).focus();
// Append Confirm and Cancel buttons
t.buildModalBtn('submit', $box);
t.buildModalBtn('reset', $box);
$(window).trigger('scroll');
return $modal;
},
// @param n is name of modal
buildModalBtn: function (n, $modal) {
var t = this,
prefix = t.o.prefix;
return $('
', {
class: prefix + 'modal-button ' + prefix + 'modal-' + n,
type: n,
text: t.lang[n] || n
}).appendTo($('form', $modal));
},
// close current modal box
closeModal: function () {
var t = this,
prefix = t.o.prefix;
t.$btnPane.removeClass(prefix + 'disable');
t.$overlay.off();
// Find the modal box
var $modalBox = $('.' + prefix + 'modal-box', $(t.doc.body));
$modalBox.animate({
top: '-' + $modalBox.height()
}, 100, function () {
$modalBox.parent().remove();
t.hideOverlay();
});
t.restoreRange();
},
// Preformated build and management modal
openModalInsert: function (title, fields, cmd) {
var t = this,
prefix = t.o.prefix,
lg = t.lang,
html = '';
$.each(fields, function (fieldName, field) {
var l = field.label || fieldName,
n = field.name || fieldName,
a = field.attributes || {};
var attr = Object.keys(a).map(function (prop) {
return prop + '="' + a[prop] + '"';
}).join(' ');
html += '
';
});
return t.openModal(title, html)
.on(CONFIRM_EVENT, function () {
var $form = $('form', $(this)),
valid = true,
values = {};
$.each(fields, function (fieldName, field) {
var n = field.name || fieldName;
var $field = $('input[name="' + n + '"]', $form),
inputType = $field.attr('type');
switch (inputType.toLowerCase()) {
case 'checkbox':
values[n] = $field.is(':checked');
break;
case 'radio':
values[n] = $field.filter(':checked').val();
break;
default:
values[n] = $.trim($field.val());
break;
}
// Validate value
if (field.required && values[n] === '') {
valid = false;
t.addErrorOnModalField($field, t.lang.required);
} else if (field.pattern && !field.pattern.test(values[n])) {
valid = false;
t.addErrorOnModalField($field, field.patternError);
}
});
if (valid) {
t.restoreRange();
if (cmd(values, fields)) {
t.syncCode();
t.$c.trigger('tbwchange');
t.closeModal();
$(this).off(CONFIRM_EVENT);
}
}
})
.one(CANCEL_EVENT, function () {
$(this).off(CONFIRM_EVENT);
t.closeModal();
});
},
addErrorOnModalField: function ($field, err) {
var prefix = this.o.prefix,
$label = $field.parent();
$field
.on('change keyup', function () {
$label.removeClass(prefix + 'input-error');
});
$label
.addClass(prefix + 'input-error')
.find('input+span')
.append(
$('
', {
class: prefix + 'msg-error',
text: err
})
);
},
getDefaultImgDblClickHandler: function () {
var t = this;
return function () {
var $img = $(this),
src = $img.attr('src'),
base64 = '(Base64)';
if (src.indexOf('data:image') === 0) {
src = base64;
}
var options = {
url: {
label: 'URL',
value: src,
required: true
},
alt: {
label: t.lang.description,
value: $img.attr('alt')
}
};
if (t.o.imageWidthModalEdit) {
options.width = {
value: $img.attr('width') ? $img.attr('width') : ''
};
}
t.openModalInsert(t.lang.insertImage, options, function (v) {
if (v.url !== base64) {
$img.attr({
src: v.url
});
}
$img.attr({
alt: v.alt
});
if (t.o.imageWidthModalEdit) {
if (parseInt(v.width) > 0) {
$img.attr({
width: v.width
});
} else {
$img.removeAttr('width');
}
}
return true;
});
return false;
};
},
// Range management
saveRange: function () {
var t = this,
documentSelection = t.doc.getSelection();
t.range = null;
if (!documentSelection || !documentSelection.rangeCount) {
return;
}
var savedRange = t.range = documentSelection.getRangeAt(0),
range = t.doc.createRange(),
rangeStart;
range.selectNodeContents(t.$ed[0]);
range.setEnd(savedRange.startContainer, savedRange.startOffset);
rangeStart = (range + '').length;
t.metaRange = {
start: rangeStart,
end: rangeStart + (savedRange + '').length
};
},
restoreRange: function () {
var t = this,
metaRange = t.metaRange,
savedRange = t.range,
documentSelection = t.doc.getSelection(),
range;
if (!savedRange) {
return;
}
if (metaRange && metaRange.start !== metaRange.end) { // Algorithm from http://jsfiddle.net/WeWy7/3/
var charIndex = 0,
nodeStack = [t.$ed[0]],
node,
foundStart = false,
stop = false;
range = t.doc.createRange();
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType === 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && metaRange.start >= charIndex && metaRange.start <= nextCharIndex) {
range.setStart(node, metaRange.start - charIndex);
foundStart = true;
}
if (foundStart && metaRange.end >= charIndex && metaRange.end <= nextCharIndex) {
range.setEnd(node, metaRange.end - charIndex);
stop = true;
}
charIndex = nextCharIndex;
} else {
var cn = node.childNodes,
i = cn.length;
while (i > 0) {
i -= 1;
nodeStack.push(cn[i]);
}
}
}
}
documentSelection.removeAllRanges();
documentSelection.addRange(range || savedRange);
},
getRangeText: function () {
return this.range + '';
},
updateButtonPaneStatus: function () {
var t = this,
prefix = t.o.prefix,
tags = t.getTagsRecursive(t.doc.getSelection().focusNode),
activeClasses = prefix + 'active-button ' + prefix + 'active';
$('.' + prefix + 'active-button', t.$btnPane).removeClass(activeClasses);
$.each(tags, function (i, tag) {
var btnName = t.tagToButton[tag.toLowerCase()],
$btn = $('.' + prefix + btnName + '-button', t.$btnPane);
if ($btn.length > 0) {
$btn.addClass(activeClasses);
} else {
try {
$btn = $('.' + prefix + 'dropdown .' + prefix + btnName + '-dropdown-button', t.$box);
var dropdownBtnName = $btn.parent().data('dropdown');
$('.' + prefix + dropdownBtnName + '-button', t.$box).addClass(activeClasses);
} catch (e) {
}
}
});
},
getTagsRecursive: function (element, tags) {
var t = this;
tags = tags || (element && element.tagName ? [element.tagName] : []);
if (element && element.parentNode) {
element = element.parentNode;
} else {
return tags;
}
var tag = element.tagName;
if (tag === 'DIV') {
return tags;
}
if (tag === 'P' && element.style.textAlign !== '') {
tags.push(element.style.textAlign);
}
$.each(t.tagHandlers, function (i, tagHandler) {
tags = tags.concat(tagHandler(element, t));
});
tags.push(tag);
return t.getTagsRecursive(element, tags).filter(function (tag) {
return tag != null;
});
},
// Plugins
initPlugins: function () {
var t = this;
t.loadedPlugins = [];
$.each($.trumbowyg.plugins, function (name, plugin) {
if (!plugin.shouldInit || plugin.shouldInit(t)) {
plugin.init(t);
if (plugin.tagHandler) {
t.tagHandlers.push(plugin.tagHandler);
}
t.loadedPlugins.push(plugin);
}
});
},
destroyPlugins: function () {
$.each(this.loadedPlugins, function (i, plugin) {
if (plugin.destroy) {
plugin.destroy();
}
});
}
};
})(navigator, window, document, jQuery);