Online HTML Editor

powered by CKEditor

Edit HTML source code

* Any uploaded image will be removed in 14 days.

Clean HTML output on the go

Here are the 2 different WYSIWYG HTML editors available on this website:

CKEditor 4 with direct access to edit HTML markup

CKEditor 5 with real-time collaboration and Markdown support.

With both editors, you can create clean HTML output with the easiest WYSIWYG editing possible. If you've already started writing rich-text content, all you have to do is paste it in onlinehtmleditor.dev, make your adjustments, extract HTML output from view-source mode and reuse it anywhere on the web!

Easy HTML editing

CKEditor 4's HTML source code editing feature allows it to be used as an online HTML editor. It includes syntax highlighting to make it easier for you to follow code. It can be forced to accept any type of code including tags by simply turning off the HTML filtering. You can also switch to WYSIWYG mode anytime to check how your code output looks!

Clean you HTML code

For situations where you would like to clean and fix up invalid HTML, you can use CKEditor 4's source code editing feature as well. After switching to source code mode, all you have to do is to paste in your HTML and CKEditor 4 will automatically fix it. You can again switch back and forth to WYSIWYG mode anytime to edit content more easily.

Convert Word document and Google Docs to HTML

CKEditor 4 and CKEditor 5 have excellent copy-paste with constant improvements. Whether you are copy-pasting from Google Docs, Word, Excel or LibreOffice, CKEditor will get you your exact content. This makes it better than any ordinary tool to turn your existing Word and Google Docs and LibreOffice documents to HTML. Simple as, paste your content, and click source code mode to see the HTML output.

Collaborative writing

If you're looking for an alternative to Google Docs real-time collaboration, but you also need HTML output, CKEditor 5 is a go! You can use it to comment on selected parts of the content, text, images, tables or suggest edits with its track changes feature.

To collaborate with your colleagues or friends all you have to do is to share the link. Each time you load the page, a special document ID gets attached to the URL. Each document ID and its content stays active for an hour after the last user disconnects from it so you do not immediately lose your content. Also, there isn't a limit for the number of collaborators!

Collaboration makes it easier to create your content quickly and efficiently. With CKEditor 5, where you write, comment, discuss and proofread the content are unified so you don't lose time switching between applications to edit and discuss. If some of your collaborators prefer Markdown, CKEditor 5 has you covered there too!

Learn about CKEditor 5 collaboration features

Why CKEditor?

WYSIWYG editors in your software often misbehave. This is usually because they are out-of-date or simply are not reliable. Unfortunately, many developers opt for simple, lightweight, do-it-yourself-editors based on assumptions without doing proper research or testing for their individual use case. This leaves the end users frustrated.

However, both CKEditors are built with 16 years of experience in WYSIWYG rich-text editing by a team of 40+ developers. We consistently listen to user concerns, trends, new feature requests to help us build our editors. Architectures that can handle complex structures and the constant improvements makes the editors stronger than any other examples.

The best WYSIWYG Online HTML editor around

What sets CKEditor apart from other online HTML tools is its originality! There are many websites and articles that include lists of best online HTML editors. What these listicles won't tell you is that although they have different names, many of the mentioned tools are simple implementations of CKEditor!

Now you've found the original online HTML editor! Whether you are looking for a quick online solution or to implement the editor in your own software, CKEditor will always provide you the latest and greatest WYSIWYG features. But if you are looking for some guidance on deciding which editor is the best for you, we can also help with that!

How to choose the perfect editor

Onlineeditor_image-04

Online HTML editor features

This section presents a whole variety of features that CKEditor has to offer

Onlineeditor_image-05

Styling and Formatting

The Basic Styles plugin provides the ability to add some basic text formatting to your document. When enabled, it adds the Bold, Italic, Underline, Strikethrough, Subscript and Superscript toolbar buttons that apply these styles. If you want to quickly remove basic styles from your document, use the Remove Format button provided by the Remove Format plugin.

Onlineeditor_image-08

Copy Formatting

The optional Copy Formatting plugin provides the ability to easily copy text formatting from one place in the document and apply it to another. When enabled, the plugin adds the Copy Formatting (Copy Formatting toolbar button) toolbar button. To copy styles, place your cursor inside the text (or select a styled document fragment) and press the button or use the Ctrl+Shift+C keyboard shortcut.

Onlineeditor_image-09

Removing Text Formatting

The Remove Format plugin provides the ability to quickly remove any text formatting that is applied through inline HTML elements and CSS styles, like basic text styles (bold, italic, etc.), font family and size, text and background colors or styles applied through the Styles drop-down. Note that it does not change text formats applied at block level..

Onlineeditor_image

Autoformatting

The Autoformat feature in CKEditor 5 allows you to quickly apply formatting to the content you are writing. While it can be customized, by default it can be used as an Markdown alternative. For example you bold by typing **text** or __text__ , create bulleted lists with * or -, create headings with #, ## or ###.

Onlineeditor_image-12

Block-Level Text Formats

The Format plugin provides the ability to add block-level text formatting to your document. When enabled, it introduces the Paragraph Format toolbar button that applies these text formats. The formats work on block level which means that you do not need to select any text in order to apply them and entire blocks will be affected by your choice.

Onlineeditor_image-18

Tables

This plugin adds the Table Properties dialog window with support for creating tables and setting basic table properties, such as: number of rows and columns, table width and height, cell padding and spacing, table headers setting, table border size, table alignment on the page and table caption and summary.

Onlineeditor_image-16

Inserting Images

The default Image plugin supports inserting images into the editor content. It provides the following features when compared to two alternative image plugins, Enhanced Image and Easy Image.

Onlineeditor_image-10

Pasting Content from LibreOffice

The Paste from LibreOffice plugin allows you to paste content from LibreOffice Writer and maintain original content structure and formatting.

Onlineeditor_image-06

Pasting Content from Google Docs

The Paste from Google Docs plugin allows you to paste content from Google Docs and maintain original content structure and formatting.

Onlineeditor_image-07

Pasting Content from Microsoft Excel

The Paste from Word plugin allows you to also paste content from Microsoft Excel and maintain original content structure and formatting. As of CKEditor 4.7 some more advanced Excel features are not supported yet and will be added in future CKEditor releases.

Onlineeditor_image-17

Pasting Content from Microsoft Word

The Paste from Word plugin allows you to paste content from Microsoft Word and maintain original content structure and formatting. When enabled, it automatically detects Word content and transforms its structure and formatting to clean HTML.

Onlineeditor_image-11

Source Code Editing

CKEditor 4 is a WYSIWYG editor, so it makes it easy for end users to work on HTML content without any knowledge of HTML whatsoever. More advanced users, however, sometimes want to access raw HTML source code for their content and CKEditor makes it possible by providing two dedicated plugins: Source Editing Area and Source Dialog.

Onlineeditor_image-15

Code Snippets

This plugin allows you to insert rich code fragments and see a live preview with highlighted syntax. Its original implementation uses the highlight.js library, but the plugin exposes a convenient interface for hooking any other library, even a server-side one.

Onlineeditor_image-13

Embedding Media Resources

The optional Media Embed and Semantic Media Embed plugins introduce two new widget types — an embedded media resource and an embedded media resource with a semantic output.

Onlineeditor_image-14

Accessibility Support

Accessibility Checker is an innovative solution that lets you inspect the accessibility level of content created in CKEditor and immediately solve any accessibility issues that are found.

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