Ckeditor Inline Editing - hyperlinks don't work - ckeditor

Hyperlinks don't work when applying inline editing to a div tag.
You can even try it on this online DEMO.
Insert Hyperlink
Disable inline edit dialog by clicking somewhere on the page
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 ?

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.

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

Related

Is there any configuration available to show the toolbar on click of content section

i have added below configuration to hide the toolbar onload of ckeditor.
config.toolbarStartupExpanded = false;
is there any configuration or any workaround available to show the toolbar once the user clicks on the editing area and then hides it once user clicks out of the editing area.
You can try to use inline version of editor, it might be sufficient for you in this case.
Take a look into this sample how it works: https://cdn.ckeditor.com/4.7.3/full-all/samples/old/inlineall.html.
You need to remember to initialise editor with CKEDITOR.inline instead of CKEDITOR.replace. More about it you can find in documentation
Another option might be dynamically create and destroy editor, but this approach might be a little bit more laggy, for the user. Example how it works you can find here: https://cdn.ckeditor.com/4.7.3/full-all/samples/old/ajax.html

CKEditor 3.6.1: Load editor on event

I create a page with multiple tabs.
On one of my tabs I want to use CKeditor on a textarea, so when I display my table I call:
editor = CKEDITOR.replace('MyTextArea', MyOptions );
I have the UI of the editor but when I click on the text area nothing append, I can't edit it. The solution for access to the text area is to use "tab" for accessing this field.
I try to put a default value and I can edit if I click on the text but if I click elsewhere in the area I cannot edit.
I have this problem for IE10 and I need it works on it. It's working on Chrome and Firefox. I use CKEditor 3.6.1 and I cannot upgrade it.
Thanks
The problem was the z-index of the container of my textarea, I change it and it works.

Font-awesome codes overrided by toggle editor

I am editing an article and adding FontAwesome in it using Toggle Editor. I've found out that when I add the code using programmer view, it works fine. However, when I change to the designer view from the programmer view, the editor automatically edit the code like this:
Before:
After clicking "Toggle Editor":
It is quite inconvenient for me because I use the designer view to style the article frequently. Is there any solution for it?
You'll have to look into the allowed tags for the editor you're using.
In your case using JCK Editor - you can see this article on why it removes certain code
At first glance it appears there are whitelist & blacklists for some HTML. You'll probably be able to add your selectors to the whitelist and they will no longer get stripped.

How do you edit source HTML with CKEditor 4.x contenteditable enabled?

Using CKEditor 4.x's inline editing feature (using the contenteditable attribute), how do you edit source HTML when you need to do something like paste in a YouTube embed snippet?
It seems like there should be a way to click on an edit source button and have the source appear in a dialog box or something. Overall, the inline editing is great, but sometimes I need to edit/paste HTML.
Source Dialog plugin is available since CKEditor 4.1 and maintained by the core team. I believe this is what you need:
config.extraPlugins = 'sourcedialog';
More about editing source in CKEditor.

N2CMS: how to add popup conent

I have a news-type website that I am looking to create using N2CMS, but besides the regular operations (being able to see a calendar, viewing lists of news, viewing news details etc.), part of the content in the website is displayed in "modal" popups (similar to the ModalPopupExtender from the AjaxToolkit) inside the page (for example if you click Login, a popup panel appears with the login controls).
My question is: is there a way of adding a handler for a link, and displaying a "modal" popup when the link is clicked? If so, can this be done from the template GUI editor (and how)?
Thank you
N2CMS doesn't have any built-in handlers to create modal pop-ups for links. However, N2CMS does ship with the Jquery JavaScript library. My suggestion would be to use JavaScript in your site template to select and format the desired links with modal dialogs -- but that can't be done from the GUI editor, you'd need to do it in the template code directly.

Resources