Answer: how to get selected html from ckeditor

I spent several hours trying to figure this out. I wish the documentation was better or there were a built-in function for this (like getSelectedText). If you want to retrieve the selected html (not plain text), try this:

editor.getSelection().getNative().createRange().htmlText

Hope I save someone else the pain I went through.

Fri, 05/11/2012 - 14:55

sebstefanov

Joined: 03/02/2012

Posts: 1329

Re: Answer: how to get selected html from chkeditor

Thanks! Any hints and advice is always appreciated on our boards. You'd be surprised how far back sometimes people go to find solutions.

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn

If you think you found a bug in CKEditor, read this!

Fri, 06/01/2012 - 22:37

enorth

Joined: 11/05/2012

Posts: 10

Re: Answer: how to get selected html from ckeditor

Note: First post Only works in IE, so here is what I finally came up with:

CKEDITOR.getSelectedHtml = function () {
    //note: next line works for IE, but not other browsers, so not using (createRange() not supported)
    //return editor.getSelection().getNative().createRange().htmlText;

    //assumes only one ckeditor on a page
    //find the iframe and see what is selected
    var iframe = $("td.cke_contents iframe");
    var sel = iframe[0].contentDocument.getSelection();

    if (sel.rangeCount > 0) {
        range = sel.getRangeAt(0);
        var clonedSelection = range.cloneContents();
        return $("<div></div>").append(clonedSelection).html();
    }
    else
        return "";
};