CKEditor Samples

These samples are not maintained anymore. Check out the brand new samples in CKEditor SDK.

Basic Samples

Replace textarea elements by class name
Automatic replacement of all textarea elements of a given class with a CKEditor instance.
Replace textarea elements by code
Replacement of textarea elements with CKEditor instances by using a JavaScript call.
Create editors with jQuery
Creating standard and inline CKEditor instances with jQuery adapter.

Basic Customization

User Interface color
Changing CKEditor User Interface color and adding a toolbar button that lets the user set the UI color.
User Interface languages
Changing CKEditor User Interface language and adding a drop-down list that lets the user choose the UI language.


Code Snippet plugin New!
View and modify code using the Code Snippet plugin.
New Image plugin New!
Using the new Image plugin to insert captioned images and adjust their dimensions.
Mathematics plugin New!
Create mathematical equations in TeX and display them in visual form.
Editing source code in a dialog New!
Editing HTML content of both inline and classic editor instances.
AutoGrow plugin
Using the AutoGrow plugin in order to make the editor grow to fit the size of its content.
Output for BBCode
Configuring CKEditor to produce BBCode tags instead of HTML.
Developer Tools plugin
Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.
Document Properties plugin
Manage various page meta data with a dialog.
Magicline plugin
Using the Magicline plugin to access difficult focus spaces.
Placeholder plugin
Using the Placeholder plugin to create uneditable sections that can only be created and modified with a proper dialog window.
Shared-Space plugin
Having the toolbar and the bottom bar spaces shared by different editor instances.
Stylesheet Parser plugin
Using the Stylesheet Parser plugin to fill the Styles drop-down list based on the CSS classes available in the document stylesheet.
TableResize plugin
Using the TableResize plugin to enable table column resizing.
UIColor plugin
Using the UIColor plugin to pick up skin color.
Full page support
CKEditor inserted with a JavaScript call and used to edit the whole page from <html> to </html>.

Inline Editing

Massive inline editor creation
Turn all elements with contentEditable = true attribute into inline editors.
Convert element into an inline editor by code
Conversion of DOM elements into inline CKEditor instances by using a JavaScript call.
Replace textarea with inline editor New!
A form with a textarea that is replaced by an inline editor at runtime.

Advanced Samples

Data filtering and features activation New!
Data filtering and automatic features activation basing on configuration.
Replace DIV elements on the fly
Transforming a div element into an instance of CKEditor with a mouse click.
Append editor instances
Appending editor instances to existing DOM elements.
Create and destroy editor instances for Ajax applications
Creating and destroying CKEditor instances on the fly and saving the contents entered into the editor window.
Basic usage of the API
Using the CKEditor JavaScript API to interact with the editor at runtime.
XHTML-compliant style
Configuring CKEditor to produce XHTML 1.1 compliant attributes and styles.
Read-only mode
Using the readOnly API to block introducing changes to the editor contents.
"Tab" key-based navigation
Navigating among editor instances with tab key.
Using the JavaScript API to customize dialog windows
Using the dialog windows API to customize dialog windows without changing the original editor code.
Replace Textarea with a "DIV-based" editor
Using div instead of iframe for rich editing.
Using the "Enter" key in CKEditor
Configuring the behavior of Enter and Shift+Enter keys.
Output for Flash
Configuring CKEditor to produce HTML code that can be used with Adobe Flash.
Output HTML
Configuring CKEditor to produce legacy HTML 4 code.
Toolbar Configurations
Configuring CKEditor to display full or custom toolbar layout.