How Do I Detach the CKEditor Toolbar from the Editing Area?

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

Use the sharedSpaces configuration value to define the page element that will contain the toolbar, and pass it in the top parameter. With this configuration the toolbar can be moved to any page element, not just a textarea element. 

// Place the toolbar inside the element with an ID of "myToolbar".
config.sharedSpaces =
{
	top : 'myToolbar'
};

For a full working example of detaching the editor interface from the editing area and sharing the interface between multiple CKEditor instances refer to the Shared Toolbars (sharedspaces.html) sample located in the _samples folder of the CKEditor installation package.

Retrieved from "https://docs-old.ckeditor.com/index.php?title=CKEditor_3.x/Howto/Detaching_Toolbar&oldid=5913"