Get selected html in ckeditor

Question

I am working on a custom link generator in CKEditor. What I would like to do is get the html that was selected by the user. I tried a lot, my last function is that

function getTheHtml(editor) { var selection = editor.getSelection(); if (selection.getType() == CKEDITOR.SELECTION_ELEMENT) { var selectedContent = selection.getSelectedElement().$.outerHTML; } else if (selection.getType() == CKEDITOR.SELECTION_TEXT) { if (CKEDITOR.env.ie) { selection.unlock(true); selectedContent = selection.getNative().createRange().text; } else { selectedContent = selection.getNative(); } } return selectedContent; } 

this works very well, but I still have a problem if the user selects the text that he works, if he selects the image that he works, but when the user selects the image plus some text, I get only text, for example, this is what user really select

  <img align="" alt="" border="0" class="donotlink" hspace="5" src="image/pic.jpg" vspace="5" />Some Random Text 

and this is what I get from my function

 Some Random Text 

I also tried to do this:

 function getSelectionHtml(editor) { var sel = editor.getSelection(); var ranges = sel.getRanges(); var el = new CKEDITOR.dom.element("div"); for (var i = 0, len = ranges.length; i < len; ++i) { el.append(ranges[i].cloneContents()); } return el.getHtml(); } 

but then it selects the first closest node, and when I try to wrap the selection with the tag “a”, I cannot wrap what the user selected in the first place

I know this was a common topic, but since I did not find how to fix it ... Thanks in advance.

Answer 1

Use range.cloneContents () . Using something selected in your editor, call the following code in the console:

 var editor = CKEDITOR.instances.editor1, range = editor.getSelection().getRanges()[ 0 ], el = editor.document.createElement( 'div' ); el.append( range.cloneContents() ); console.log( el.getHtml() ); 

Answer 2

It works for both image and text.

  var selection = CKEDITOR.instances.getSelection(); if (selection.getType() == CKEDITOR.SELECTION_ELEMENT) { var selectedContent = selection.getSelectedElement().$.outerHTML; } else if (selection.getType() == CKEDITOR.SELECTION_TEXT) { if (CKEDITOR.env.ie) { selection.unlock(true); selectedContent = selection.getNative().createRange().text; } else { selectedContent = selection.getNative(); console.log("The selectedContent is: " + selectedContent); } }