add value to textarea using jquery (simple texteditor)

Question

im trying to make a simple texteditor. its work fine, but i want to add the text on the selected text at textarea.

in my code, when i click bold button it will show [b][/b] with cursor focused inside b tags, and when i click the button again, it will show inside b tags again. (this is what i want dont mind this code)

function typeInTextarea(el, newText) 
{
    var start = el.prop("selectionStart")
    var end = el.prop("selectionEnd")
    var text = el.val()
    var before = text.substring(0, start)
    var after  = text.substring(end, text.length)

    el.val(before + newText + after)
    el[0].selectionStart = el[0].selectionEnd = start - 4 + newText.length
    el.focus()
    return false
}

$("#button-bold").on("click", function()
{
    typeInTextarea($("#textareapost"), "[b][/b]")
    return false
});

what im looking right now is, when I select "abcd" then i click the button, it will show [b]abcd[/b], i success with this code:

function typeInTextarea(el, newText) 
{
    var start = el.prop("selectionStart")
    var end = el.prop("selectionEnd")
    var text = el.val()
    var before = text.substring(0, start)
    var after  = text.substring(end, text.length)


    el.val(before + newText.substring(0,3) + after + newText.substring(3,7)) //i making change in this one 
    el[0].selectionStart = el[0].selectionEnd = newText.length + end
    el.focus()
    return false    
}

but when i didnt select the "abcd" text, it will show [b]abcd[/b][b][abcd/b]. just like copying the value of the text.

what im asking is, how to add value on selected text (not replace it) and making if function when text is selected will add [b]abcd[/b] else will add [b] [/b] while the [b]abcd[/b] still there.

basicly it will be like stackoverflow editor, but without live view. thanks for advance, hope I found the answer. been looking this for a weeks.

did you read my code? @harshadpansuriya or atleast my explanation? — Famil Restu, Mar 03 '16 at 06:09

score 0 · Answer 1 · answered Mar 03 '16 at 04:40

0

Sceditor has similar functionality and is open source. Check how it was done here http://www.sceditor.com/

answered Mar 03 '16 at 04:40

Maksym Kozlenko

10,273
2
66
55

i have tried that before, but my texteditor have an upload image and that didnt have one (its using url if im not wrong). – Famil Restu Mar 03 '16 at 06:20
i change my mind, i use this code. and now i need something to do with my own image upload. thanks for your help @MaksymKozlenko – Famil Restu Mar 03 '16 at 07:15

score 0 · Accepted Answer · edited May 23 '17 at 12:23

found 1 answer
JQUERY Set Textarea Cursor to End of Text and modify to

var b = { pos: 3, txt: function(s){ return '[b]' + s +'[/b]'; }}

$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

$('#this-b').on('click',function(e){
    var cc = $('#this-txta')[0].selectionStart;
    var str = $('#this-txta').val();
    var en = $('#this-txta')[0].selectionEnd;
    var sstr = str.substring(cc,en);
    $('#this-txta').val( str.substring(0, cc) + b.txt(sstr) + str.substring(en) ).focus();
    var pst = cc + b.pos
    var pen = en + b.pos
    $('#this-txta').selectRange(pst,pen);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="this-b"><b>B</b></button>
<br/>
<textarea id="this-txta">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea>

whoaaa this is so cool, and the timing is bad, i already use SCeditor and make it work with my php code. but still nice tough, hope everyone having problem like me will use this code. thanks @wit_peter cheers~ — Famil Restu, Mar 03 '16 at 08:34

add value to textarea using jquery (simple texteditor)

2 Answers2