“csstricks like” texteditor

[mostafaghanbari]

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

[dgriesel]

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.

[mostafaghanbari]

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

[Saket1950]

I like this website

[dgriesel]

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

[mostafaghanbari]

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;

}

}

}

[dgriesel]

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.

[Author]

Posts