Display function output within an anonymous function

[samnorton05]

I am trying to output the SELECTED TEXT within my javascript code. I created a function that will get the selected text and I just want to output it when the submit button was output.

Here's the javascript for getting the selected HTML or TEXT.

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
   document.write(html);

}

Here's my code for outputting the other content plus the function above (but it wont just show up)

(function() {
    tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
        editor.addButton( 'my_mce_button', {
            icon: false,
            text: 'Tooltip',
                        onclick: function() {
                                editor.windowManager.open( {
                                    title: 'Tooltip Option',
                                    body: [
                                        {
                                            type: 'textbox',
                                            name: 'textboxtooltipName',
                                            label: 'Tooltip Text',
                                            value: ''
                                        },
                                        {
                                            type: 'listbox',
                                            name: 'listboxClassName',
                                            label: 'Class',
                                            'values': [
                                                {text: 'Top Tooltip', value: 'top_tooltip'},
                                                {text: 'Left Tooltip', value: 'left_tooltip'},
                                                {text: 'Right Tooltip', value: 'right_tooltip'},
                                                {text: 'Bottom Tooltip', value: 'bottom_tooltip'}
                                            ]
                                        }
                                    ],
                                    onsubmit: function( e ) {
                                        editor.insertContent( '[tooltip class="' + e.data.listboxClassName + '" title="' + e.data.textboxtooltipName + '"]  html  [/tooltip]');
                                    }
                                });
                            }
        });
    });
})();

Now this line is the one who is responsible for displaying the SELECTED TEXT + the other attributes. Basically, I created an HTML Variable to catch the selected text however its not displaying on my code. Check out the code:

onsubmit: function( e ) {
editor.insertContent( '[tooltip class="' + e.data.listboxClassName + '" title="' + e.data.textboxtooltipName + '"]  html  [/tooltip]'); }

Any idea what's up? How can I display the output of the getSelectionHtml function to the output of the anonymous function properly?

[AleMonteiro]

Use

editor.insertContent( '[tooltip class="' + e.data.listboxClassName + '" title="' + e.data.textboxtooltipName + '"]  ' + getSelectionHtml() +  [/tooltip]');

And you getSelectionHtml function should return the text.

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
   return html;
}

[Taywin]

To explain a little bit more on why your script is not working, you need to understand the variable scope. The html variable you declared inside the getSelectionHtml() is alive inside the function. Once you leave the function, it will no longer be visible. One way to do is to return it as AleMonteiro said, or declare it as global. The former approach is better than the latter (in general programming concept and is a better practice in most cases).