CKeditor inline on a fixed position

2
votes

Summary: Is it possible to use the inline CKeditor function but still choose to display the editor in a fixed dynamic position?

I am currently building on a site editor. You can drag and drop elements. Per element, there is a div in the top where I want to 'paste' my editor in. But I dont want to use an iFrame because this messes up the CSS of my elements.

First try

After using the CKEDITOR.inline() function the result looked like this: Test run 1 This is pretty hindering, because the bar lays on top of other elements.

Second try

I have downloaded a plugin for the CKeditor: "shared space". This fixed the bar to the top, which is great, but because it creates an iframe, the content gets hidden and scrollable. This is not very great for the UX: Test 2 Because this is a iframe, the text is put in a container with a static height. I can set the height, but again: this is not very user friendly.

Question

All I want is to know how I can fix a floating ckeditor to a position of my choice?

1
javascriptckeditor
Have you tried the combination of inline editor and shared space? See the second demo (Inline Editor with Shared Toolbar and Bottom Bar) here: sdk.ckeditor.com/samples/sharedspace.html - Anna Tomanek
Oh mennn, I totally missed that one! Thank you very much :D - PIDZB
I'll add this as an answer for others to enjoy, then :D Good luck with your implementation! - Anna Tomanek

1 Answers

2
votes

Use the combination of inline editor and Shared Space. Check the Inline Editor with Shared Toolbar and Bottom Bar demo on the CKEditor SDK page for an example. Note that you can view and download the source code of each SDK example - just scroll down to "Get Sample Source Code" and grab what you need.