Forums

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

Home Forums JavaScript “csstricks like” texteditor

  • This topic is empty.
Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #125805

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

    #125823
    dgriesel
    Participant

    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.

    #125825

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

    #125878
    Saket1950
    Member

    I like this website

    #125898
    dgriesel
    Participant

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

    #125946

    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;
    }
    }
    }
    #126294
    dgriesel
    Participant

    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 7 posts - 16 through 22 (of 22 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.