Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript “csstricks like” texteditor Re: “csstricks like” texteditor

#125790
dgriesel
Participant

**UPDATE 2:** Doesn’t work in IE on CodePen, but works on my live site:


function getSelection(input)
{
input.focus();
if(typeof document.selection != 'undefined') {
var range = document.selection.createRange();
return range.text;
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
return input.value.substring(input.selectionStart, input.selectionEnd);
}
return "";
}

function setSelectionText(input, text)
{
/* für Internet Explorer */
input.focus();
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
range.text = text;
/* Anpassen der Cursorposition */
//range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', 0);
} else {
range.moveStart('character', -shortLength(text));
//range.moveEnd('character', -eTag.length);
range.moveEnd('character', 0);
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + text + input.value.substr(end);
/* Anpassen der Cursorposition */
input.selectionStart = start;
input.selectionEnd = start + shortLength(text);
}
/* für die übrigen Browser */
else
{
// einfach am Ende einfügen
input.value = input.value + aTag + eTag;
}
}

function insert(input, aTag, eTag)
{
/* für Internet Explorer */
input.focus();
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
var text = aTag + insText + eTag
range.text = text;
/* Anpassen der Cursorposition */
//range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -shortLength(eTag));
} else {
range.moveStart('character', -shortLength(insText) -shortLength(eTag));
//range.moveEnd('character', -eTag.length);
range.moveEnd('character', -shortLength(eTag));
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + shortLength(aTag);
} else {
pos = start + shortLength(aTag);
}
input.selectionStart = pos;
input.selectionEnd = pos + insText.length;
}
/* für die übrigen Browser */
else
{
// einfach am Ende einfügen
input.value = input.value + aTag + eTag;
}
}

getSelection(input) returns the selected text for a given input-element
setSelectionText(input, text) replaces the selected text in a given input-element with text
insert(input, aTag, eTag) surrounds the selected text in input with aTag and eTag