CKEditor: use both classic and inline editing mode - ckeditor

I want the users the have the possibility to choose between classic editing mode and inline editing mode of the content. Is this possible, or you can only use one mode?

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

How to disable editing of image component on page editor?

I have an image component for which I need to disable its editing ribbon on Sitecore Page Editor so that the author is unable to edit/change the image.
In code:
<sc:Image Field="Image" ID="Image1" runat="server">
I have tried DisableWebEditing="true" but of no use !
Also tried this in code behind
if (Sitecore.Context.PageMode.IsPageEditor)
{
Image1.DisableWebEditing = true;
}`
How do i disable the image editing?
I would have expected the change you have made to work in disabling the web edit functionality. Are you testing as an "is administrator" functionality? I know that Page Editor will occasionally provide full admins more access.
If you do not want it to ever be edited, you can also consider use an ASP.NET image control and updating it with the data from the media item.

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.

Ckeditor Inline Editing - hyperlinks don't work

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.

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.

Resources