if(!vars.p && !vars.br)
$htmlContent = $htmlContent.replace(/\
(.*?)\<\/p>/ig, '
$1
');
return $htmlContent;
}
// the function of exporting contents of the text field to the source field (to be the standard in all browsers)
function postToSource()
{
// clear unnecessary tags when editor view empty
var sourceStrings = editor.text()=="" && editor.html().length<12 ? "" : editor.html();
thisElement.val(extractToText(sourceStrings));
}
// the function of exporting contents of the source field to the text field (to be the standard in all browsers)
function postToEditor()
{
editor.html(extractToText(thisElement.val()));
}
// the function of getting parent (or super parent) tag name of the selected node
function detectElement(tags){
var resultdetect=false, $node = getSelectedNode(), parentsTag;
if($node)
{
$.each(tags, (i, val) => {
parentsTag = $node.prop('tagName').toLowerCase();
if (parentsTag == val)
resultdetect = true;
else
{
$node.parents().each(function(){
parentsTag = $(this).prop('tagName').toLowerCase();
if (parentsTag == val)
resultdetect = true;
});
}
});
return resultdetect;
}
else
return false;
};
// the function of highlighting the toolbar buttons according to the cursor position in jqte editor
function buttonEmphasize(e)
{
for(var n = 0; n < buttons.length; n++)
{
if(vars[buttons[n].name] && buttons[n].emphasis && buttons[n].tag!='')
detectElement(buttons[n].tag) ? toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`).addClass(emphasize) : $(`.${vars.css}_tool_${buttons[n].cls}`).removeClass(emphasize);
}
// showing text format
if(vars.format && $.isArray(vars.formats))
{
var isFoundFormat = false;
for(var f = 0; f < vars.formats.length; f++)
{
var thisFormat = [];
thisFormat[0] = vars.formats[f][0];
if(vars.formats[f][0].length>0 && detectElement(thisFormat))
{
formatLabelView(vars.formats[f][1]);
isFoundFormat = true;
break;
}
}
if(!isFoundFormat)
formatLabelView(vars.formats[0][1]);
}
// hide all style-fields
styleFieldSwitch("",false);
formatFieldSwitch(false);
}
// the event of click to the toolbar buttons
toolbutton
.unbind("click")
.click(function(e){
// if source button is clicked
if($(this).data('command')=='displaysource' && !toolbar.data("sourceOpened"))
{
// hide all the toolbar buttons (except the source button)
toolbar.find(`.${vars.css}_tool`).addClass(`${vars.css}_hiddenField`);
$(this).removeClass(`${vars.css}_hiddenField`);
// update to data of source displaying
toolbar.data("sourceOpened",true);
// equalize height of the text field with height of the source field
thisElement.css("height",editor.outerHeight());
sourceField.removeClass(`${vars.css}_hiddenField`);
editor.addClass(`${vars.css}_hiddenField`);
thisElement.focus();
// hide the link-form-field
linkAreaSwitch(false);
// hide all style-fields
styleFieldSwitch("",false);
// hide format field
formatFieldSwitch();
// hide placeholder
if(vars.placeholder && vars.placeholder!="")
placeHolder.hide();
}
// if other buttons is clicked
else
{
// if source field is closed
if(!toolbar.data("sourceOpened"))
{
// if insert-link-button is clicked
if($(this).data('command')=='linkcreator')
{
if(!toolbar.data("linkOpened"))
selected2link();
else
{
// hide the link-form-field
linkAreaSwitch(false);
// hide format field
formatFieldSwitch(false);
}
}
// if the format button is clicked
else if($(this).data('command')=='formats')
{
if($(this).data('command')=='formats' && !$(e.target).hasClass(`${vars.css}_format`))
selected2format();
// hide all style-fields
styleFieldSwitch("",false);
if(editor.not(":focus"))
editor.focus();
}
// if the style buttons are clicked
else if($(this).data('command')=='fSize' || $(this).data('command')=='colors')
{
if(
($(this).data('command')=='fSize' && !$(e.target).hasClass(`${vars.css}_fontsize`)) || // the font-size button
($(this).data('command')=='colors' && !$(e.target).hasClass(`${vars.css}_color`)) // the color button
)
selected2style($(this).data('command'));
// hide format field
formatFieldSwitch(false);
if(editor.not(":focus"))
editor.focus();
}
// if other buttons is clicked
else
{
// first, prevent to conflict of different jqte editors
if(editor.not(":focus"))
editor.focus();
// apply command of clicked button to the selected text
selectionSet($(this).data('command'),null);
// hide all menu-fields
styleFieldSwitch("",false);
formatFieldSwitch(false);
linktypeSwitch();
// to highlight the toolbar buttons according to the cursor position in jqte editor
$(this).data('emphasis')==true && !$(this).hasClass(emphasize) ? $(this).addClass(emphasize) : $(this).removeClass(emphasize);
sourceField.addClass(`${vars.css}_hiddenField`);
editor.removeClass(`${vars.css}_hiddenField`);
}
}
// hide the source field and display the text field
else
{
// update to data of source hiding
toolbar.data("sourceOpened",false);
// display all the toolbar buttons
toolbar.find(`.${vars.css}_tool`).removeClass(`${vars.css}_hiddenField`);
sourceField.addClass(`${vars.css}_hiddenField`);
editor.removeClass(`${vars.css}_hiddenField`);
}
if(vars.placeholder && vars.placeholder!="")
editor.html()!="" ? placeHolder.hide() : placeHolder.show();
}
// export contents of the text to the sources
editor.trigger("change");
})
// the event of showing to the title bubble when mouse over of the toolbar buttons
.hover(function(e){
if(vars.title && $(this).data("title")!="" && ( $(e.target).hasClass(`${vars.css}_tool`) || $(e.target).hasClass(`${vars.css}_tool_icon`) ))
{
$(`.${vars.css}_title`).remove();
// create the title bubble
jQTE.append(`
`);
var thisTitle = $(`.${vars.css}_title:first`);
var thisArrow = thisTitle.find(`.${vars.css}_titleArrowIcon`);
var thisPosition = $(this).position();
var thisAlignX = thisPosition.left + $(this).outerWidth() - (thisTitle.outerWidth()/2) - ($(this).outerWidth()/2);
var thisAlignY = (thisPosition.top + $(this).outerHeight() + 5);
// show the title bubble and set to its position
thisTitle.delay(400).css({ 'top':thisAlignY, 'left':thisAlignX }).fadeIn(200);
}
},() => {
$(`.${vars.css}_title`).remove();
});
// prevent multiple calling postToSource()
var editorChangeTimer = null;
// the methods of the text fields
editor
// trigger change method of the text field when the text field modified
.bind("keypress keyup keydown drop cut copy paste DOMCharacterDataModified DOMSubtreeModified",function()
{
// export contents of the text to the sources
if(!toolbar.data("sourceOpened"))
$(this).trigger("change");
// hide the link-type-field
linktypeSwitch();
// if the change method is added run the change method
if($.isFunction(vars.change))
vars.change();
// the feature of placeholder
if(vars.placeholder && vars.placeholder!="")
$(this).text()!="" ? placeHolder.hide() : placeHolder.show();
})
.bind("change",() => {
if(!toolbar.data("sourceOpened"))
{
clearTimeout(editorChangeTimer);
editorChangeTimer = setTimeout(postToSource,10);
}
})
// run to keyboard shortcuts
.keydown((e) => {
// if ctrl key is clicked
if(e.ctrlKey)
{
// check all toolbar buttons
for(var n = 0; n < buttons.length; n++)
{
// if this settings of this button is activated (is it true)
// if the keyed button with ctrl is same of hotkey of this button
if(vars[buttons[n].name] && e.keyCode == buttons[n].key.charCodeAt(0))
{
if(buttons[n].command!='' && buttons[n].command!='linkcreator')
selectionSet(buttons[n].command,null);
else if(buttons[n].command=='linkcreator')
selected2link();
return false;
}
}
}
})
// method of triggering to the highlight button
.bind("mouseup keyup",buttonEmphasize)
// the event of focus to the text field
.focus(() => {
// if the focus method is added run the focus method
if($.isFunction(vars.focus))
vars.focus();
// add onfocus class
jQTE.addClass(`${vars.css}_focused`);
// prevent focus problem on opera
if(/opera/.test(thisBrowser))
{
var range = document.createRange();
range.selectNodeContents(editor[0]);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
})
// the event of focus out from the text field
.focusout(() => {
// remove to highlights of all toolbar buttons
toolbutton.removeClass(emphasize);
// hide all menu-fields
styleFieldSwitch("",false);
formatFieldSwitch(false);
linktypeSwitch();
// if the blur method is added run the blur method
if($.isFunction(vars.blur))
vars.blur();
// remove onfocus class
jQTE.removeClass(`${vars.css}_focused`);
// show default text format
if($.isArray(vars.formats))
formatLabelView(vars.formats[0][1]);
});
// the event of key in the source field
thisElement
.bind("keydown keyup",function()
{
// export contents of the source to the text field
setTimeout(postToEditor,0);
// auto extension for the source field
$(this).height($(this)[0].scrollHeight);
// if the source field is empty, shorten to the source field
if($(this).val()=="")
$(this).height(0);
})
.focus(() => {
// add onfocus class
jQTE.addClass(`${vars.css}_focused`);
})
.focusout(() => {
// remove onfocus class
jQTE.removeClass(`${vars.css}_focused`);
});
});
};
})(jQuery);