Feature-rich editor
CKEditor 5 is a highly flexible framework that lets you build your custom editor of any type (like classic, inline, distraction-free, or document-like), with any set of features and the toolbar type that you need in no time.
This custom editor build contains almost all non-collaborative CKEditor 5 features. You can use it to create your own content or to paste some existing content from Microsoft Word, Google Docs, text documents, or any online resources.
This editor was configured specifically to allow testing as many features as possible in one demo, with a multiline toolbar (with some features grouped into dropdowns) that gives you easy access to all available features. It is based on the classic editor, providing you with a boxed editing area with a toolbar, placed in a specific position on the page. The toolbar has been specially configured to host as many features as possible in a convenient setup.
Thanks to the autoformatting feature you can also use Markdown-like inline shortcodes as you type to create and format your content without using the toolbar buttons. The slash command feature lets you format and insert content on the go.
You can also see the collaborative document editor, to try out features such as comments, comments archive, track changes, or revision history, and other features enhancing document editing functions.
Handheld emperor
Nintendo, a Japanese electronics company, started as a hanafuda cards manufacturer in 1889. In the mid-1970s, they entered the early video games market and became famous for their home video and handheld game consoles. Nintendo introduced consoles like the NES, SNES, and Wii. But the most revolutionary was for sure the Game Boy.
A countdown of Nintendo handhelds
- Game & Watch was Nintendo's first product offering out-of-home gaming. From 1980 to 1991, over a hundred games were released, gaining great popularity.
- In 1989, the original Game Boy was released. The new amazing machine utilized a cartridge system, allowing the users to play a multitude of games of all kinds. This was a historical game-changer.
- In 2004, Nintendo introduced a new console family called the Nintendo DS. It sported a dual LCD screen in a folded shell, with the lower one being a touchscreen.
- 2017 brought the hybrid experience for both couch-preferring gamers and handheld enthusiasts with the release of the Nintendo Switch. It offers both a TV mode with high-definition graphics and a handheld mode using the built-in 6.2” display.
Handheld consoles' popularity
While the most recent Switch is a prevalent choice nowadays, the 2DS and 3DS consoles are still popular. The king, however, is none other than the original wonder — the Game Boy.
| Console | Production dates | Pieces sold (2021) |
| Game & Watch | 1980-1991, 2020-2021 | 44 million |
| Game Boy | 1989-2010 | 201 million 1 |
| Nintendo DS | 2011-2020 | 76 million 2 |
| Switch | since 2017 | 123 million 3 |
|
1 119 million Game Boy and Game Boy Color variants, 82 million Game Boy Advance variants. |
||
Handheld gaming experience
It's dangerous to go alone! Take this.
The Legend of Zelda, 1986
Games offered by Nintendo include multiple genres, out of which the famous platformer arcade Super Mario 
and the adventure role-play Legend of Zelda 
series are probably the most iconic.
Games that can be played on the handheld family include (examples of games listed):
-
Action & adventure games
- The Legend of Zelda series
- Chrono Trigger
-
First-person action games
- Splatoon
-
Role-playing games (RPG)
- The Pokemon series
- The Final Fantasy series
By default, CKEditor 5 filters out any content that is unsupported by its plugins and configuration. Check out the General HTML Support (“GHS”) feature that allows you to enable HTML features that are not explicitly supported by any other dedicated CKEditor 5 plugins.
While this demo has the import from Word feature enabled, please consider that the comments and track changes features are not enabled and hence these elements will not show up in the content. Read more about handling such situations in the import from Word’s features comparison guide. You can test these features working together in the official import from Word demo.
# Editor example configuration
To set up the feature-rich demo locally, you need to follow the Building the editor from source guide. However, you need to use the configuration files provided below:
Packages installation
npm install --save \
@ckeditor/ckeditor5-alignment \
@ckeditor/ckeditor5-autoformat \
@ckeditor/ckeditor5-basic-styles \
@ckeditor/ckeditor5-block-quote \
@ckeditor/ckeditor5-case-change
@ckeditor/ckeditor5-ckbox \
@ckeditor/ckeditor5-cloud-services \
@ckeditor/ckeditor5-code-block \
@ckeditor/ckeditor5-dev-utils \
@ckeditor/ckeditor5-document-outline \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-essentials \
@ckeditor/ckeditor5-export-pdf \
@ckeditor/ckeditor5-export-word \
@ckeditor/ckeditor5-find-and-replace \
@ckeditor/ckeditor5-font \
@ckeditor/ckeditor5-format-painter \
@ckeditor/ckeditor5-heading \
@ckeditor/ckeditor5-highlight \
@ckeditor/ckeditor5-horizontal-line \
@ckeditor/ckeditor5-html-embed \
@ckeditor/ckeditor5-image \
@ckeditor/ckeditor5-indent \
@ckeditor/ckeditor5-language \
@ckeditor/ckeditor5-link \
@ckeditor/ckeditor5-list \
@ckeditor/ckeditor5-media-embed \
@ckeditor/ckeditor5-mention \
@ckeditor/ckeditor5-page-break \
@ckeditor/ckeditor5-paste-from-office \
@ckeditor/ckeditor5-remove-format \
@ckeditor/ckeditor5-show-blocks \
@ckeditor/ckeditor5-slash-command \
@ckeditor/ckeditor5-source-editing \
@ckeditor/ckeditor5-special-characters \
@ckeditor/ckeditor5-table \
@ckeditor/ckeditor5-template \
@ckeditor/ckeditor5-theme-lark \
@ckeditor/ckeditor5-typing \
@ckeditor/ckeditor5-word-count \
@webspellchecker/wproofreader-ckeditor5
Editor configuration script (app.js in the customized installation guide)
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CaseChange } from '@ckeditor/ckeditor5-case-change';
import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
import { TableOfContents } from '@ckeditor/ckeditor5-document-outline';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { ExportPdf } from '@ckeditor/ckeditor5-export-pdf';
import { ExportWord } from '@ckeditor/ckeditor5-export-word';
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
import { Font } from '@ckeditor/ckeditor5-font';
import { FormatPainter } from '@ckeditor/ckeditor5-format-painter';
import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Highlight } from '@ckeditor/ckeditor5-highlight';
import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
import { HtmlEmbed } from '@ckeditor/ckeditor5-html-embed';
import { AutoImage,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
PictureEditing
} from '@ckeditor/ckeditor5-image';
import { ImportWord } from '@ckeditor/ckeditor5-import-word';
import { Indent, IndentBlock } from '@ckeditor/ckeditor5-indent';
import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
import { List, ListProperties, TodoList } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Mention } from '@ckeditor/ckeditor5-mention';
import { PageBreak } from '@ckeditor/ckeditor5-page-break';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
import { ShowBlocks } from '@ckeditor/ckeditor5-show-blocks';
import { SlashCommand } from '@ckeditor/ckeditor5-slash-command';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
import { SpecialCharacters, SpecialCharactersEssentials } from '@ckeditor/ckeditor5-special-characters';
import { Style } from '@ckeditor/ckeditor5-style';
import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table';
import { Template } from '@ckeditor/ckeditor5-template';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { WordCount } from '@ckeditor/ckeditor5-word-count';
import WProofreader from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';
// templates icons
import articleImageRightIcon from '../../assets/img/article-image-right.svg';
import financialReportIcon from '../../assets/img/financial-report.svg';
import formalLetterIcon from '../../assets/img/formal-letter.svg';
import resumeIcon from '../../assets/img/resume.svg';
import richTableIcon from '../../assets/img/rich-table.svg';
import todoIcon from '../../assets/img/todo.svg';
ClassicEditor
.create( document.querySelector( '#full-featured-editor' ), {
ckbox: {
// This editor configuration includes the CKBox feature.
// Provide correct configuration values to use it.
tokenUrl: 'https://example.com/cs-token-endpoint'
// Read more about CKBox - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html.
// For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.
},
plugins: [
Autoformat, BlockQuote, Bold, Heading, Image, ImageCaption, FormatPainter,
ImageStyle, ImageToolbar, Indent, Italic, Link, List, MediaEmbed,
Paragraph, Table, TableToolbar, Alignment, AutoImage, AutoLink,
CaseChange, CKBox, CKBoxImageEdit, CloudServices, Code, CodeBlock, Essentials, ExportPdf,
ExportWord, ImportWord, FindAndReplace, Font, Highlight, HorizontalLine,
HtmlEmbed, ImageInsert, ImageResize, ImageUpload, IndentBlock, GeneralHtmlSupport,
LinkImage, ListProperties, TodoList, Mention, PageBreak, PasteFromOffice,
PasteFromOfficeEnhanced, PictureEditing, RemoveFormat, ShowBlocks, SlashCommand, SourceEditing,
SpecialCharacters, SpecialCharactersEssentials, Style, Strikethrough, Subscript, Superscript,
TableCaption, TableCellProperties, TableColumnResize,
TableProperties, TableOfContents, Template, TextTransformation,
Underline, WordCount, WProofreader
],
toolbar: {
items: [
'undo', 'redo',
'|',
'exportPdf', 'exportWord', 'importWord',
'|',
'showBlocks', 'formatPainter', 'findAndReplace', 'selectAll', 'wproofreader',
'|',
'heading',
'|',
'style',
'|',
'fontSize', 'fontFamily',
{
label: 'Font color',
icon: 'plus',
items: [ 'fontColor', 'fontBackgroundColor' ]
},
'|',
'caseChange',
'-',
'bold', 'italic', 'underline',
{
label: 'Formatting',
icon: 'text',
items: [ 'strikethrough', 'subscript', 'superscript', 'code', 'horizontalLine', '|', 'removeFormat' ]
},
'specialCharacters', 'pageBreak',
'|',
'link', 'insertImage', 'ckbox', 'insertTable', 'tableOfContents', 'insertTemplate',
{
label: 'Insert',
icon: 'plus',
items: [ 'highlight', 'blockQuote', 'mediaEmbed', 'codeBlock', 'htmlEmbed' ]
},
'|',
'alignment',
'|',
'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
'|',
'sourceEditing'
],
shouldNotGroupWhenFull: true
},
htmlSupport: {
allow: [
{
name: /^.*$/,
styles: true,
attributes: true,
classes: true
}
]
},
style: {
definitions: [
{
name: 'Article category',
element: 'h3',
classes: [ 'category' ]
},
{
name: 'Title',
element: 'h2',
classes: [ 'document-title' ]
},
{
name: 'Subtitle',
element: 'h3',
classes: [ 'document-subtitle' ]
},
{
name: 'Info box',
element: 'p',
classes: [ 'info-box' ]
},
{
name: 'Side quote',
element: 'blockquote',
classes: [ 'side-quote' ]
},
{
name: 'Marker',
element: 'span',
classes: [ 'marker' ]
},
{
name: 'Spoiler',
element: 'span',
classes: [ 'spoiler' ]
},
{
name: 'Code (dark)',
element: 'pre',
classes: [ 'fancy-code', 'fancy-code-dark' ]
},
{
name: 'Code (bright)',
element: 'pre',
classes: [ 'fancy-code', 'fancy-code-bright' ]
}
]
},
exportPdf: {
stylesheets: [
'EDITOR_STYLES',
// Add your custom styles here
// Read more in the documentation:
// https://ckeditor.com/docs/ckeditor5/latest/features/converters/export-pdf.html#plugin-option
],
fileName: 'export-pdf-demo.pdf',
converterOptions: {
format: 'Tabloid',
margin_top: '20mm',
margin_bottom: '20mm',
margin_right: '24mm',
margin_left: '24mm',
page_orientation: 'portrait'
},
// PROVIDE CORRECT VALUES HERE:
tokenUrl: 'https://example.com/cs-token-endpoint'
},
exportWord: {
stylesheets: [ 'EDITOR_STYLES' ],
fileName: 'export-word-demo.docx',
converterOptions: {
format: 'B4',
margin_top: '20mm',
margin_bottom: '20mm',
margin_right: '12mm',
margin_left: '12mm',
page_orientation: 'portrait'
},
// PROVIDE CORRECT VALUES HERE:
tokenUrl: 'https://example.com/cs-token-endpoint'
},
fontFamily: {
supportAllValues: true
},
fontSize: {
options: [ 10, 12, 14, 'default', 18, 20, 22 ],
supportAllValues: true
},
htmlEmbed: {
showPreviews: true
},
image: {
styles: [
'alignCenter',
'alignLeft',
'alignRight'
],
resizeOptions: [
{
name: 'resizeImage:original',
label: 'Original',
value: null
},
{
name: 'resizeImage:50',
label: '50%',
value: '50'
},
{
name: 'resizeImage:75',
label: '75%',
value: '75'
}
],
toolbar: [
'imageTextAlternative', 'toggleImageCaption', '|',
'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText' '|',
'resizeImage', '|', 'ckboxImageEdit'
]
},
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
},
link: {
decorators: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
}
}
},
mention: {
feeds: [
{
marker: '@',
feed: [
'@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
'@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
'@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
'@sugar', '@sweet', '@topping', '@wafer'
],
minimumCharacters: 1
}
]
},
template: {
definitions: [
{
title: 'The title of the template',
description: 'A longer description of the template',
data: '<p>Data inserted into the content</p>'
},
{
// ...
},
// More template definitions.
// ...
]
},
importWord: {
// PROVIDE CORRECT VALUES HERE:
tokenUrl: 'https://example.com/cs-token-endpoint'
},
placeholder: 'Type or paste your content here!',
table: {
contentToolbar: [
'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption'
]
},
wproofreader: {
// PROVIDE CORRECT VALUE HERE:
serviceId: 'service ID',
lang: 'auto',
srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
},
licenseKey: 'your-license-key'
// PROVIDE CORRECT VALUES HERE
} )
.then( editor => {
window.editor = editor;
// Prevent showing a warning notification when user is pasting a content from MS Word or Google Docs.
window.preventPasteFromOfficeNotification = true;
document.querySelector( '.ck.ck-editor__main' ).appendChild( editor.plugins.get( 'WordCount' ).wordCountContainer );
} )
.catch( err => {
console.error( err );
} );
Editor content listing (index.html in the customized installation guide)
<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
.ck.ck-word-count {
display: flex;
justify-content: flex-end;
@@ -19,21 +22,155 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ck.ck-content {
font-size: 16px;
line-height: 1.6;
padding: 2em;
}
.ck-content .ck-horizontal-line {
margin-bottom: 1em;
}
.ck.ck-content h3.category {
font-family: 'Bebas Neue';
font-size: 20px;
font-weight: bold;
color: #555;
letter-spacing: 10px;
margin: 0;
padding: 0;
}
.ck.ck-content h2.document-title {
font-family: 'Bebas Neue';
font-size: 50px;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
}
.ck.ck-content h3.document-subtitle {
font-family: 'Bebas Neue';
font-size: 20px;
color: #555;
margin: 0 0 1em;
font-weight: normal;
padding: 0;
}
.ck.ck-content p.info-box {
--background-size: 30px;
--background-color: #e91e63;
padding: 1.2em 2em;
border: 1px solid var(--background-color);
background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)), linear-gradient(135deg, transparent calc(100% - var(--background-size)), var(--background-color) calc(100% - var(--background-size)), var(--background-color));
border-radius: 10px;
margin: 1.5em 2em;
box-shadow: 5px 5px 0 #ffe6ef;
}
.ck.ck-content blockquote.side-quote {
font-family: 'Bebas Neue';
font-style: normal;
float: right;
width: 35%;
position: relative;
border: 0;
overflow: visible;
z-index: 1;
margin-left: 1em;
}
.ck.ck-content blockquote.side-quote::before {
content: "“";
position: absolute;
top: -37px;
left: -10px;
display: block;
font-size: 200px;
color: #e7e7e7;
z-index: -1;
line-height: 1;
}
.ck.ck-content blockquote.side-quote p {
font-size: 2em;
line-height: 1;
}
.ck.ck-content blockquote.side-quote p:last-child:not(:first-child) {
font-size: 1.3em;
text-align: right;
color: #555;
}
.ck.ck-content span.marker {
background: yellow;
}
.ck.ck-content span.spoiler {
background: #000;
color: #000;
}
.ck.ck-content span.spoiler:hover {
background: #000;
color: #fff;
}
.ck.ck-content pre.fancy-code {
border: 0;
margin-left: 2em;
margin-right: 2em;
border-radius: 10px;
}
.ck.ck-content pre.fancy-code::before {
content: "";
display: block;
height: 13px;
background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
margin-bottom: 8px;
background-repeat: no-repeat;
}
.ck.ck-content pre.fancy-code-dark {
background: #272822;
color: #fff;
box-shadow: 5px 5px 0 #0000001f;
}
.ck.ck-content pre.fancy-code-bright {
background: #dddfe0;
color: #000;
box-shadow: 5px 5px 0 #b3b3b3;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 Feature-rich editor</title>
</head>
<body>
<div id="full-featured-editor">
Editor content is inserted here.
</div>
<script src="dist/bundle.js"></script>
<!-- include CKBox from CDN -->
<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
</body>
</html>
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.