JQuery textarea insert html bit like an RTE but not an RTE

Question

OK here goes - I think a <textarea></textarea> is what to use so please tell me otherwise. I want yo create a series of "buttons" like an RTE which inserts the appropriate code into a textarea. But note this is not a "real RTE". What I would like is a textarea with a "menu" like an RTE but with only 2 or 3 buttons. I suspect the code for the buttons will be the same. Umm... where am I going ... OK try this ... on this (StackOverflow) RTE there is an "image" button. I would like to know how to create the same thing (as I said all buttons I suspect will be basically the same). The "modal" would either allow for an image src/upload or a textarea to paste say a YouTube link or Flickr link etc. (they will be separate buttons) I can create the buttons etc. and have modals open/close etc. but how can you get the code into the <textarea></textarea>

Pointers & suggestions please. - Oh I don't need a full RTE at all so a "cut down CKeditor" etc. is total overkill The only HTML to be "uploaded/used" in the texarea is an <img src=""> an <embed> or maybe (thinking ahead) an <a href="">.

Answer 1

If you want to insert piece of text in the actual cursor position inside a textarea element. This will help you.

Note: Like you know all the html inside the textarea will never be rendered.. To do this you have to use a more complex solution like the RTE engines...

Try this:

function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    }
    //MOZILLA/NETSCAPE support
    else if (myField.selectionStart || myField.selectionStart == ‘0′) {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
        } else {
            myField.value += myValue;
        }
    }

// calling the function:
insertAtCursor(document.formName.fieldName, 'this');