Real-time collaboration editor user guide

Welcome to the online HTML editor by CKEditor! It is a versatile and comprehensive online WYSIWYG editor powered by a modern, flexible, feature-rich framework with collaborative editing delivered by CKSource written in pure JavaScript.

Real-time collaboration editor features overview

Whatever your needs are, this real-time collaboration editor with a plethora of functions and options is at hand. It offers powerful, comfortable, fast, and easy online collaborative editing experience. If there is a teamwork to be done - just invite your colleagues and send them the link for a real-time collaborative eidting feast.

Basic formatting features and text styling

Basic text styles

The basic text styles feature allows you to apply the most frequently used formatting indispensable for content creation. This package provides essential text styling features such as bold, italic, underline, strikethrough, subscript and superscript. Coupled with more formatting features, these serve as a base for any WYSIWYG editor toolset.

Use UI toolbar buttons to employ basic styles in your content - select a word or larger portion of the text to apply the formatting to and then use a toolbar button with the desired style.

alt text

Font styles

The font feature provides extended text formatting options for the document content. It enables the following features in the rich-text editor: change the font family, control the font size, control the font color and control the font background color.

Use UI toolbar buttons to employ change the font size, font face, font color or background color of selected content. Apply selected style to single words or whole passages.

alt text

Remove formatting

The remove format feature allows the formatting to be removed with a single click of a toolbar button. Use it to reset font face or color, remove bolding or italics and to restore default alignment of content.

alt text

Layout and structure

Block formatting and text operations can be employed to provide rich-text editing experience.

Headings

Headings feature enables support for headings. These are used by the creators to structure their documents. They also aid both the readers, making the content more organized and easier to read, and the search indexers scanning for crucial information. The feature toolbar dropdown by default includes the paragraph format, too.

Choose the sentence, phrase or word you want to turn into a heading, and then use the appropriate item from the headings drop down in the editor toolbar. Easily turn a heading back into paragraph text the same way, too.

alt text

Text alignment

Text alignment options let the user employ HTML-derived rich-text features like aligning text to the left, to the right, centering it or justifying - to suit your needs better.

Select a paragraph and use the toolbar dropdown to align the content as needed. The alignment can be reset with the remove format feature.

alt text

Blockquote

Blockquote is most often used to emphasize or visually separate important passages or sentences.

Choose a paragraph you want to separate from the main text body and apply the block quote formatting with toolbar button easily.

alt text

Indent and outdent

Indent and outdent feature serves similar purpose and allows indenting or outdenting specific parts of the content to create graphic division in between passages or paragraphs.

Choose a paragraph you need to indent and indent it with toolbar button easily.

alt text

Code blocks

Code blocks allow you to distinguish regular text from code or script snippets - these are presented in a distinctive visual way depending on the predefined, selectable languages and scripts!

Paste the code, select it and apply proper formatting with a toolbar dropdown selector.

alt text

Rich content

The online HTML editor supports the best of the rich-text editing options to create advanced documents.

Links

Link feature provides support for regular links, emails and anchors.

Select a text you want to turn into link, click the toolbar button and paste the URL. Or simply paste the URL directly into the content and it will automatically turn live, thanks to the autolink feature.

alt text

Images

Image feature contains multiple plugins that enable upload, allow captioning, support image styles as well as aligning, resizing and linking images.

Use the toolbar button to upload an image, or simply paste it into the content. Caption the image if needed using the predefined caption footer. Use the image toolbar to control the alignment and image alternative text.

alt text

Rich media

Media embed features brings support for inserting embeddable media such as YouTube or Vimeo videos and tweets into your rich text content.

Use the media embed toolbar button and paste the URL of the content you need to embed.

alt text

Tables

Tables feature offers table creation and editing tools that help content authors bring tabular data into their documents. It allows for styling the tables and individual cells, selecting, pasting and nesting tables.

Use the toolbar button to insert a table. Use the pop-up table toolbar to manage cells, add or remove rows and columns, format the borders and cell backgrounds. Split, join and move the cells around.

alt text

Lists

Lists feature allows to produce better and more efficient message by creating both ordered and unordered lists to help the user organize the content better and in a more readable, attractive manner.

Choose the desired type of list - bulleted or numbered - from the toolbar and apply it with a single button click. You can nest different types of lists, too!

alt text

Checkable to-do lists are available, too!

Single click to create step-by-step guides, shopping list, notes, recipes or requirements lists in your content.

alt text

Special characters

Special characters plugin provides a possibility to insert predefined special characters into the rich-text editor. It can also be configured to support inserting emojis.

Choose a desired character from a toolbar dropdown chart to insert it into the content.

alt text

Pasting

