Description: Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.

# CKEditor Samples

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

## 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 plugin New!
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
New Image plugin New!
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Mathematics plugin New!
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Editing source code in a dialog New!
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
AutoGrow plugin
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Output for BBCode
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Developer Tools plugin
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Document Properties plugin
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Magicline plugin
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Placeholder plugin
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Shared-Space plugin
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Stylesheet Parser plugin
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
TableResize plugin
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
UIColor plugin
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Full page support
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.

## 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
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Replace Textarea with a "DIV-based" editor
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Using the "Enter" key in CKEditor
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Output HTML
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.
Toolbar Configurations
  Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.