CODEWITHSUNDEEP
jqueryhtml
Veles
Veles

Reputation: 1542

jQuery TinyMCE like textbox menu

So I am looking for a tutorial or guideline how to make a simple text box menu with jQuery (like TinyMCE or the editor here at StackOverflow when u ask a question). I just need something simple to provide two buttons which will on click insert some text into the text box? I really don't know how this is called but I'm sure it's pretty common...

Upvotes: 1

Views: 653

Answers (3)

cambraca
cambraca

Reputation: 27835

Try this (some of the code is borrowed from Google and modified a bit):

<div id="toolbar">
    <input type="button" value="Button 1" id="button1" />
    <input type="button" value="Button 2" id="button2" />
</div>


$.fn.extend({
    insertAtCaret: function(myValue) {
        this1 = $(this).get(0);
        if (document.selection) {
            this1.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            this1.focus();
        }
        else if (this1.selectionStart || this1.selectionStart == '0') {
            var startPos = this1.selectionStart;
            var endPos = this1.selectionEnd;
            var scrollTop = this1.scrollTop;
            this1.value = this1.value.substring(0, startPos) + myValue + this1.value.substring(endPos, this1.value.length);
            this1.focus();
            this1.selectionStart = startPos + myValue.length;
            this1.selectionEnd = startPos + myValue.length;
            this1.scrollTop = scrollTop;
        } else {
            this1.value += myValue;
            this1.focus();
        }
    }
});

$('#button1').click(function() {
    $('#text1').insertAtCaret('text 1');
});
$('#button2').click(function() {
    $('#text1').insertAtCaret('text 2');
});

Look at it working here.

Upvotes: 1

jd.
jd.

Reputation: 4098

What you are looking for is a Rich Text Editor (RTE). I don't know of any jQuery RTE tutorials, but have a look at the links below for already existing jQuery RTEs:

Upvotes: 0

Jack
Jack

Reputation: 1376

You can use JQuery's append method to add text into a textbox when you click on a button like this:

$('#button_id').click(function() {
   $('#textarea_id').append('Add this to the textbox');
});

Upvotes: 0

Related Questions