“csstricks like” texteditor

[mostafaghanbari]

#hi it’s me again.
i want to create a css-tricks like texteditor with javascript and jQuary. everything works great till i found out that my codes doesnt work in IE! here is my code for **italic** button:

var textComponent = document.getElementById('comment'); //"coment" is id of the textarea

var selectedText;



if (textComponent.selectionStart != undefined) //means if browser is not IE

{

var startPos = textComponent.selectionStart; //selects index of selected text's start position

var endPos = textComponent.selectionEnd;     //selects index of selected text's end postion

selectedText = textComponent.value.substring(startPos, endPos);  //cuts selected text



if ( selectedText != "" )     //if selected text is not empty

{

var strLen = selectedText.length;     //gets selected text lenght



//selects everything before selected text

var tempFirst = textComponent.value.slice(0,startPos);



//selects everything after selected text:

var tempSecond = textComponent.value.slice( startPos + strLen, textComponent.value.length);



var n = tempFirst + "*" + selectedText + "*" + tempSecond; //adds markdown for italic to selected text



document.getElementById("comment").value=n;

}

}

i wrote this code for determining that user browser is IE:

else if (document.selection != undefined){  //if user browser is IE

...

}

everything in IE version is ok(because it’s javascript!!) but the problem is you can not find startPos and endPos of selected text in IE with this method. i googled and found nothing! createTextRange() or createRange() dont work!
after 2day search in google i can get startPos but i need endPos too. this is the code for IE:

else if (document.selection != undefined){  //if user browser is IE

textComponent.focus();



var r = document.selection.createRange();



var re = textComponent.createTextRange(),

rc = re.duplicate();



re.moveToBookmark(r.getBookmark());

rc.setEndPoint('EndToStart', re);



startPos = rc.text.length;

endPos = ????? // :'(

}

#updated:
here is the code pen:
[My Code Pen To this Code](http://codepen.io/mostafaghanbari-cssmax/pen/AxFEm “Code Pen to This Code”)

[mostafaghanbari]

any help?

[GJN]

A demo or link to an active site that uses this would be useful to troubleshoot

[Andy Howells]

Or even better – [make a codepen](http://codepen.io/pen)

[mostafaghanbari]

yes guys i’ll do so, thanks

[mostafaghanbari]

here is my code pen to this code:
http://codepen.io/mostafaghanbari-cssmax/pen/AxFEm

[chrisburton]

Here is the file for this: https://css-tricks.com/forums/themes/css-tricks-10/js/forums-ck.js

[mostafaghanbari]

thanks @chrisburton, i’m processing forums-ck.js to understand that and find out how can i change for mine ;)

[chrisburton]

I wish I could help you further but Javascript is definitely not my area. Sorry!

[mostafaghanbari]

that was not the file i need Chris. i’m a *newbie* in JS and don’t say that you are very welcome.

[chrisburton]

I think it is the file for the functionality you’re talking about. @chriscoyier is using Markdown so it adheres to those specific characters needed to change the style of the text.

[chrisburton]

@mostafaghanbari I grabbed this code from the Kirby panel and it seems to work.

Demo: http://codepen.io/chrisburton/pen/Jmqdi

[mostafaghanbari]

@chrisburton sadly it doesnt work in IE :( i dont know why IE is **always** different from any other browsers even it’s old versions! appreciate that but i opened your work in IE and nothing happend! even in IE8(using browserstack.com and IE developers tools)!! i worked 72hours for fixing this but till now i got nothing! :( and again **appreciate** Chris for your help.

[mostafaghanbari]

@Hompimpa yes anybody know how to replace part of the selected text with something but your code doesn’t work in IE like mine!! dont test it on jsfiddle.net because it runs on their server not on your web browser! so you test jsfiddle version with IE and think it works! you can test it on codepen and see the resualts. the problem is **selectionStart** and **selectionEnd** doesn’t work in God damn IE!

[dgriesel]

**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

[Author]

Posts