CKEditor Samples

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.

Plugins

Code Snippet pluginNew!: View and modify code using the Code Snippet plugin.
New Image pluginNew!: Using the new Image plugin to insert captioned images and adjust their dimensions.
Mathematics pluginNew!: Create mathematical equations in TeX and display them in visual form.
Editing source code in a dialogNew!: Editing HTML content of both inline and classic editor instances.
TeXZilla pluginNew!: Create mathematical equations in TeX and display using MathML.
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.
textselection plugin: Using the textselection plugin in order to make the editor keep it's text-selection when switching between WYSIWYG and Source mode
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>.
Greetings Card Plugin: Show greetings card when the user presses the toolbar button.

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.