Help getting selected text!

[proteo]

Hi all. I've been using WYMeditor for a while now, it's a great editor. However, I'm stuck with something that should be pretty simple, even for a newbie like me. I've wrote a couple of custom buttons and all that part is done. There's one thing, however, that is drving me nuts. One of these buttons needs to take whatever text is selected by the user, do some formatting on it, then replace the original text in the editor. So far, I got it half-working. The problem is that I cannot found (and I've searched for hours in both the documentation and this forum) a simple, reliable method to get the selected text passed to my function. I'm aware of html() and xhtml(), but these methods retrieve the whole contents of the editor. I just need the part that is selected, and the important bit, even if the selection spans through several blocks (for example, if you have more than one paragraph highligted). I found a method that seemed to be working (just showing the relevant code):

Code: Select all

var container = wym.selected();
var txt = $(container).html();
var output = my_custom_function(txt);
wym.insert(output);


But in this case $(container).html() returns only the text inside the first selected block. So, there's a way to iterate over all selected elements, or there's some magic method to do this simple task that I'm overlooking?

Many thanks in advance!

A desperate, sleepless developer.

[proteo]

Well, just figured it out so I'll share the solution, in case somebody is facing the same problem. It seems that getting a selection that spans across several text nodes has not a simple, "magic" solution, so feel free to improve and/or comment the code, but it works fine for my purposes (it's been tested in FF, Chrome, Opera and Safari, not sure if it works in IE);

Code: Select all

WYMeditor.editor.prototype.getSelectedText = function()
{
   // Copy the WYMeditor instance
   var wym = this._wym;
   var selection, range;

   if (window.getSelection) {
      selection = wym._iframe.contentWindow.getSelection();
   } else if (document.selection) {
      selection = wym._iframe.contentWindow.selection.createRange();
   } else {
      return false;
   }

   if (selection.getRangeAt) {
      range = selection.getRangeAt(0);
   } else {
      range = document.createRange();
      range.setStart(selection.anchorNode, selection.anchorOffset);
      range.setEnd(selection.focusNode, selection.focusOffset);
   }

   var node = $('<div id="dummy_node"></div>').append(range.cloneContents());
   var txt = node.html();
   node.remove();

   return txt.toString();
};


Note that the function actually creates a temporary DOM node in order to retrieve the full contents of the selection (including all the selected HTML tags, no only the text nodes) which is later destroyed. No very pretty, but it gets the job done.

Best regards.