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开发者_JAVA技巧 don't know how this is called but I'm sure it's pretty common...

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.

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');
});

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:

• http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editorst
• http://plugins.jquery.com/plugin-tags/rtet