Insert text into a div from a poput form and rewrite the inserted text with javascript

Question

So I read some related questions here before I asked, but can't find the answer to my problem. Hope some javascript master here can find this and bring the light to me.

I created another button for nicEdit, a video button and wanted to insert some formatted text into the editor DIV (note: nicEdit has inline DIV, no iframe, no textarea).

This is my button, recreated from the image button:

var nicVideoOptions = {

    buttons : {

        'video' : {name : __('Insert Video'), type : 'nicEditorVideoButton'} //, tags : ['VIDEO:']

    },
    iconFiles : {'video' : '../movie.png'}

};

var nicEditorVideoButton = nicEditorAdvancedButton.extend({
    addPane : function() {
        this.vi = this.ne.selectedInstance.selElm().parentTag('A');
        this.addForm({
            '' : {type : 'title', txt : 'Insert Video URL'},
            'href' : {type : 'text', txt : 'URL', 'value' : 'http://', style : {width: '150px'}}
        },this.vi);
    },
    submit : function(e) {
        var vidVal = this.inputs['href'].value;
        if(vidVal == "" || vidVal == "http://") {
            alert("Enter the video url");
            return false;
        }
        this.removePane();

        if(!this.vi) {
            var tmp = 'javascript:nicVidTemp();';
            this.ne.nicCommand("insertVideo",tmp);

            // still nothing works
            //this.vi = this.findElm('VIDEO:','href',tmp);
            //this.vi = this.setContent('[video:' + this.inputs['href'].value + ']');
            //nicEditors.findEditor('edit-comment').setContent('<strong>Some HTML</strong> here');
            //this.vi = this.setContent('<strong>Some HTML</strong> here');
            insertAtCaret(this.ne.selectedInstance, vidVal);
        }
        if(this.vi) {
                  // still nothing works
            //this.vi.setAttributes({
                //vidVal : this.inputs['href'].value
            //});
            //this.vi = this.setContent('[video:' + this.inputs['href'].value + ']');
            //this.vi = this.setContent('<strong>Some HTML</strong> here');
        }
    }


});

nicEditors.registerPlugin(nicPlugin,nicVideoOptions);

The button is there, the form poput like the image button, so it's okay. But can't insert the text into the DIV. The final output will be taken from this: ('[video:' + this.inputs['href'].value + ']') and displayed in the editor DIV as is: [video:http//some.com/video-url]

As you see, I am blindly touching everything :)

And this insertion is taken from: http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/

function insertAtCaret(areaId,text) { var txtarea = document.getElementById(areaId); var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); strPos = range.text.length; } else if (br == "ff") strPos = txtarea.selectionStart; var front = (txtarea.value).substring(0,strPos); var back = (txtarea.value).substring(strPos,txtarea.value.length); txtarea.value=front+text+back; strPos = strPos + text.length; if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); range.moveStart ('character', strPos); range.moveEnd ('character', 0); range.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; }

The flow: I click the button, a form popouts, fill the input text box, hit the query button and the text should appear in the editor DIV.

I hope I can make myself clear. Any help would be very much appreaciated

Thanks

Answer 1

I actually think I see your problem. The insertAtCaret function is expecting an ID which it will use to do getElementById(id). It appears you're passing it a reference to a nicEdit object.

I'd suggest you either

1. Create an ID for the textarea on your page, and pass in your ID.
2. Modify the insertAtCaret function to not search by ID but instead use the textarea ref you pass in.