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

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 online HTML editor allows the user to choose from both the font color and font background color. The 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

Copy, paste and clear formatting

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.

alt text

Layout and structure

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

Headings

The editor lets the user employ HTML-derived rich-text features like headings and paragraph text. 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 buttons to align the content as needed.

alt text

Horizontal rule

A horizontal rule is often used as a divider between main part of the content. It can be a graphic indicator of a theme shift, too. Use the toolbar button to insert a horizontal rule into the text body.

alt text

Blockquote

Use blockquote 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 snippets

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!

Use the toolbar button to invoke the code snippet dialog, paste the code and choose from a set of predefined programming languages to highlight hte code properly.

alt text

Rich content

Images

The online HTML editor supports the best of the rich-text editing options. Bundled in this online WYSIWYG editor are basics like images. Upload them from URL or from your hard drive. Align them as needed, style and set the dimensions in a handy image control panel.

alt text

Media

Embeddable media feature brings support for inserting 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

Online HTML editor offers full support for tables. Use the toolbar button to invoke table insertion dialog, where you can control various aspects of the table as needed.

alt text

Lists

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.

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

Links

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

alt text

Emojis

In the online HTML editor you can also insert emojis using a toolbar dropdown, where you can choose from several preconfigured sets of emojis.

alt text

Pasting

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.

alt text

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!

alt text

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 online HTML editor

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.

It 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.

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