Using existing rich-text content is very simple with the CKEditor 5 WYSIWYG editor. It can be efficiently pasted from Word or Google Docs, keeping the formatting and retaining styles. There is additional support for pasting plain text that will let the pasted content inherit the style of the editor content.

Productivity features

Markdown input

Autoformatting feature allows you to employ Markdown-like syntax as you type to apply basic formatting features on the go. Speed up and simplify the process by skipping the need to use toolbar buttons and dropdowns for the most common formatting features with these easy to memorize options listed below.

Use these GitHub Flavored Markdown inline codes as you type for a faster and more efficient editing workflow:

The following block formatting options are also available:

alt text

Automatic text transformations / autocorrection

Automatic text transformations – The feature brings support for implementing autocorrection options, i.e. automatically turning predefined snippets into their improved forms. This feature comes pre-configured with a set of the most popular transformations.

Simply type things like 1/2, 3/4, © or ™ and the feature will transform the text on the go into proper characters.

alt text

Real-time collaborative editing features

The CKEditor 5 Framework is a powerful tool aimed at collaborative effort thanks to the real-time collaboration features.

Track changes

Changes tracking. Changes done by the users are marked in the content and shown as suggestions in the sidebar. Suggestions can be accepted or discarded by the users. The suggestion balloon is then closed and the change is no longer marked.

Enable changes tracking with a toolbar dropdown. Use these options to mass-accept or reject introduced changes, or utilize the sidebar to deal with individual changes during a real-time collaborative editing experience.

alt text

Comments

Comments. This feature makes it possible to add comments to any part of rich text content in CKEditor 5 in the collaborative edition mode, including text and block elements such as embedded media or images.

Enable comments with a toolbar button. Commented content is marked as highlighted and a corresponding comment balloon is displayed in the sidebar or inline. Comments can be added, edited, deleted and replied to, allowing the editors to collaborate on the same document directly in the rich text editor.

alt text

Export to file

The content created with online real-time collaboration editor can be conveniently saved.

Export to PDF

Export to PDF feature allows you to generate a PDF file directly from the CKEditor 5 WYSIWYG editor content. The CKEditor Cloud Services HTML to PDF converter generates a PDF document that can be downloaded by the user. This allows you to easily print your content to the PDF format. Simply click the toolbar button and save the generated PDF file to disk.

alt text

Export to Word

Export to Word feature allows you to generate an editable ‘.docx’ file directly from the rich-text content and save it to disk for later editing thanks to the CKEditor Cloud Services. Click the toolbar button to save the editable Word document to disk.

alt text

Accessibility Support

Please check thi keyboard shortcuts cheatsheet for CKEditor 5 real-time collaboration editor for a starter. Use the popular and widespread keyboard shortcuts for more accessibility and productivity boost.

Content editing

Action PC Mac
Copy Ctrl + C + C
Paste Ctrl + V + V
Paste plain text and inherit target formatting Ctrl + Shift + V + Shift + V
Undo Ctrl + Z + Z
Redo Ctrl + Y
Ctrl + Shift + Z
+ Y
+ Shift + Z
Select all Ctrl + A + A
Bold Ctrl + B + B
Italic Ctrl + I + I
Link Ctrl + K + K
Insert a hard break (e.g. a new paragraph) Enter
Insert a soft break (i.e. a <br>) Shift + Enter
Nest the current list item (when in a list) Tab
Move out of link or inline style /
When a widget is selected (for example: image, table, horizontal line, etc.)
Insert a new paragraph directly after a widget Enter
Insert a new paragraph directly before a widget Shift + Enter
Display the caret to allow typing directly before a widget /
Display the caret to allow typing directly after a widget /
In a table cell
Move the selection to the next cell Tab
Move the selection to the previous cell Shift + Tab
Insert a new table row (when in the last cell of a table) Tab
Navigate through the table / / /

User interface and navigation

Use the following keystrokes for more efficient navigation in the CKEditor 5 user interface:

Action PC Mac
Close contextual balloons and UI components like dropdowns Esc
Move focus to the visible contextual balloon Tab
Move focus between fields (inputs and buttons) in contextual balloons Tab
Move focus to the toolbar Alt + F10 Alt + F10
(may require Fn)
Navigate through the toolbar / / /
Execute the currently focused button Enter

About real-time collaboration editor

Real-time collaboration editor is powered by CKEditor 5. CKEditor is an open-source WYSIWYG editor that delivers HTML rich content. It comes packed with a plethora of functions and features, from the basic ones like text formatting to the most advanced, industry-standard options like Markdown-formatted output or the commercial export to PDF.

This free online HTML editor contains a prime choice of features from both available CKEditor versions: CKEditor 4 powers the Online HTML Editor with code view, while CKEditor 5 with Collaboration Features powers the Real-time collaboration editor.

Both of these offer a similar multitude of writing and editing features accessible via a comfortable, efficiency-oriented user interface.