Grow your CSS skills. Land your dream job.

“csstricks like” texteditor

  • # February 23, 2013 at 10:48 am

    #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

    any help?

    GJN
    # February 23, 2013 at 12:17 pm

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

    # February 23, 2013 at 12:17 pm

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

    # February 23, 2013 at 12:20 pm

    yes guys i’ll do so, thanks

    # February 23, 2013 at 12:57 pm

    here is my code pen to this code:

    http://codepen.io/mostafaghanbari-cssmax/pen/AxFEm

    # February 23, 2013 at 1:07 pm

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

    # February 23, 2013 at 1:14 pm

    thanks @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

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

    # February 23, 2013 at 1:24 pm

    that 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

    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.

    # February 23, 2013 at 1:56 pm

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

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

    # February 23, 2013 at 3:42 pm

    @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 2:43 am

    I got this from Stackoverflow:

    function wrapText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
    }

    // usage: wrapText('textarea-id', '<strong>', '</strong>');

    The `$(‘#’ + elementID)` is a JQuery selector. You may change that into `document.getElementById(elementID)` and `textArea.val()` into `textArea.value`

    http://jsfiddle.net/tovic/bd4np/

    By the way, does anybody know how to replace part of the selected text with something. For example, replace all `n` character in the selected text with `nt` for indentation like in Stackoverflow?

    Edit 25 Feb: My English

    # February 24, 2013 at 4:33 am

    @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!

Viewing 15 posts - 1 through 15 (of 23 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".