CKEditor Sample


If you can see CKEditor below, it means that the installation succeeded. You can now try out your new editor version, see its features, and when you are ready to move on, check some of the most useful resources recommended below.

Hello world!

I'm an instance of CKEditor.

Customize Your Editor

Modular build and numerous configuration options give you nearly endless possibilities to customize CKEditor. Replace the content of your config.js file with the following code and refresh this page (remember to clear the browser cache)!

CKEDITOR.editorConfig = function( config ) {
	config.language = 'es';
	config.uiColor = '#F7B42C';
	config.height = 300;
	config.toolbarCanCollapse = true;

Toolbar Configuration

If you want to reorder toolbar buttons or remove some of them, check this handy tool!

More Samples!

Visit the CKEditor SDK for a huge collection of samples showcasing editor features, with source code readily available to copy and use in your own implementation.

Developer's Guide

The most important resource for all developers working with CKEditor, integrating it with their websites and applications, and customizing to their needs. You can start from here:

  • Getting Started – Explains most crucial editor concepts and practices as well as the installation process and integration with your website.
  • Advanced Installation Concepts – Describes how to upgrade, install additional components (plugins, skins), or create a custom build.

When you have the basics sorted out, feel free to browse some more advanced sections like:

CKEditor JavaScript API

CKEditor boasts a rich JavaScript API that you can use to adjust the editor to your needs and integrate it with your website or application.