Jquery Html Text Editor Selection

Question

I want to make my own html text editor very simple code. And When I click Bold button, in textarea, must be insert [B]boldtext[/B] and "boldtext" can be select like this photo. enter image description here

I wrote tihs code,

function TextEditor(startSyntax,endSyntax,elementID)
{
    var textarea = $('#' + elementID)
    var start = textarea[0].selectionStart;
    var end = textarea[0].selectionEnd;
    var text = textarea.val();

    if (start == end) {
        return text.substring(0,start) + startSyntax + "text" + endSyntax + text.substring(end,text.lenght);
    };
    return text.substring(0,start) + startSyntax + text.substring(start, end) + endSyntax + text.substring(end,text.lenght);
}


$("#btnKaydet").on("click", function() {
    $("#txtMesaj").val(TextEditor("[B]","[/B]","txtMesaj"));
});

What I wrote inserts text but it does not select "boldtext" text after adding the tags, like in photo. How can I do this with jquery? Thanks

So, you want to keep the text selected after you add the tags? Is that the problem? — caspian
– caspian, Commented Mar 31, 2014 at 23:37

caspian · Accepted Answer · 2014-04-01 00:06:03Z

2

You will have to write a function to select the text that was previously selected. Since you're changing the entire text in the textarea, it won't remember what was selected previously. Here's a link with an example function on how to do this.

http://programanddesign.com/js/jquery-select-text-range/

Code for the solution:

function TextEditor(startSyntax,endSyntax,elementID)
{
    var textarea = $('#' + elementID)
    var start = textarea[0].selectionStart;
    var end = textarea[0].selectionEnd;
    var text = textarea.val();

    if (start == end) {
        textarea.val(text.substring(0,start) + startSyntax + "text" + endSyntax + text.substring(end,text.lenght));
    }
    else
    {
        textarea.val(text.substring(0,start) + startSyntax + text.substring(start, end) + endSyntax + text.substring(end,text.lenght));   
    }

    selectText(textarea[0], start+3, end + 3); 
}

$("#btnKaydet").on("click", function() {
    TextEditor("[B]","[/B]","txtMesaj")
});

function selectText(input, start, end)
{
        if(input.setSelectionRange) {
            input.focus();
            input.setSelectionRange(start, end);
        } else if(input.createTextRange) {
            var range = input.createTextRange();
            input.collapse(true);
            input.moveEnd('character', end);
            input.moveStart('character', start);
            input.select();
        }
}

jsfiddle: http://jsfiddle.net/wPLBy/12/

NOTE: I only tested this on chrome, it may behave differently in different browsers.

edited Apr 1, 2014 at 0:06

answered Mar 31, 2014 at 23:44

caspian

1,80414 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

caspian Over a year ago

I'm not exactly sure what was being attempted when there was no selection. I left that be - it will not have any selection.

Collectives™ on Stack Overflow

Jquery Html Text Editor Selection

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related