Ckeditor Inline Editing - hyperlinks don't work

1
votes

Hyperlinks don't work when applying inline editing to a div tag.

You can even try it on this online DEMO.

  1. Insert Hyperlink
  2. Disable inline edit dialog by clicking somewhere on the page
  3. Try to click on created hyperlink. Hyperlink hand cursor doesn't appear as you normal would expect when pressing link in a webpage.

Destroying CKeditor instance will also not resolve this problem.

Is this normal behavior ?

2
ckeditor
This is fine. Even though an instance is destroyed, the element still has contenteditable="true" attribute (inspect the code). Browsers assume that such element is for creating contents but not for navigation, unless you remove the attribute. - oleq
@oleq Can i remove 'contenteditable="true' on the fly by using jquery? I have used this code, but this was not successful '$("#editable").removeAttr("contenteditable");' => Hyperlinks are still not working - JVGAG
$('#editable').attr('contenteditable', 'false'); would be better. - zessx
Get element: var element = CKEDITOR.instances.instance.element;, destroy editor: CKEDITOR.instances.instance.destroy();, remove attribute: element.removeAttribute( 'contenteditable' ); - oleq

2 Answers

2
votes

This is the normal behavior, you're in an editing mode.

Inline editing was made for a back-end use, you're not suppose to click on those hyperlinks like a front-end user. You just have to display the generated HTML in a front-end div (without CKEditor, of course) to get your hyperlinks work.

1
votes

To open the link in inline editing mode, just CTRL + click, like in MS Word, but not with IE.