Grow your CSS skills. Land your dream job.

“csstricks like” texteditor

  • # February 24, 2013 at 5:11 am

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

    # February 24, 2013 at 10:38 am

    @dgriesel thanks but i test your getSelection(input) method and insert(input, aTag, eTag) function and nothing happened in IE! the insert method doesnt recognize selected text!

    # February 24, 2013 at 3:20 pm

    Ok, now I’m confused. Where did you try it?
    When I used it in IE8 on CodePen, nothing worked. Then I opened the website I’ve been using it on and it worked.

    # February 24, 2013 at 3:55 pm

    @dgriesel i used your code directly into my site and nothing happend! after 3day work on this the closest code i have found is this link:


    [stack overflow](http://stackoverflow.com/questions/235411/is-there-an-internet-explorer-approved-substitute-for-selectionstart-and-selecti)


    **with this code you get what you want in codepen but the end point doesn’t work in IE!! i mean it just show current cursor position!!**

    # February 24, 2013 at 11:50 pm

    I like this website

    # February 25, 2013 at 4:10 am

    @mostafaghanbari that’s odd. If you like, you could give me a link to your site, so I can have a look where the problem is.

    # February 25, 2013 at 9:41 am

    sorry @dgriesel but its a local host site! :( on odd thing about it is that defiantly it works in IE but it doesnt work in my wordpress!! :( i’m implementing comment-template.php here is comment-template.php file(related codes not all of them):


    $required_text = sprintf( ' ' . __('Required fields are marked %s'), '<span class="required">*</span>' );
    $defaults = array(
    'fields' => apply_filters( 'comment_form_default_fields', $fields ),
    'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><div class="newCommentCommandBar"><p class="alignleft" onclick="textBold();">Bold</p>  <p class="alignleft" onclick="textItalic();">Italic</p>  <p class="alignleft" onclick="getLink();">Link</p>  <p id="getCode" class="alignleft" onclick="getCode();">Code</p><p id="newCommentHelpText" class="alignright">راهنما</p></div><div style="clear: both;"></div><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea><p class="newCommentTip" dir="rtl">برای نوشتن میتوانید از markdown استفاده کنید</p></p>',
    'must_log_in' => '<p class="must-log-in">' . sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
    'logged_in_as' => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), get_edit_user_link(), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
    'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',
    'comment_notes_after' => '<p class="form-allowed-tags">' . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
    'id_form' => 'commentform',
    'id_submit' => 'submit',
    'title_reply' => __( 'Leave a Reply' ),
    'title_reply_to' => __( 'Leave a Reply to %s' ),
    'cancel_reply_link' => __( 'Cancel reply' ),
    'label_submit' => __( 'Post Comment' ),
    );

    $args = wp_parse_args( $args, apply_filters( 'comment_form_defaults', $defaults ) );

    ?>

    function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
    textInputRange, len, endRange;

    range = document.selection.createRange();

    if (range && range.parentElement() == el) {
    len = el.value.length;
    normalizedValue = el.value.replace(/rn/g, "n");

    // Create a working TextRange that lives only in the input
    textInputRange = el.createTextRange();
    textInputRange.moveToBookmark(range.getBookmark());

    // Check if the start and end of the selection are at the very end
    // of the input, since moveStart/moveEnd doesn't return what we want
    // in those cases
    endRange = el.createTextRange();
    endRange.collapse(false);

    if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
    start = end = len;
    } else {
    start = -textInputRange.moveStart("character", -len);
    start += normalizedValue.slice(0, start).split("n").length - 1;

    if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
    end = len;
    } else {
    end = -textInputRange.moveEnd("character", -len);
    end += normalizedValue.slice(0, end).split("n").length - 1;
    }
    }
    }

    return {
    start: start,
    end: end
    };
    }


    function textItalic(){
    var textComponent = document.getElementById('comment');
    var selectedText;
    // IE version
    if (document.selection != undefined)
    {
    textComponent.focus();
    var sel = getInputSelection(textComponent);

    //this is where this code doesnt work
    alert(sel.start + ", " + sel.end);
    selectedText = textComponent.value.substring(sel.start, sel.end);

    if ( selectedText != "" )
    {
    var strLen = selectedText.length;
    var lastCharacter = selectedText.slice(strLen-1,strLen);
    var flagForSpace= "false";

    if (lastCharacter==" "){
    selectedText = selectedText.slice(0,strLen-1);
    flagForSpace = "true";
    }

    var tempFirst = textComponent.value.slice(0,startPos);
    var tempSecond = textComponent.value.slice( startPos + strLen, textComponent.value.length);
    if ( flagForSpace=="true" )
    var n = tempFirst + "*" + selectedText + "* " + tempSecond;
    else
    var n = tempFirst + "*" + selectedText + "*" + tempSecond;

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

    }
    // Mozilla version
    else if (textComponent.selectionStart != undefined)
    {
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
    if ( selectedText != "" )
    {
    var strLen = selectedText.length;
    var lastCharacter = selectedText.slice(strLen-1,strLen);
    var flagForSpace= "false";

    if (lastCharacter==" "){
    selectedText = selectedText.slice(0,strLen-1);
    flagForSpace = "true";
    }

    var tempFirst = textComponent.value.slice(0,startPos);
    var tempSecond = textComponent.value.slice( startPos + strLen, textComponent.value.length);
    if ( flagForSpace=="true" )
    var n = tempFirst + "*" + selectedText + "* " + tempSecond;
    else
    var n = tempFirst + "*" + selectedText + "*" + tempSecond;

    document.getElementById("comment").value=n;
    }
    }
    }
    # February 27, 2013 at 9:00 am

    I finally had the time to check your code. One problem was that in your IE if-block, startPos was never defined. I changed the logic a bit. Now getInputSelection distinguishes between IE and the rest, so you don’t have to duplicate the insertion code.

    Check [this CodePen](http://codepen.io/anon/pen/rDfIw “”), it works for me even in IE.

Viewing 8 posts - 16 through 23 (of 23 total)

You must be logged in to reply to this topic.

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