富文本编辑器

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 package-lock.json
+/.idea/

LICENSE.md

@@ -1,21 +1,49 @@
 Software License Agreement
 ==========================
 
-**CKEditor 5 classic editor build** – https://github.com/ckeditor/ckeditor5-build-classic <br>
-Copyright (c) 2003-2020, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
 
-Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
+Online builder code samples are licensed under the terms of the MIT License (see Appendix A):
 
-Sources of Intellectual Property Included in CKEditor
------------------------------------------------------
+	http://en.wikipedia.org/wiki/MIT_License
 
-Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+CKEditor 5 collaboration features are only available under a commercial license. [Contact us](https://ckeditor.com/contact/) for more details.
 
-The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
-
-* Lo-Dash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
+Free 30-days trials of CKEditor 5 collaboration features are available:
+ * https://ckeditor.com/collaboration/ - Real-time collaboration (with all features).
+ * https://ckeditor.com/collaboration/comments/ - Inline comments feature (without real-time collaborative editing).
+ * https://ckeditor.com/collaboration/track-changes/ - Track changes feature (without real-time collaborative editing).
 
 Trademarks
 ----------
 
-**CKEditor** is a trademark of [CKSource](http://cksource.com) Frederico Knabben. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
+CKEditor is a trademark of CKSource - Frederico Knabben. All other brand
+and product names are trademarks, registered trademarks or service
+marks of their respective holders.
+
+---
+
+Appendix A: The MIT License
+---------------------------
+
+The MIT License (MIT)
+
+Copyright (c) 2014-{YEAR}, CKSource - Frederico Knabben
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,72 +1,68 @@
-CKEditor 5 classic editor build
-========================================
+# CKEditor 5 editor generated with the online builder
 
-[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-build-classic.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic)
-[![Build Status](https://travis-ci.org/ckeditor/ckeditor5-build-classic.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-build-classic)
-<br>
-[![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-build-classic/status.svg)](https://david-dm.org/ckeditor/ckeditor5-build-classic)
-[![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-build-classic/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-build-classic?type=dev)
+This repository presents a CKEditor 5 editor build generated by the [Online builder tool](https://ckeditor.com/ckeditor-5/online-builder)
 
-The classic editor build for CKEditor 5. Read more about the [classic editor build](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor) and see the [demo](https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html).
+## Quick start
 
-![CKEditor 5 classic editor build screenshot](https://c.cksource.com/a/1/img/npm/ckeditor5-build-classic.png)
+1. Open the `sample/index.html` page in the browser.
 
-## Documentation
+If you picked the real-time collaboration plugins:
 
-See:
+2. Fill the dialog with correct token, websocket and upload URL endpoints. If you do not have these yet or do not know their meaning, [contact us](https://ckeditor.com/contact/).
 
-* [Installation](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html) for how to install this package and what it contains.
-* [Basic API](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html) for how to create an editor and interact with it.
-* [Configuration](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html) for how to configure the editor.
-* [Creating custom builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html) for how to customize the build (configure and rebuild the editor bundle).
+3. Copy the URL and share it or paste in another tab to enjoy real-time collaborative editing.
 
-## Quick start
+If you picked the non-real-time collaboration plugins:
 
-First, install the build from npm:
+2. Fill the prompt with the license key. If you do not have the license key yet [contact us](https://ckeditor.com/contact/).
 
-```bash
-npm install --save @ckeditor/ckeditor5-build-classic
-```
+## Configuring build
+
+Changes like changing toolbar items, changing order of icons or customizing plugin configurations should be relatively easy to make. Open the `sample/index.html` file and edit the script that initialized the CKEditor 5. Save the file and refresh the browser. That's all.
+
+*Note:* If you have any problems with browser caching use the `Ctrl + R` or `Cmd + R` shortcut depending on your system.
 
-And use it in your website:
-
-```html
-<div id="editor">
-	<p>This is the editor content.</p>
-</div>
-<script src="./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
-<script>
-	ClassicEditor
-		.create( document.querySelector( '#editor' ) )
-		.then( editor => {
-			window.editor = editor;
-		} )
-		.catch( error => {
-			console.error( 'There was a problem initializing the editor.', error );
-		} );
-</script>
+However if you want to remove or add a plugin to the build you need to follow the next step of this guide.
+
+Note that it is also possible to go back to the [Online builder tool](https://ckeditor.com/ckeditor-5/online-builder) and pick other set of plugins. But we encourage you to try the harder way and to learn the principles of Node.js and CKEditor 5 ecosystems that will allow you to do more cool things in the future!
+
+### Installation
+
+In order to rebuild the application you need to install all dependencies first. To do it, open the terminal in the project directory and type:
+
+```
+npm install
 ```
 
-Or in your JavaScript application:
+Make sure that you have the `node` and `npm` installed first. If not, then follow the instructions on the [Node.js documentation page](https://nodejs.org/en/).
 
-```js
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+### Adding or removing plugins
 
-// Or using the CommonJS version:
-// const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );
+Now you can install additional plugin in the build. Just follow the [Adding a plugin to an editor tutorial](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-an-editor)
 
-ClassicEditor
-	.create( document.querySelector( '#editor' ) )
-	.then( editor => {
-		window.editor = editor;
-	} )
-	.catch( error => {
-		console.error( 'There was a problem initializing the editor.', error );
-	} );
+### Rebuilding editor
+
+If you have already done the [Installation](#installation) and [Adding or removing plugins](#adding-or-removing-plugins) steps, you're ready to rebuild the editor by running the following command:
+
+```
+npm run build
 ```
 
-**Note:** If you are planning to integrate CKEditor 5 deep into your application, it is actually more convenient and recommended to install and import the source modules directly (like it happens in `ckeditor.js`). Read more in the [Advanced setup guide](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html).
+This will build the CKEditor 5 to the `build` directory. You can open your browser and you should be able to see the changes you've made in the code. If not, then try to refresh also the browser cache by typing `Ctrl + R` or `Cmd + R` depending on your system.
+
+## What's next?
+
+Follow the guides available on https://ckeditor.com/docs/ckeditor5/latest/framework/index.html and enjoy the document editing.
+
+## FAQ
+| Where is the place to report bugs and feature requests?
+
+You can create an issue on https://github.com/ckeditor/ckeditor5/issues including the build id - `yq0mma5n5ff3-1fnsktaogxbq`. Make sure that the question / problem is unique, please look for a possibly asked questions in the search box. Duplicates will be closed.
+
+| Where can I learn more about the CKEditor 5 framework?
+
+Here: https://ckeditor.com/docs/ckeditor5/latest/framework/
 
-## License
+| Is it possible to use online builder with common frameworks like React, Vue or Angular?
 
-Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).
+Not yet, but it these integrations will be available at some point in the future.

package.json

@@ -1,103 +1,44 @@
 {
-  "name": "@ckeditor/ckeditor5-build-classic",
-  "version": "18.0.0",
-  "description": "The classic editor build of CKEditor 5 – the best browser-based rich text editor.",
-  "keywords": [
-    "ckeditor5-build",
-    "ckeditor",
-    "ckeditor5",
-    "ckeditor 5",
-    "wysiwyg",
-    "rich text",
-    "editor",
-    "html",
-    "contentEditable",
-    "editing",
-    "operational transformation",
-    "ot",
-    "collaboration",
-    "collaborative",
-    "real-time",
-    "framework"
-  ],
-  "main": "./build/ckeditor.js",
-  "files": [
-    "build"
-  ],
+  "name": "ckeditor5-custom-build",
+  "author": "CKSource",
+  "description": "A custom CKEditor 5 build made by the CKEditor 5 online builder.",
+  "version": "0.0.1",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "private": true,
   "devDependencies": {
-    "@ckeditor/ckeditor5-adapter-ckfinder": "^18.0.0",
-    "@ckeditor/ckeditor5-autoformat": "^18.0.0",
-    "@ckeditor/ckeditor5-basic-styles": "^18.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^18.0.0",
-    "@ckeditor/ckeditor5-ckfinder": "^18.0.0",
-    "@ckeditor/ckeditor5-core": "^18.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^12.0.0",
-    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.0",
-    "@ckeditor/ckeditor5-easy-image": "^18.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^18.0.0",
-    "@ckeditor/ckeditor5-essentials": "^18.0.0",
-    "@ckeditor/ckeditor5-heading": "^18.0.0",
-    "@ckeditor/ckeditor5-image": "^18.0.0",
-    "@ckeditor/ckeditor5-indent": "^18.0.0",
-    "@ckeditor/ckeditor5-link": "^18.0.0",
-    "@ckeditor/ckeditor5-list": "^18.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^18.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^18.0.0",
-    "@ckeditor/ckeditor5-paste-from-office": "^18.0.0",
-    "@ckeditor/ckeditor5-table": "^18.0.0",
-    "@ckeditor/ckeditor5-typing": "^18.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^18.0.0",
-    "eslint": "^5.5.0",
-    "eslint-config-ckeditor5": "^2.0.0",
-    "husky": "^1.3.1",
-    "lint-staged": "^7.0.0",
-    "stylelint": "^11.1.1",
-    "stylelint-config-ckeditor5": "^1.0.0",
+    "@ckeditor/ckeditor5-adapter-ckfinder": "^21.0.0",
+    "@ckeditor/ckeditor5-alignment": "^21.0.0",
+    "@ckeditor/ckeditor5-autoformat": "^21.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^21.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^21.0.0",
+    "@ckeditor/ckeditor5-ckfinder": "^21.0.0",
+    "@ckeditor/ckeditor5-code-block": "^21.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^23.1.0",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^23.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^21.0.0",
+    "@ckeditor/ckeditor5-essentials": "^21.0.0",
+    "@ckeditor/ckeditor5-font": "^21.0.0",
+    "@ckeditor/ckeditor5-heading": "^21.0.0",
+    "@ckeditor/ckeditor5-highlight": "^21.0.0",
+    "@ckeditor/ckeditor5-image": "^21.0.0",
+    "@ckeditor/ckeditor5-indent": "^21.0.0",
+    "@ckeditor/ckeditor5-link": "^21.0.0",
+    "@ckeditor/ckeditor5-list": "^21.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^21.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^21.0.0",
+    "@ckeditor/ckeditor5-paste-from-office": "^21.0.0",
+    "@ckeditor/ckeditor5-special-characters": "^21.0.0",
+    "@ckeditor/ckeditor5-table": "^21.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^21.0.0",
+    "@ckeditor/ckeditor5-typing": "^21.0.0",
     "postcss-loader": "^3.0.0",
-    "raw-loader": "^3.1.0",
-    "style-loader": "^1.0.0",
-    "terser-webpack-plugin": "^2.2.1",
-    "webpack": "^4.39.1",
-    "webpack-cli": "^3.3.6"
-  },
-  "engines": {
-    "node": ">=8.0.0",
-    "npm": ">=5.7.1"
-  },
-  "author": "CKSource (http://cksource.com/)",
-  "license": "GPL-2.0-or-later",
-  "homepage": "https://ckeditor.com/ckeditor-5",
-  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ckeditor/ckeditor5-build-classic.git"
+    "raw-loader": "^4.0.1",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^3.1.0",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12"
   },
   "scripts": {
-    "build": "webpack --mode production",
-    "lint": "eslint --quiet '**/*.js'",
-    "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'",
-    "preversion": "npm run build; if [ -n \"$(git status src/ckeditor.js build/ --porcelain)\" ]; then git add -u src/ckeditor.js build/ && git commit -m 'Internal: Build.'; fi"
-  },
-  "lint-staged": {
-    "**/*.js": [
-      "eslint --quiet"
-    ],
-    "**/*.css": [
-      "stylelint --quiet --allow-empty-input"
-    ]
-  },
-  "eslintIgnore": [
-    "build/**",
-    "packages/**"
-  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "dependencies": {
-    "@ckeditor/ckeditor5-alignment": "^18.0.0",
-    "@ckeditor/ckeditor5-font": "^18.0.0",
-    "@ckeditor/ckeditor5-highlight": "^18.0.0"
+    "build": "webpack --mode production"
   }
-}
+}

sample/index.html

@@ -1,41 +1,176 @@
-<!DOCTYPE html>
-<html lang="en">
+<!DOCTYPE html><!--
+	Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
+	This file is licensed under the terms of the MIT License (see LICENSE.md).
+-->
+
+<html lang="en" dir="ltr"></html>
 <head>
-	<meta charset="utf-8">
-	<title>CKEditor 5 – classic editor build – development sample</title>
-	<style>
-		body {
-			max-width: 800px;
-			margin: 20px auto;
-		}
-	</style>
+	<title>CKEditor 5 ClassicEditor build</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="icon" type="image/png" href="https://c.cksource.com/a/1/logos/ckeditor5.png">
+	<link rel="stylesheet" type="text/css" href="styles.css">
 </head>
-<body>
-
-<h1>CKEditor 5 – classic editor build – development sample</h1>
-
-<div id="editor">
-	<h2>Sample</h2>
-
-	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a>.</p>
-
-	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
-	</figure>
-
-	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
-</div>
-
-<script src="../build/ckeditor.js"></script>
-<script>
-	ClassicEditor.create( document.querySelector( '#editor' ) )
-		.then( editor => {
-			window.editor = editor;
-		} )
-		.catch( error => {
-			console.error( 'There was a problem initializing the editor.', error );
-		} );
-</script>
-
-</body>
-</html>
+<body data-editor="ClassicEditor" data-collaboration="false">
+	<header>
+		<div class="centered">
+			<h1><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener noreferrer"><img src="https://c.cksource.com/a/1/logos/ckeditor5.svg" alt="CKEditor 5 logo">CKEditor 5</a></h1>
+			<nav>
+				<ul>
+					<li><a href="https://ckeditor.com/docs/ckeditor5/" target="_blank" rel="noopener noreferrer">Documentation</a></li>
+					<li><a href="https://ckeditor.com/" target="_blank" rel="noopener noreferrer">Website</a></li>
+				</ul>
+			</nav>
+		</div>
+	</header>
+	<main>
+		<div class="message">
+			<div class="centered">
+				<h2>CKEditor 5 online builder demo - ClassicEditor build</h2>
+			</div>
+		</div>
+		<div class="centered">
+			<div class="row row-editor">
+				<div class="editor">
+					<h2>Bilingual Personality Disorder</h2>
+					<figure class="image image-style-side"><img src="https://c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
+						<figcaption>One language, one person.</figcaption>
+					</figure>
+					<p>
+						This may be the first time you hear about this made-up disorder but
+						it actually isn’t so far from the truth. Even the studies that were conducted almost half a century show that
+						<strong>the language you speak has more effects on you than you realise</strong>.
+					</p>
+					<p>
+						One of the very first experiments conducted on this topic dates back to 1964.
+						<a href="https://www.researchgate.net/publication/9440038_Language_and_TAT_content_in_bilinguals">In the experiment</a>
+						designed by linguist Ervin-Tripp who is an authority expert in psycholinguistic and sociolinguistic studies,
+						adults who are bilingual in English in French were showed series of pictures and were asked to create 3-minute stories.
+						In the end participants emphasized drastically different dynamics for stories in English and French.
+					</p>
+					<p>
+						Another ground-breaking experiment which included bilingual Japanese women married to American men in San Francisco were
+						asked to complete sentences. The goal of the experiment was to investigate whether or not human feelings and thoughts
+						are expressed differently in <strong>different language mindsets</strong>.
+						<Here>is a sample from the the experiment:</Here>
+					</p>
+					<table>
+						<thead>
+							<tr>
+								<th></th>
+								<th>English</th>
+								<th>Japanese</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td>Real friends should</td>
+								<td>Be very frank</td>
+								<td>Help each other</td>
+							</tr>
+							<tr>
+								<td>I will probably become</td>
+								<td>A teacher</td>
+								<td>A housewife</td>
+							</tr>
+							<tr>
+								<td>When there is a conflict with family</td>
+								<td>I do what I want</td>
+								<td>It's a time of great unhappiness</td>
+							</tr>
+						</tbody>
+					</table>
+					<p>
+						More recent <a href="https://books.google.pl/books?id=1LMhWGHGkRUC">studies</a> show, the language a person speaks affects
+						their cognition, behaviour, emotions and hence <strong>their personality</strong>.
+						This shouldn’t come as a surprise
+						<a href="https://en.wikipedia.org/wiki/Lateralization_of_brain_function">since we already know</a> that different regions
+						of the brain become more active depending on the person’s activity at hand. Since structure, information and especially
+						<strong>the culture</strong> of languages varies substantially and the language a person speaks is an essential element of daily life.
+					</p>
+				</div>
+			</div></div>
+		</div>
+	</main>
+	<footer>
+		<p><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener">CKEditor 5</a>
+			– Rich text editor of tomorrow, available today
+		</p>
+		<p>Copyright © 2003-2020,
+			<a href="https://cksource.com/" target="_blank" rel="noopener">CKSource</a>
+			– Frederico Knabben. All rights reserved.
+		</p>
+	</footer>
+	<script src="../build/ckeditor.js"></script>
+	<script>ClassicEditor
+			.create( document.querySelector( '.editor' ), {
+				
+				toolbar: {
+					items: [
+						'heading',
+						'|',
+						'bold',
+						'italic',
+						'underline',
+						'fontBackgroundColor',
+						'fontColor',
+						'link',
+						'bulletedList',
+						'numberedList',
+						'blockQuote',
+						'|',
+						'alignment',
+						'highlight',
+						'fontFamily',
+						'fontSize',
+						'indent',
+						'outdent',
+						'|',
+						'imageUpload',
+						'CKFinder',
+						'code',
+						'codeBlock',
+						'insertTable',
+						'mediaEmbed',
+						'undo',
+						'redo',
+						'specialCharacters'
+					]
+				},
+				language: 'zh-cn',
+				image: {
+					toolbar: [
+						'imageTextAlternative',
+						'imageStyle:full',
+						'imageStyle:side'
+					]
+				},
+				table: {
+					contentToolbar: [
+						'tableColumn',
+						'tableRow',
+						'mergeTableCells'
+					]
+				},
+				licenseKey: '',
+				
+			} )
+			.then( editor => {
+				window.editor = editor;
+		
+				
+				
+				
+		
+				
+				
+				
+			} )
+			.catch( error => {
+				console.error( 'Oops, something went wrong!' );
+				console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
+				console.warn( 'Build id: yq0mma5n5ff3-1fnsktaogxbq' );
+				console.error( error );
+			} );
+	</script>
+</body>

sample/styles.css

@@ -0,0 +1,456 @@
+/**
+ * @license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
+ * This file is licensed under the terms of the MIT License (see LICENSE.md).
+ */
+
+ :root {
+	--ck-sample-base-spacing: 2em;
+	--ck-sample-color-white: #fff;
+	--ck-sample-color-green: #279863;
+	--ck-sample-color-blue: #1a9aef;
+	--ck-sample-container-width: 1285px;
+	--ck-sample-sidebar-width: 350px;
+	--ck-sample-editor-min-height: 400px;
+}
+
+/* --------- EDITOR STYLES  ---------------------------------------------------------------------------------------- */
+
+.editor__editable,
+/* Classic build. */
+main .ck-editor[role='application'] .ck.ck-content,
+/* Decoupled document build. */
+.ck.editor__editable[role='textbox'],
+.ck.ck-editor__editable[role='textbox'],
+/* Inline & Balloon build. */
+.ck.editor[role='textbox'] {
+	width: 100%;
+	background: #fff;
+	font-size: 1em;
+	line-height: 1.6em;
+	min-height: var(--ck-sample-editor-min-height);
+	padding: 1.5em 2em;
+}
+
+.ck.ck-editor__editable {
+	background: #fff;
+	border: 1px solid hsl(0, 0%, 70%);
+	width: 100%;
+}
+
+.ck.ck-editor {
+	/* To enable toolbar wrapping. */
+	width: 100%;
+	overflow-x: hidden;
+}
+
+/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
+.ck.ck-editor__editable {
+	position: relative;
+	z-index: 10;
+}
+
+/* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/
+body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar {
+	width: 100%;
+}
+
+body[ data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable,
+body[ data-editor='DecoupledDocumentEditor'] .row-editor .editor {
+	width: 18.5cm;
+	height: 100%;
+	min-height: 26.25cm;
+	padding: 1.75cm 1.5cm;
+	margin: 2.5rem;
+	border: 1px hsl( 0, 0%, 82.7% ) solid;
+	background-color: var(--ck-sample-color-white);
+	box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 );
+}
+
+body[ data-editor='DecoupledDocumentEditor'] .row-editor {
+	display: flex;
+	position: relative;
+	justify-content: center;
+	overflow-y: auto;
+	background-color: #f2f2f2;
+	border: 1px solid hsl(0, 0%, 77%);
+}
+
+body[data-editor='DecoupledDocumentEditor'] .sidebar {
+	background: transparent;
+	border: 0;
+	box-shadow: none;
+}
+
+/* --------- COMMENTS & TRACK CHANGES FEATURE ---------------------------------------------------------------------- */
+.sidebar {
+	padding: 0 15px;
+	position: relative;
+	min-width: var(--ck-sample-sidebar-width);
+	max-width: var(--ck-sample-sidebar-width);
+	font-size: 20px;
+	border: 1px solid hsl(0, 0%, 77%);
+	background: hsl(0, 0%, 98%);
+	border-left: 0;
+	overflow: hidden;
+	min-height: 100%;
+	flex-grow: 1;
+}
+
+/* Do not inherit styles related to the editable editor content. See line 25.*/
+.sidebar .ck-content[role='textbox'],
+.ck.ck-annotation-wrapper .ck-content[role='textbox'] {
+	min-height: unset;
+	width: unset;
+	padding: 0;
+	background: transparent;
+}
+
+.sidebar.narrow {
+	min-width: 60px;
+	flex-grow: 0;
+}
+
+.sidebar.hidden {
+	display: none !important;
+}
+
+#sidebar-display-toggle {
+	position: absolute;
+	z-index: 1;
+	width: 30px;
+	height: 30px;
+	text-align: center;
+	left: 15px;
+	top: 30px;
+	border: 0;
+	padding: 0;
+	color: hsl( 0, 0%, 50% );
+	transition: 250ms ease color;
+	background-color: transparent;
+}
+
+#sidebar-display-toggle:hover {
+	color: hsl( 0, 0%, 30% );
+	cursor: pointer;
+}
+
+#sidebar-display-toggle:focus,
+#sidebar-display-toggle:active {
+	outline: none;
+	border: 1px solid #a9d29d;
+}
+
+#sidebar-display-toggle svg {
+	fill: currentColor;
+}
+
+/* --------- COLLABORATION FEATURES (USERS) ------------------------------------------------------------------------ */
+.row-presence {
+	width: 100%;
+	border: 1px solid hsl(0, 0%, 77%);
+	border-bottom: 0;
+	background: hsl(0, 0%, 98%);
+	padding: var(--ck-spacing-small);
+
+	/* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */
+	box-shadow: 0 1px 0 0 hsl(0, 0%, 77%);
+
+	/* Make `z-index` bigger than `.editor` to properly display tooltips. */
+	z-index: 20;
+}
+
+.ck.ck-presence-list {
+    flex: 1;
+    padding: 1.25rem .75rem;
+}
+
+.presence .ck.ck-presence-list__counter {
+	order: 2;
+	margin-left: var(--ck-spacing-large)
+}
+
+/* --------- REAL TIME COLLABORATION FEATURES (SHARE TOPBAR CONTAINER) --------------------------------------------- */
+.collaboration-demo__row {
+	display: flex;
+	position: relative;
+	justify-content: center;
+	overflow-y: auto;
+	background-color: #f2f2f2;
+	border: 1px solid hsl(0, 0%, 77%);
+}
+
+body[ data-editor='InlineEditor'] .collaboration-demo__row {
+	border: 0;
+}
+
+.collaboration-demo__container {
+	max-width: var(--ck-sample-container-width);
+	margin: 0 auto;
+	padding: 1.25rem;
+}
+
+.presence, .collaboration-demo__row {
+	transition: .2s opacity;
+}
+
+.collaboration-demo__topbar {
+	background: #fff;
+	border: 1px solid var(--ck-color-toolbar-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 0;
+    border-radius: 4px 4px 0 0;
+}
+
+.collaboration-demo__topbar .btn {
+	margin-right: 1em;
+	outline-offset: 2px;
+	outline-width: 2px;
+	background-color: var( --ck-sample-color-blue );
+}
+
+.collaboration-demo__topbar .btn:focus,
+.collaboration-demo__topbar .btn:hover {
+	border-color: var( --ck-sample-color-blue );
+}
+
+.collaboration-demo__share {
+	display: flex;
+	align-items: center;
+	padding: 1.25rem .75rem
+}
+
+.collaboration-demo__share-description p {
+	margin: 0;
+	font-weight: bold;
+	font-size: 0.9em;
+}
+
+.collaboration-demo__share input {
+	height: auto;
+	font-size: 0.9em;
+	min-width: 220px;
+	margin: 0 10px;
+	border-radius: 4px;
+	border: 1px solid var(--ck-color-toolbar-border)
+}
+
+.collaboration-demo__share button,
+.collaboration-demo__share input {
+	height: 40px;
+	padding: 5px 10px;
+}
+
+.collaboration-demo__share button {
+	position: relative;
+}
+
+.collaboration-demo__share button:focus {
+	outline: none;
+}
+
+.collaboration-demo__share button[data-tooltip]::before,
+.collaboration-demo__share button[data-tooltip]::after {
+	position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition: all .15s cubic-bezier(.5,1,.25,1);
+	z-index: 1;
+}
+
+.collaboration-demo__share button[data-tooltip]::before {
+	content: attr(data-tooltip);
+    padding: 5px 15px;
+    border-radius: 3px;
+    background: #111;
+    color: #fff;
+    text-align: center;
+    font-size: 11px;
+	top: 100%;
+    left: 50%;
+    margin-top: 5px;
+    transform: translateX(-50%);
+}
+
+.collaboration-demo__share button[data-tooltip]::after {
+    content: '';
+	border: 5px solid transparent;
+    width: 0;
+    font-size: 0;
+    line-height: 0;
+	top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom: 5px solid #111;
+	border-top: none;
+}
+
+.collaboration-demo__share button[data-tooltip]:hover:before,
+.collaboration-demo__share button[data-tooltip]:hover:after {
+	visibility: visible;
+    opacity: 1;
+}
+
+.collaboration-demo--ready {
+	overflow: visible;
+	height: auto;
+}
+
+.collaboration-demo--ready .presence,
+.collaboration-demo--ready .collaboration-demo__row {
+	opacity: 1;
+}
+
+/* --------- SAMPLE GENERIC STYLES (not related to CKEditor) ------------------------------------------------------- */
+body, html {
+	padding: 0;
+	margin: 0;
+
+	font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	font-size: 16px;
+	line-height: 1.5;
+}
+
+body {
+	height: 100%;
+	color: #2D3A4A;
+}
+
+body * {
+	box-sizing: border-box;
+}
+
+a {
+	color: #38A5EE;
+}
+
+header .centered {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	align-items: center;
+	min-height: 8em;
+}
+
+header h1 a {
+	font-size: 20px;
+	display: flex;
+	align-items: center;
+	color: #2D3A4A;
+	text-decoration: none;
+}
+
+header h1 img {
+	display: block;
+	height: 64px;
+}
+
+header nav ul {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+header nav ul li {
+	display: inline-block;
+}
+
+header nav ul li + li {
+	margin-left: 1em;
+}
+
+header nav ul li a {
+	font-weight: bold;
+	text-decoration: none;
+	color: #2D3A4A;
+}
+
+header nav ul li a:hover {
+	text-decoration: underline;
+}
+
+main .message {
+	padding: 0 0 var(--ck-sample-base-spacing);
+	background: var(--ck-sample-color-green);
+	color: var(--ck-sample-color-white);
+}
+
+main .message::after {
+	content: "";
+	z-index: -1;
+	display: block;
+	height: 10em;
+	width: 100%;
+	background: var(--ck-sample-color-green);
+	position: absolute;
+	left: 0;
+}
+
+main .message h2 {
+	position: relative;
+	padding-top: 1em;
+	font-size: 2em;
+}
+
+.centered {
+	/* Hide overlapping comments. */
+	overflow: hidden;
+	max-width: var(--ck-sample-container-width);
+	margin: 0 auto;
+	padding: 0 var(--ck-sample-base-spacing);
+}
+
+.row {
+	display: flex;
+	position: relative;
+}
+
+.btn {
+	cursor: pointer;
+	padding: 8px 16px;
+	font-size: 1rem;
+	user-select: none;
+	border-radius: 4px;
+	transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,opacity .2s ease-in-out;
+	background-color: var(--ck-sample-color-button-blue);
+	border-color: var(--ck-sample-color-button-blue);
+	color: var(--ck-sample-color-white);
+	display: inline-block;
+}
+
+.btn--tiny {
+	padding: 6px 12px;
+	font-size: .8rem;
+}
+
+footer {
+	margin: calc(2*var(--ck-sample-base-spacing)) var(--ck-sample-base-spacing);
+	font-size: .8em;
+	text-align: center;
+	color: rgba(0,0,0,.4);
+}
+
+/* --------- RWD --------------------------------------------------------------------------------------------------- */
+@media screen and ( max-width: 800px ) {
+	:root {
+		--ck-sample-base-spacing: 1em;
+	}
+
+	header h1 {
+		width: 100%;
+	}
+
+	header h1 img {
+		height: 40px;
+	}
+
+	header nav ul {
+		text-align: right;
+	}
+
+	main .message h2 {
+		font-size: 1.5em;
+	}
+}

src/ckeditor.js

@@ -1,79 +1,90 @@
 /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
-// The editor creator to use.
-import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-
-import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
-import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
-import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
-import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
-import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
-import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
-import Heading from '@ckeditor/ckeditor5-heading/src/heading';
-import Image from '@ckeditor/ckeditor5-image/src/image';
-import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
-import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
-import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
-import ImageResize from '@ckeditor/ckeditor5-image/src/imageResize';
-import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
-import Indent from '@ckeditor/ckeditor5-indent/src/indent';
-import Link from '@ckeditor/ckeditor5-link/src/link';
-import List from '@ckeditor/ckeditor5-list/src/list';
-import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
+import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
+import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
+import Autolink from '@ckeditor/ckeditor5-link/src/autolink.js';
+import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
+import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
+import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code.js';
+import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock.js';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
+import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
+import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
+import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
+import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
+import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight.js';
+import Image from '@ckeditor/ckeditor5-image/src/image.js';
+import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
+import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
+import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
+import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
+import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock.js';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
+import Link from '@ckeditor/ckeditor5-link/src/link.js';
+import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage.js';
+import List from '@ckeditor/ckeditor5-list/src/list.js';
+import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
+import MediaEmbedToolbar from '@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
 import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
-import Table from '@ckeditor/ckeditor5-table/src/table';
-import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
-import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
-import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
-import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
-import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily'
-import FontSize from '@ckeditor/ckeditor5-font/src/fontSize'
-import FontColor from '@ckeditor/ckeditor5-font/src/fontColor'
-import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontBackgroundColor'
-
+import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters.js';
+import Table from '@ckeditor/ckeditor5-table/src/table.js';
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
+import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
+import Title from '@ckeditor/ckeditor5-heading/src/title.js';
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js';
 
-export default class ClassicEditor extends ClassicEditorBase {}
+class Editor extends ClassicEditor {}
 
 // Plugins to include in the build.
-ClassicEditor.builtinPlugins = [
-	Alignment,
-	Highlight,
-	FontFamily,
-	FontSize,
-	FontColor,
-	FontBackgroundColor,
-	Essentials,
-	UploadAdapter,
-	Autoformat,
+Editor.builtinPlugins = [
+	Heading,
 	Bold,
 	Italic,
+	Underline,
+	FontColor,
+	FontBackgroundColor,
+	FontFamily,
+	FontSize,
+	Highlight,
 	BlockQuote,
-	CKFinder,
-	EasyImage,
-	Heading,
+	Code,
+	CodeBlock,
+	Link,
+	LinkImage,
+	Autolink,
+	Alignment,
+	List,
+	Indent,
+	IndentBlock,
+	Autoformat,
+	Essentials,
 	Image,
-	ImageCaption,
+	/*ImageCaption,*/
+	ImageResize,
 	ImageStyle,
 	ImageToolbar,
-	ImageResize,
 	ImageUpload,
-	Indent,
-	Link,
-	List,
+	CKFinder,
+	CKFinderUploadAdapter,
 	MediaEmbed,
+	MediaEmbedToolbar,
 	Paragraph,
 	PasteFromOffice,
+	SpecialCharacters,
 	Table,
 	TableToolbar,
-	TextTransformation
-];
+	TextTransformation,
 
+];
 // Editor configuration.
 ClassicEditor.defaultConfig = {
 	toolbar: {
@@ -89,17 +100,19 @@ ClassicEditor.defaultConfig = {
 			'|',
 			'bold',
 			'italic',
-			'link',
-			'bulletedList',
-			'numberedList',
-			'|',
 			'indent',
 			'outdent',
+			'LinkImage',
+			'bulletedList',
+			'numberedList',
+			'blockQuote',
+			'code',
+			'codeBlock',
 			'|',
 			'imageUpload',
-			'blockQuote',
 			'insertTable',
 			'mediaEmbed',
+			'insertTable',
 			'undo',
 			'redo'
 		]
@@ -122,3 +135,5 @@ ClassicEditor.defaultConfig = {
 	// This value must be kept in sync with the language defined in webpack.config.js.
 	language: 'zh-cn'
 };
+
+export default Editor;

webpack.config.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -11,7 +11,7 @@ const path = require( 'path' );
 const webpack = require( 'webpack' );
 const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
-const TerserPlugin = require( 'terser-webpack-plugin' );
+const TerserWebpackPlugin = require( 'terser-webpack-plugin' );
 
 module.exports = {
 	devtool: 'source-map',
@@ -31,7 +31,7 @@ module.exports = {
 
 	optimization: {
 		minimizer: [
-			new TerserPlugin( {
+			new TerserWebpackPlugin( {
 				sourceMap: true,
 				terserOptions: {
 					output: {
@@ -69,7 +69,10 @@ module.exports = {
 					{
 						loader: 'style-loader',
 						options: {
-							injectType: 'singletonStyleTag'
+							injectType: 'singletonStyleTag',
+							attributes: {
+								'data-cke': true
+							}
 						}
 					},
 					{
@@ -80,7 +83,7 @@ module.exports = {
 							},
 							minify: true
 						} )
-					}
+					},
 				]
 			}
 		]