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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

Links

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

Pasting

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

Source access

The CKEditor 5 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 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.

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.

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.

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.

Rich text

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: Online HTML Editor with code edit, and Real-time collaboration editor with code view.

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.

We use cookies and other technologies to provide you with a better user experience.

Learn more