Hi there!
I have made a plugin (based on an iFrame dialog) where a user can insert a link on the selected text.
It works great with text, but with images, nothing happens. Also, if the text has some formatting (e.g. bold), then it looses the formatting.
I have this code:
Does anyone know how to get the HTML instead of the plain text? So it would work with images too? I have looked at the ckeditor source, but couldn't find anything.
I have made a plugin (based on an iFrame dialog) where a user can insert a link on the selected text.
It works great with text, but with images, nothing happens. Also, if the text has some formatting (e.g. bold), then it looses the formatting.
I have this code:
function addLink(){
var CKEDITOR = window.parent.CKEDITOR;
var g = CKEDITOR.instances.editor1;
if (CKEDITOR.env.ie) {
selection = g.getSelection().document.$.selection.createRange().text;
} else {
selection = g.getSelection().getSelectedText();
}
alert(getSelectionHTML(selection));
CKEDITOR.instances.editor1.insertHtml('<a href="'+$("#html_"+$("#parent_id").val()).html()+'">'+selection+'</a>');
CKEDITOR.dialog.getCurrent().hide();
}
Does anyone know how to get the HTML instead of the plain text? So it would work with images too? I have looked at the ckeditor source, but couldn't find anything.
I too have the same issue.
I too have the same issue.
how i fixed it
I was just trying to debug my issue, and somehow it just gave me what I wanted.
/* This line pulls the text from a hidden div in my html from the parent doc where I am temporarily storing the link the user selected just prior to clicking OK */ var dataLink = $('#sb_ckeditor_link_url').text(); if(elementType == 1){/* empty on purpose */} if(elelmentType == 2){/* empty on purpose */} // element selected if(elementType == 3) { var dataContents = "<a href='" + dataLink + "'>" + CKEDITOR.instances[this.getParentEditor().name].getSelection().getSelectedElement().$.outerHTML + "</a>"; /* I thought this would work, and it did for non IE browsers */ } // setup the insert link var dialog = this, data = {contents : dataContents}, link = CKEDITOR.instances[this.getParentEditor().name].document.createElement('a'); //editor.document.createElement( 'a' ); this.commitContent( data ); link.setAttribute( 'href', dataLink ); /* this is custom for me, checking to see if the link is going to a CFM page, otherwise open the link in a new window (tab) */ if(dataLink.substr(dataLink.length-3) != 'cfm') { link.setAttribute('target', '_blank'); } /* set the html */ link.setHtml( CKEDITOR.instances[this.getParentEditor().name].getSelection().getSelectedElement().$.outerHTML ); // was: data.contents /* insert the html */ CKEDITOR.instances[this.getParentEditor().name].insertElement(link);You really only need to see the link.setHtml line near the bottom. I tested IE9 (not IE10 as of this post), and then I tested Chrome and both worked. I haven't gone through a full test of Safari, FireFox, Opera, etc, but I'd say it's safe to use. Try it on your end and post a comment.
Beautiful !
Thanks unriveled1 !
I could fix it on my code base too.
Here is my function:
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();
console.log("The selectedContent is: " + selectedContent);
}
}