Home › Forums › JavaScript › “csstricks like” texteditor
- This topic is empty.
-
AuthorPosts
-
February 23, 2013 at 10:48 am #42075
mostafaghanbari
Member#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”)February 23, 2013 at 12:04 pm #125726mostafaghanbari
Memberany help?
February 23, 2013 at 12:17 pm #125729GJN
MemberA demo or link to an active site that uses this would be useful to troubleshoot
February 23, 2013 at 12:17 pm #125730Andy Howells
ParticipantOr even better – [make a codepen](http://codepen.io/pen)
February 23, 2013 at 12:20 pm #125732mostafaghanbari
Memberyes guys i’ll do so, thanks
February 23, 2013 at 12:57 pm #125746mostafaghanbari
Memberhere is my code pen to this code:
http://codepen.io/mostafaghanbari-cssmax/pen/AxFEmFebruary 23, 2013 at 1:07 pm #125751chrisburton
ParticipantHere is the file for this: https://css-tricks.com/forums/themes/css-tricks-10/js/forums-ck.js
February 23, 2013 at 1:14 pm #125756mostafaghanbari
Memberthanks @chrisburton, i’m processing forums-ck.js to understand that and find out how can i change for mine ;)
February 23, 2013 at 1:15 pm #125758chrisburton
ParticipantI wish I could help you further but Javascript is definitely not my area. Sorry!
February 23, 2013 at 1:24 pm #125759mostafaghanbari
Memberthat was not the file i need Chris. i’m a *newbie* in JS and don’t say that you are very welcome.
February 23, 2013 at 1:30 pm #125760chrisburton
ParticipantI 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.
February 23, 2013 at 1:56 pm #125761chrisburton
Participant@mostafaghanbari I grabbed this code from the Kirby panel and it seems to work.
February 23, 2013 at 3:42 pm #125767mostafaghanbari
Member@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.
February 24, 2013 at 4:33 am #125789mostafaghanbari
Member@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!
February 24, 2013 at 5:11 am #125790dgriesel
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 withtext
insert(input, aTag, eTag)
surrounds the selected text ininput
withaTag
andeTag
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.