Free online HTML 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 delivered by CKSource written in pure JavaScript.

Features overview

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 the commercial export to PDF.

Basic formatting features and text styling

The basic editing features include formatting options like bold, italics, underline, strikethrough, superscript and subscript.

The online HTML editor allows the user to choose from both the font color and font background color. Block formatting can also be applied to paragraphs.

The formatting can also be easily copied and applied to other areas of the content or simply removed with a single click of a toolbar button.

Layout and structure

The editor lets the user employ HTML-derived rich-text features like headings and paragraph text.

Use blockquote to emphasize or visually separate important passages or sentences. Also indent or outdent specific parts of the content to create graphic division in between passages or paragraphs.

Rich content

The online HTML editor supports the best of the rich-text editing options. Bundled in this online WYSIWYG editor are basics like images or embeddable media. But not only - there is support for tablesor emojis and many more available options.

Employ the power of lists to produce better and more efficient message - both ordered and unordered lists are available to help the user organize the content better and in a more readable, attractive manner.

Links are - of course - also supported in the online editor! Regular links, emails and anchors come in handy at any time.

Configurable code snippets 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!

Rich content can also be pasted from Word, Excel, LibreOffice or Google Docs, keeping the formatting and retaining styles.

Spelling aid

It is not always easy to convey the message in a clear, efficient manner. Even though this online editor cannot help you with phrasing or style, it offers another priceless feature - the spellcheck and grammar checking. Spot and correct any mistakes as you write, in real time, with this easy and comfortable solution - just hover over an underlined error to see suggestions and correct it (or reject!) with a single click.

Source access

The CKEditor 4 based “Online HTML Editor” allows you to see and edit the HTML code with ease. With a single click you can switch between the WYSIWYG and HTML source editing modes. It allows for full control of the output produced by the online editor and lets the user easily edit and then move the code where it is needed without the necessity to employ 3rd-party dedicated editors.

All you need to produce proper HTML is our online rich-text editor!

Feature-rich online HTML editor

Whatever your needs are, this online HTML editor with a plethora of functions and options is at hand. It offers powerful, comfortable, fast, and easy online editing experience. The content may be output to valid HTML code that may be later used wherever you need. Or if there is a teamwork to be done - just invite your colleagues and send them the editing link for a collaborative feast.

Accessibility Support

CKEditor complies with most important industry standards for accessibility, recommended by Section 508, WCAG 2.0, WAI-ARIA and IBM Web Accessibility Checklist.

Keyoboard shortcuts

Many functions in CKEditor 4 have their equivalent keyboard shortcuts. This is one of the reasons why working with the editor is simple and efficient.

Working with a document

Esc Closes a CKEditor dialog window, drop-down list, or context menu. Equivalent to the Cancel button in a dialog window. Also moves from the context menu submenu to the parent option.

Enter Selects a CKEditor function from the toolbar, drop-down list, or context menu. Equivalent to the OK button in a dialog window.

Shift+F10, Menu/Application key – Opens the element’s context menu.

Ctrl+Z – Performs the undo operation.

Ctrl+Y, Shift+Ctrl+Z – Performs the redo operation.

Navigation

Home – Jumps to the beginning of the line.

Ctrl+Home – Jumps to the beginning of the document.

End – Jumps to the end of the line.

Ctrl+End – Jumps to the end of the document.

PgDn – Scrolls down the document, approximately by the length of the editing area.

PgUp – Scrolls up the document, approximately by the length of the editing area.

Writing

Enter (Return) – Ends a paragraph and starts a new one.

Shift+Enter – Adds a line break.

Shift+Ctrl+3 – Enables entering content (by adding a new paragraph) before a problematic element such as an image, table or div element that starts or ends a document, list, or even adjacent horizontal lines.

Shift+Ctrl+4 – Enables entering content (by adding a new paragraph) after a problematic element such as an image, table or div element that starts or ends a document, list, or even adjacent horizontal lines.

Backspace, Del – Deletes a character.

Ctrl+Backspace, Ctrl+Del – Deletes a word.

Text selection

Ctrl+A – Selects all document contents.

Shift+Arrow – Selects a text fragment by letters.

Ctrl+Shift+Arrow – Selects a text fragment by words.

Shift+Home – Selects a text fragment from the cursor to the beginning of the line.

Shift+End – Selects a text fragment from the cursor to the end of the line.

Ctrl+Shift+Home – Selects a text fragment from the cursor to the beginning of the document.

Ctrl+Shift+End – Selects a text fragment from the cursor to the end of the document.

Shift+PgDn – Selects a text fragment of approximately the length of the editing area starting from the cursor and going down.

Shift+PgUp – Selects a text fragment of approximately the length of the editing area starting from the cursor and going up.

Accessibility

Alt+0 – Opens the Accessibility Instructions dialog window.

Alt+F10 – Enters the toolbar or the tab list of the currently open dialog window.

Alt+F11 – Enters the elements path.

Tab – Moves to the next toolbar button group, context menu suboption, elements path element, dialog window element, or dialog window tab while in the tab list.

Right Arrow – Moves to the next toolbar button within the group, context menu suboption, elements path element, dialog window element, or dialog window tab while in the tab list.

Tab or Down Arrow – Moves to the next drop-down list or context menu option.

Shift+Tab – Moves to the previous toolbar button group, context menu parent option, elements path element, dialog window element, or dialog window tab while in the tab list.

Left Arrow – Moves to the previous toolbar button within the group, context menu parent option, elements path element, dialog window element, or dialog window tab while in the tab list.

Shift+Tab or Up Arrow – Moves to the previous drop-down list or context menu option.

Space or Enter – Activates a toolbar button, a context menu option, a drop-down list option, an elements path element, or a dialog window tab once selected. Also enters a context menu submenu, if it is available.

Cut, Copy and Paste

Ctrl+X, Shift+Del – Cuts a text fragment to clipboard.

Ctrl+C – Copies a text fragment to clipboard.

Ctrl+V, Shift+Insert – Pastes a text fragment from clipboard.

Shift+Ctrl+V – Pastes content from clipboard as plain text.

Text styling

Ctrl+B – Applies bold formatting to a text fragment.

Ctrl+I – Applies italics formatting to a text fragment.

Ctrl+U – Applies underline formatting to a text fragment.

Copy formatting

Ctrl+Shift+C – Copies the inline formatting from a text fragment and enables the sticky mode.

Ctrl+Shift+V – Applies the previously copied inline formatting to a text fragment.

Esc – Disables the sticky mode.

Rich text

Ctrl+L, Ctrl+K – Opens the Link dialog window.

Tab – Indents a list.

Shift+Tab – Outdents a list.

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.