Basic CKEditor 4 Concepts - CKEditor 4 Documentation
CKEditor Ecosystem Documentation
CKEditor 4
Guides
Features
Examples
API
CKEditor 5
CKEditor 4
Guides
Getting Started
Quick Start Guide
Basic CKEditor 4 Concepts
Best Practices
Inserting CKEditor
Loading CKEditor
Classic Editing
Inline Editing
Setting Configuration
Content Filtering (ACF)
Getting and Saving Data
Example CKEditor Setups
Advanced Installation Tasks
Introduction
Installing Components
Installing Plugins
Installing Skins
Installing Widgets
Upgrading
Upgrading
Patching Older Versions
Upgrading from CKEditor 3
API Changes from v3 to v4
Upgrading from FCKeditor 2
Building CKEditor
Getting Source Code
Building from Source
Using Package Managers
Specifying Editor Path
Integration
Introduction
Easy Image
Angular Integration
React Integration
Current
Deprecated
Vue Integration
Webpack Integration
jQuery Adapter
File Manager
File Manager Integration
Advanced Configuration
CKFinder Integration
File Browser API
Integrating with Dialogs
Uploading Dropped or Pasted Files
Accessibility Checker
Custom Issue Types
Custom Quick Fixes
CKEditor Deep Dive
Introduction
Advanced Content Filter
Introduction
Allowed Content Rules
Disallowed Content
Enabling CKEditor in Unsupported Environments
Widgets
Clipboard Integration
Error Code Reference
Contributing
How to Contribute
Contributing Code
Reporting Issues
Issues Tracker
Code Documentation
Testing Environment
Compatibility, Compliance, License
Browser Compatibility
Accessibility Support
Section 508 Compliance
WCAG 2.0 Compliance
License
HOWTOs
Basic Configuration
Support
Interface
Styles
File Upload
Output
Pasting
Spell Checker and SCAYT
Dialog Windows
Bugs and New Features
CKEditor 4 Plugin SDK
Introduction
Creating a Basic Plugin
Simple Plugin Tutorial
Simple Plugin (Part 1)
Simple Plugin (Part 2)
Integration with ACF
Plugin Stylesheets
CKEditor 4 Widget SDK
Introduction
Widget Tutorial
Widget Tutorial (Part 1)
Widget Tutorial (Part 2)
CKEditor 4 Skin SDK
Introduction
Advanced Concepts
Icons
CSS Reset
Chameleon Feature
Right-to-Left
High Contrast
Browser Hacks
Compatibility with CKEditor 4.5
Creating a Custom Skin
Setup
Customize
Test and Shape It Up
Build and Release
Features
Examples
API
Letters
Cloud Services
CKBox
CKFinder
CKEditor Premium Features free trial
Home/CKEditor 4/Guides
Basic CKEditor 4 Concepts
Table of contentsWhat CKEditor 4 IsWhat CKEditor 4 Is NotHow CKEditor 4 Works
This article aims to answer two simple questions:
What CKEditor 4 is (and what I can use it for)?
What CKEditor 4 is not (and why it will be of no use to me)?
Additionally, it also explains briefly how CKEditor 4 works and why it needs to get clean, standards-compliant code as input.
# What CKEditor 4 Is
CKEditor 4 is an online WYSIWYG editor that is used to edit HTML documents (or their fragments) in the browser.
So what does this mean?
The “online” part means that CKEditor 4 works in a web browser (like Firefox, Chrome, Internet Explorer or Safari). It is thus not a standalone program that can be installed on your computer and then opened as a desktop application.
The “WYSIWYG” part means that when you use CKEditor 4, you can style the text and add rich media contents to your document in real time by using the editor UI (toolbar buttons, dialog windows), and the result will be seen immediately. If you click the Bold button, the text will become bold; when you add an image, it will appear straightaway.
CKEditor 4 works on HTML, which is a markup language used to create web content. The huge benefit that CKEditor 4 gives you, however, is that you do not need to see the HTML code directly nor understand its intricacies. The editor is sort of an intermediary here — it hides the HTML code from you and lets you just work the WYSIWYG way.
The “edit HTML documents” part means that the editor can be used to edit any HTML content, like website content (blog articles, blog comments, forum posts), e-mails, or things that you write in web forms. That is not all, however: CKEditor 4 can also be used in all sorts of online applications, i.e. all those that use HTML as their source text format and are run in the browser!
# What CKEditor 4 Is Not
There are a few scenarios where CKEditor 4 seems to be just the tool that you need while in fact this is not the case. For example:
CKEditor 4 is neither a graphical web design tool nor a website builder. If you want a tool that will help you design your website, CKEditor 4 is not what you are looking for.
CKEditor 4 is not a content management system (CMS). It does not contain any sort of database to store your posts, logging system for user management, or administration panel where you can tweak the options for your website.
CKEditor 4 is not desktop publishing software and is not a recommended tool to use when creating paged content with fixed layout and styling that is intended for printing.
CKEditor 4 working out of the box in its default implementation is not a tool like Google Docs, where multiple users can edit the same article online in real time, track changes, and add comments. However, if you need these features, we have good news for you — they are available in CKEditor 5!
CKEditor 4 is not a tool that will let you input invalid HTML code. CKEditor 4 abides by W3C standards so it will modify HTML code if it is invalid.
At the end of the day, CKEditor 4 is a component that enables WYSIWYG editing in any application that needs this. Go to the CKEditor 4 Examples section to see plenty of valid editor use cases, with source code ready to copy and implement in your own solution!
# How CKEditor 4 Works
Web content is created in HTML, a markup language that includes both text and special tags that describe this text as well as add semantic meaning to it. These tags are used to mark particular content elements as “headings”, “paragraphs”, “bold text”, etc. CKEditor 4 merely hides the HTML tags from the user and shows their equivalents in the graphical user interface (like the Bold toolbar button) as well as outputs the text with formatting already applied.
This has some consequences, though. CKEditor 4 works on HTML code and to do it well, it needs to get proper HTML code as input. If the source document is incorrect, CKEditor 4 will attempt to fix it in order to be able to apply its content transformations.
CKEditor 4 is not a human-being, though, so it is unable to guess your intentions when you created incorrect HTML code which may lead to some unexpected consequences. In order to avoid problems, the input provider (you!) needs to make sure that what CKEditor 4 gets is clean, standards-compliant HTML code. If this is the case, CKEditor 4 will work as intended and output clean, standards-compliant HTML code in return.
Getting Started
Quick Start Guide
Basic CKEditor 4 Concepts
Best Practices
Inserting CKEditor
Loading CKEditor
Classic Editing
Inline Editing
Setting Configuration
Content Filtering (ACF)
Getting and Saving Data
Example CKEditor Setups
Advanced Installation Tasks
Introduction
Installing Components
Installing Plugins
Installing Skins
Installing Widgets
Upgrading
Upgrading
Patching Older Versions
Upgrading from CKEditor 3
API Changes from v3 to v4
Upgrading from FCKeditor 2
Building CKEditor
Getting Source Code
Building from Source
Using Package Managers
Specifying Editor Path
Integration
Introduction
Easy Image
Angular Integration
React Integration
Current
Deprecated
Vue Integration
Webpack Integration
jQuery Adapter
File Manager
File Manager Integration
Advanced Configuration
CKFinder Integration
File Browser API
Integrating with Dialogs
Uploading Dropped or Pasted Files
Accessibility Checker
Custom Issue Types
Custom Quick Fixes
CKEditor Deep Dive
Introduction
Advanced Content Filter
Introduction
Allowed Content Rules
Disallowed Content
Enabling CKEditor in Unsupported Environments
Widgets
Clipboard Integration
Error Code Reference
Contributing
How to Contribute
Contributing Code
Reporting Issues
Issues Tracker
Code Documentation
Testing Environment
Compatibility, Compliance, License
Browser Compatibility
Accessibility Support
Section 508 Compliance
WCAG 2.0 Compliance
License
HOWTOs
Basic Configuration
Support
Interface
Styles
File Upload
Output
Pasting
Spell Checker and SCAYT
Dialog Windows
Bugs and New Features
CKEditor 4 Plugin SDK
Introduction
Creating a Basic Plugin
Simple Plugin Tutorial
Simple Plugin (Part 1)
Simple Plugin (Part 2)
Integration with ACF
Plugin Stylesheets
CKEditor 4 Widget SDK
Introduction
Widget Tutorial
Widget Tutorial (Part 1)
Widget Tutorial (Part 2)
CKEditor 4 Skin SDK
Introduction
Advanced Concepts
Icons
CSS Reset
Chameleon Feature
Right-to-Left
High Contrast
Browser Hacks
Compatibility with CKEditor 4.5
Creating a Custom Skin
Setup
Customize
Test and Shape It Up
Build and Release
2003-2022 CKSource. All rights reserved.