I am using CKEditor asp.net page for allowing client to easily edit/format text. Also i am using tabs option within CKEditor as shown in the fig. attached. But tabs are not working at all. Initially i have created tabs withJS. I thought it’s the JS that not working with CKEditor so i have chosen alternative solution using css3. But tabs are still not working in CKEditor. I have searched on CKEditor forum but unable to get good resource or help.
For css3 I am using checkbox hidden through opacity 0; but checkboxes are not working in CKEditor. What comes finally in my mind is CKEditor doesn’t run html. Is there any solution for this?
Add a comment
|
1 Answer
CKEditor secures JavaScript code so it's not executed to prevent unexpected editor behavior. Also mouse/keyboard events from form elements are captured for robust editing, making regular manipulation impossible. The conclusion is: editor is for creating rich content, not for rendering layouts.
The simplest advice I have is to put the editor one level down. Namely:
- Create tabs.
- Make each tab title an inline editor (it must be a block element).
- Put an inline instance of CKEditor into each single tab contents.
- Serialize your tabs when saving. It's easy.
Bonus: With a little help from ACF (since 4.1) you can prevent the layout from being destroyed by thoughtless users. Basically restrict which plugins are loaded for every editor to manipulate the result of the editing.
2 Comments
AlfonsoML
Something like this seems like a good testcase for the new Widgets feature. Just saying ;-)
Reinmar
Hmm... In some cases it could be a case for Widgets. But only if tabs group is meant to be "inline". Otherwise, tabs should be edited separately and entire "widget" should be separated from editor.