Member Avatar for 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?

Edited by samnorton05
  • 3 Contributors
  • 2 Replies
  • 416 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

Quick summary: the selected text inside TinyMCE should be pulled from the editor, not from window.getSelection(), and you should capture that selection before opening the modal because opening the dialog often steals focus and clears the selection. As pointed out, the selection code must return a string (don’t use document.write). As explained, scope matters — store the selection in a variable that the dialog’s onsubmit can access.

Two practical rules:

  • Use TinyMCE’s API to get the selection (editor.selection.getContent(...)) rather than window.getSelection() when working inside the editor iframe/contentEditable area.
  • Capture the selection before calling editor.windowManager.open(...) and reuse the saved value in onsubmit so the dialog focus doesn’t wipe it out.

Example (capture before opening the dialog):

onclick: function() {
  var savedSelection = editor.selection.getContent({ format: 'html' }) || '';
  editor.windowManager.open({
    /* dialog config */
    onsubmit: function(e) {
      /* use savedSelection here */
    }
  });
}

Safe insertion with simple escaping:

onsubmit: function(e) {
  var title = (e.data.textboxtooltipName || '').replace(/"/g, '&quot;');
  var cls = e.data.listboxClassName || 'top_tooltip';
  var content = '[tooltip class="' + cls + '" title="' + title + '"]' + savedSelection + '[/tooltip]';
  editor.insertContent(content);
}

Troubleshooting: if you only want plain text use format: 'text'; if savedSelection is empty, notify the user or insert a placeholder; never use document.write() inside the editor context. Escaping the attribute (quotes, brackets) prevents malformed shortcode output.

Recommended Answers

All 2 Replies

Member Avatar for 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;
}
Member Avatar for 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).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.