CKEditor

Basic CKEditor

CKEditor is an Open source application, which means it can be modified in any way you want. It benefits from an active community that is constantly evolving the application with free add-ons and a transparent development process.

Readonly CKEditor

CKEditor API makes it possible to put the editor into the read-only mode. This mode renders the editor content non-editable and the users will not be able to modify it.

CKEditor UI Color

The editor UI color can be adjusted by the developer to match the look and feel of a website or an application. In order to define the color of the user interface, use the config.uiColor configuration setting which accepts an RGB color code. In the editor instance below the UI color was set to the #CCEAEE RGB value.

Enter Key Configuration

This sample shows how to configure the Enter and Shift+Enter keys to perform actions specified in the config.enterMode and config.shiftEnterMode settings, respectively.

Multilingual Content

CKEditor is well-suited for multilingual environment. Its UI is translated into over 60 languages and by default it is displayed in user's language. Additionally, it makes working with multilingual content very convenient by providing the ability to set the text direction as well as mark the language of selected text fragments.

Inline editing

Inline Editor

Inline Editing allows you to edit any element on the page in-place. Inline editor provides a real WYSIWYG experience "out of the box", because unlike in classic editor, there is no <iframe> element surrounding the editing area. The CSS styles used for editor content are exactly the same as on the target page where this content is rendered!

Inline Editing Enabled by Code

Press the "Start editing" button below. An editor will be created using the CKEDITOR.inline() method with config.startupFocus set to true.

Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image