瀏覽代碼

Feature: Introduced the editor with a balloon toolbar build.

Piotrek Koszuliński 8 年之前
當前提交
04fd4d53f8
共有 25 個文件被更改,包括 707 次插入0 次删除
  1. 12 0
      packages/ckeditor5-build-balloon/.editorconfig
  2. 18 0
      packages/ckeditor5-build-balloon/.gitattributes
  3. 9 0
      packages/ckeditor5-build-balloon/.github/PULL_REQUEST_TEMPLATE.md
  4. 5 0
      packages/ckeditor5-build-balloon/.gitignore
  5. 2 0
      packages/ckeditor5-build-balloon/.npmignore
  6. 4 0
      packages/ckeditor5-build-balloon/CONTRIBUTING.md
  7. 23 0
      packages/ckeditor5-build-balloon/LICENSE.md
  8. 69 0
      packages/ckeditor5-build-balloon/README.md
  9. 9 0
      packages/ckeditor5-build-balloon/bin/build-ckeditor.sh
  10. 17 0
      packages/ckeditor5-build-balloon/bin/create-entry-file.js
  11. 54 0
      packages/ckeditor5-build-balloon/build-config.js
  12. 6 0
      packages/ckeditor5-build-balloon/build/ckeditor.js
  13. 1 0
      packages/ckeditor5-build-balloon/build/ckeditor.js.map
  14. 60 0
      packages/ckeditor5-build-balloon/ckeditor.js
  15. 52 0
      packages/ckeditor5-build-balloon/package.json
  16. 57 0
      packages/ckeditor5-build-balloon/sample/index.html
  17. 147 0
      packages/ckeditor5-build-balloon/tests/ckeditor.js
  18. 27 0
      packages/ckeditor5-build-balloon/tests/manual/ckeditor-cjs-version.html
  19. 14 0
      packages/ckeditor5-build-balloon/tests/manual/ckeditor-cjs-version.js
  20. 9 0
      packages/ckeditor5-build-balloon/tests/manual/ckeditor-cjs-version.md
  21. 27 0
      packages/ckeditor5-build-balloon/tests/manual/ckeditor.html
  22. 14 0
      packages/ckeditor5-build-balloon/tests/manual/ckeditor.js
  23. 9 0
      packages/ckeditor5-build-balloon/tests/manual/ckeditor.md
  24. 二進制
      packages/ckeditor5-build-balloon/tests/manual/sample.jpg
  25. 62 0
      packages/ckeditor5-build-balloon/webpack.config.js

+ 12 - 0
packages/ckeditor5-build-balloon/.editorconfig

@@ -0,0 +1,12 @@
+# Configurations to normalize the IDE behavior.
+# http://editorconfig.org/
+
+root = true
+
+[*]
+indent_style = tab
+tab_width = 4
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true

+ 18 - 0
packages/ckeditor5-build-balloon/.gitattributes

@@ -0,0 +1,18 @@
+*			text=auto
+
+*.htaccess	eol=lf
+*.cgi		eol=lf
+*.sh		eol=lf
+
+*.css		text
+*.htm		text
+*.html		text
+*.js		text
+*.json		text
+*.php		text
+*.txt		text
+*.md		text
+
+*.png		-text
+*.gif		-text
+*.jpg		-text

+ 9 - 0
packages/ckeditor5-build-balloon/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,9 @@
+### Suggested merge commit message ([convention](https://github.com/ckeditor/ckeditor5-design/wiki/Git-commit-message-convention))
+
+Type: Message. Closes #000.
+
+---
+
+### Additional information
+
+*For example – encountered issues, assumptions you had to make, other affected tickets, etc.*

+ 5 - 0
packages/ckeditor5-build-balloon/.gitignore

@@ -0,0 +1,5 @@
+# These files will be ignored by Git and by our linting tools:
+#	gulp lint
+#	gulp lint-staged
+
+node_modules/

+ 2 - 0
packages/ckeditor5-build-balloon/.npmignore

@@ -0,0 +1,2 @@
+tests/**
+sample/**

+ 4 - 0
packages/ckeditor5-build-balloon/CONTRIBUTING.md

@@ -0,0 +1,4 @@
+Contributing
+========================================
+
+Information about contributing can be found on the following page: <https://github.com/ckeditor/ckeditor5/blob/master/CONTRIBUTING.md>.

+ 23 - 0
packages/ckeditor5-build-balloon/LICENSE.md

@@ -0,0 +1,23 @@
+Software License Agreement
+==========================
+
+**CKEditor 5 editor with a balloon toolbar build** – https://github.com/ckeditor/ckeditor5-build-balloon-toolbar <br>
+Copyright (c) 2003-2017, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+
+Licensed under the terms of any of the following licenses at your choice:
+
+* [GNU General Public License Version 2 or later (the "GPL")](http://www.gnu.org/licenses/gpl.html)
+* [GNU Lesser General Public License Version 2.1 or later (the "LGPL")](http://www.gnu.org/licenses/lgpl.html)
+* [Mozilla Public License Version 1.1 or later (the "MPL")](http://www.mozilla.org/MPL/MPL-1.1.html)
+
+You are not required to, but if you want to explicitly declare the license you have chosen to be bound to when using, reproducing, modifying and distributing this software, just include a text file titled "legal.txt" in your version of this software, indicating your license choice. In any case, your choice will not restrict any recipient of your version of this software to use, reproduce, modify and distribute this software under any of the above licenses.
+
+Sources of Intellectual Property Included in CKEditor
+-----------------------------------------------------
+
+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.
+
+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.

+ 69 - 0
packages/ckeditor5-build-balloon/README.md

@@ -0,0 +1,69 @@
+CKEditor 5 editor with a balloon toolbar build
+==============================================
+
+[![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-build-balloon-toolbar.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-balloon-toolbar)
+[![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-build-balloon-toolbar/status.svg)](https://david-dm.org/ckeditor/ckeditor5-build-balloon-toolbar)
+[![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-build-balloon-toolbar/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-build-balloon-toolbar?type=dev)
+
+The editor with a balloon toolbar build. Read more in the [classic editor](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/overview.html#Classic-editor) and see the [demo](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/examples/builds/classic-editor.html).
+
+## Documentation
+
+See:
+
+* [Installation](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/installation.html) for how to install this package and what it contains.
+* [Basic API](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/basic-api.html) for how to create an editor and interact with it.
+* [Configuration](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/configuration.html) for how to configure the editor.
+* [Creating custom builds](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/development/custom-builds.html) for how to customize the build (configure and rebuild the editor bundle).
+
+## Quick start
+
+First, install the build from npm:
+
+```
+npm install --save @ckeditor/ckeditor5-build-balloon-toolbar
+```
+
+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-balloon-toolbar/build/ckeditor.js"></script>
+<script>
+	BalloonToolbarEditor
+		.create( document.querySelector( '#editor' ) )
+		.then( editor => {
+			window.editor = editor;
+		} )
+		.catch( err => {
+			console.error( err.stack );
+		} );
+</script>
+```
+
+Or in your JavaScript application:
+
+```js
+import { BalloonToolbarEditor } from '@ckeditor/ckeditor5-build-balloon-toolbar/build/ckeditor';
+
+// Or using CommonJS verion:
+// const BalloonToolbarEditor = require( '@ckeditor/ckeditor5-build-balloon-toolbar/build/ckeditor' ).BalloonToolbarEditor;
+
+BalloonToolbarEditor
+	.create( document.querySelector( '#editor' ) )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+```
+
+**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 [Bundling guide](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/bundling.html).
+
+## License
+
+Licensed under the GPL, LGPL and MPL licenses, at your choice. For full details about the license, please check the `LICENSE.md` file.

+ 9 - 0
packages/ckeditor5-build-balloon/bin/build-ckeditor.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+echo "Building 'build/ckeditor.js'..."
+echo ""
+
+webpack
+
+echo ""
+echo "Done."

+ 17 - 0
packages/ckeditor5-build-balloon/bin/create-entry-file.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
+const buildConfig = require( '../build-config' );
+
+console.log( 'Creating the entry file...' );
+
+bundler.createEntryFile( 'ckeditor.js', buildConfig );
+
+console.log( 'Done.' );

+ 54 - 0
packages/ckeditor5-build-balloon/build-config.js

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+module.exports = {
+	// The editor creator to use.
+	editor: '@ckeditor/ckeditor5-editor-balloon-toolbar/src/balloontoolbareditor',
+
+	// The name under which the editor will be exported.
+	moduleName: 'BalloonToolbarEditor',
+
+	// Plugins to include in the build.
+	plugins: [
+		'@ckeditor/ckeditor5-presets/src/essentials',
+
+		'@ckeditor/ckeditor5-autoformat/src/autoformat',
+		'@ckeditor/ckeditor5-basic-styles/src/bold',
+		'@ckeditor/ckeditor5-basic-styles/src/italic',
+		'@ckeditor/ckeditor5-block-quote/src/blockquote',
+		'@ckeditor/ckeditor5-heading/src/heading',
+		'@ckeditor/ckeditor5-image/src/image',
+		'@ckeditor/ckeditor5-image/src/imagecaption',
+		'@ckeditor/ckeditor5-image/src/imagestyle',
+		'@ckeditor/ckeditor5-image/src/imagetoolbar',
+		'@ckeditor/ckeditor5-link/src/link',
+		'@ckeditor/ckeditor5-list/src/list',
+		'@ckeditor/ckeditor5-paragraph/src/paragraph',
+	],
+
+	// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+	language: 'en',
+
+	// Editor config.
+	config: {
+		toolbar: [
+			'headings',
+			'bold',
+			'italic',
+			'link',
+			'bulletedList',
+			'numberedList',
+			'blockQuote',
+			'undo',
+			'redo'
+		],
+
+		image: {
+			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+		}
+	}
+};

文件差異過大導致無法顯示
+ 6 - 0
packages/ckeditor5-build-balloon/build/ckeditor.js


文件差異過大導致無法顯示
+ 1 - 0
packages/ckeditor5-build-balloon/build/ckeditor.js.map


+ 60 - 0
packages/ckeditor5-build-balloon/ckeditor.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import BalloonToolbarEditorBase from '@ckeditor/ckeditor5-editor-balloon-toolbar/src/balloontoolbareditor';
+import EssentialsPlugin from '@ckeditor/ckeditor5-presets/src/essentials';
+import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
+import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import BlockquotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
+import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
+import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
+import ImagecaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
+import ImagestylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
+import ImagetoolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
+import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
+import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
+import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+
+export class BalloonToolbarEditor extends BalloonToolbarEditorBase {}
+
+BalloonToolbarEditor.build = {
+	plugins: [
+		EssentialsPlugin,
+		AutoformatPlugin,
+		BoldPlugin,
+		ItalicPlugin,
+		BlockquotePlugin,
+		HeadingPlugin,
+		ImagePlugin,
+		ImagecaptionPlugin,
+		ImagestylePlugin,
+		ImagetoolbarPlugin,
+		LinkPlugin,
+		ListPlugin,
+		ParagraphPlugin
+	],
+	config: {
+		toolbar: [
+			'headings',
+			'bold',
+			'italic',
+			'link',
+			'bulletedList',
+			'numberedList',
+			'blockQuote',
+			'undo',
+			'redo'
+		],
+		image: {
+			toolbar: [
+				'imageStyleFull',
+				'imageStyleSide',
+				'|',
+				'imageTextAlternative'
+			]
+		}
+	}
+};

+ 52 - 0
packages/ckeditor5-build-balloon/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@ckeditor/ckeditor5-build-balloon-toolbar",
+  "version": "0.0.1",
+  "description": "CKEditor 5 editor with a balloon toolbar build.",
+  "keywords": [
+    "ckeditor5-build",
+    "text editor",
+    "WYSIWYG",
+    "rich-text editor"
+  ],
+  "main": "./build/ckeditor.js",
+  "dependencies": {
+    "@ckeditor/ckeditor5-editor-balloon-toolbar": "*",
+    "@ckeditor/ckeditor5-presets": "^0.2.2",
+    "@ckeditor/ckeditor5-autoformat": "^0.5.1",
+    "@ckeditor/ckeditor5-basic-styles": "^0.8.1",
+    "@ckeditor/ckeditor5-block-quote": "^0.1.1",
+    "@ckeditor/ckeditor5-heading": "^0.9.1",
+    "@ckeditor/ckeditor5-image": "^0.6.0",
+    "@ckeditor/ckeditor5-link": "^0.7.0",
+    "@ckeditor/ckeditor5-list": "^0.6.1",
+    "@ckeditor/ckeditor5-paragraph": "^0.8.0"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-dev-utils": "^3.0.0",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^2.0.11",
+    "babel-minify-webpack-plugin": "^0.2.0",
+    "css-loader": "^0.28.5",
+    "node-sass": "^4.5.3",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.5.5"
+  },
+  "engines": {
+    "node": ">=6.0.0",
+    "npm": ">=3.0.0"
+  },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "(GPL-2.0 OR LGPL-2.1 OR MPL-1.1)",
+  "homepage": "https://ckeditor5.github.io",
+  "bugs": "https://github.com/ckeditor/ckeditor5-build-balloon-toolbar/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5-build-balloon-toolbar.git"
+  },
+  "scripts": {
+    "build": "npm run create-entry-file && npm run build-ckeditor",
+    "create-entry-file": "./bin/create-entry-file.js",
+    "build-ckeditor": "./bin/build-ckeditor.sh"
+  }
+}

+ 57 - 0
packages/ckeditor5-build-balloon/sample/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>CKEditor 5 – editor with a balloon toolbar build sample</title>
+	<style>
+		body {
+			max-width: 800px;
+			margin: 20px auto;
+		}
+	</style>
+</head>
+<body>
+
+<h1>CKEditor 5 – editor with a balloon toolbar build sample</h1>
+
+<div id="editor">
+	<h2>About CKEditor&nbsp;5</h2>
+
+	<p>This is <a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a>.</p>
+
+	<figure class="image">
+		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+	</figure>
+
+	<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets, we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
+
+	<p>We explained this design choice in <a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5: The future of rich text editing&ldquo;</a>:</p>
+
+	<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be developing several out-of-the-box solutions based on it, which will be available to use in many different contexts. It will be a real “one size fits all” approach, from little requirements, to super advanced full featured applications.</p></blockquote>
+
+	<h3>Notes</h3>
+
+	<p><a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a> is <em>under heavy development</em> and this demo is not production-ready software. For example:</p>
+
+	<ul>
+		<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
+		<li>Firefox requires enabling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
+		<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a> is under development (content filtering is unstable).</li>
+	</ul>
+
+	<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few iterations of the project. Stay tuned for some updates soon!</p>
+</div>
+
+<script src="../build/ckeditor.js"></script>
+<script>
+	BalloonToolbarEditor.create( document.querySelector( '#editor' ) )
+		.then( editor => {
+			window.editor = editor;
+		} )
+		.catch( err => {
+			console.error( err.stack );
+		} );
+</script>
+
+</body>
+</html>

+ 147 - 0
packages/ckeditor5-build-balloon/tests/ckeditor.js

@@ -0,0 +1,147 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document */
+
+import { BalloonToolbarEditor } from '../ckeditor';
+import BaseBalloonToolbarEditor from '@ckeditor/ckeditor5-editor-balloon-toolbar/src/balloontoolbareditor';
+
+describe( 'BalloonToolbarEditor', () => {
+	let editor, editorElement;
+
+	beforeEach( () => {
+		editorElement = document.createElement( 'div' );
+		editorElement.innerHTML = '<p><strong>foo</strong> bar</p>';
+
+		document.body.appendChild( editorElement );
+	} );
+
+	afterEach( () => {
+		editorElement.remove();
+	} );
+
+	describe( 'buid', () => {
+		it( 'contains plugins', () => {
+			expect( BalloonToolbarEditor.build.plugins ).to.not.be.empty;
+		} );
+
+		it( 'contains config', () => {
+			expect( BalloonToolbarEditor.build.config.toolbar ).to.not.be.empty;
+		} );
+	} );
+
+	describe( 'create()', () => {
+		beforeEach( () => {
+			return BalloonToolbarEditor.create( editorElement )
+				.then( newEditor => {
+					editor = newEditor;
+				} );
+		} );
+
+		afterEach( () => {
+			return editor.destroy();
+		} );
+
+		it( 'creates an instance which inherits from the BalloonToolbarEditor', () => {
+			expect( editor ).to.be.instanceof( BalloonToolbarEditor );
+			expect( editor ).to.be.instanceof( BaseBalloonToolbarEditor );
+		} );
+
+		it( 'loads data from the editor element', () => {
+			expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
+		} );
+	} );
+
+	describe( 'destroy()', () => {
+		beforeEach( () => {
+			return BalloonToolbarEditor.create( editorElement )
+				.then( newEditor => {
+					editor = newEditor;
+				} );
+		} );
+
+		it( 'sets the data back to the editor element', () => {
+			editor.setData( '<p>foo</p>' );
+
+			return editor.destroy()
+				.then( () => {
+					expect( editorElement.innerHTML ).to.equal( '<p>foo</p>' );
+				} );
+		} );
+	} );
+
+	describe( 'plugins', () => {
+		it( 'paragraph works', () => {
+			const data = '<p>Some text inside a paragraph.</p>';
+
+			editor.setData( data );
+			expect( editor.getData() ).to.equal( data );
+		} );
+
+		it( 'basic-styles work', () => {
+			const data = [
+				'<p>',
+				'<strong>Test:strong</strong>',
+				'<i>Test:i</i>',
+				'</p>'
+			].join( '' );
+
+			editor.setData( data );
+			expect( editor.getData() ).to.equal( data );
+		} );
+
+		it( 'block-quote works', () => {
+			const data = '<blockquote><p>Quote</p></blockquote>';
+
+			editor.setData( data );
+			expect( editor.getData() ).to.equal( data );
+		} );
+
+		it( 'heading works', () => {
+			const data = [
+				'<h2>Heading 1.</h2>',
+				'<h3>Heading 1.1</h3>',
+				'<h4>Heading 1.1.1</h4>',
+				'<h4>Heading 1.1.2</h4>',
+				'<h3>Heading 1.2</h3>',
+				'<h4>Heading 1.2.1</h4>',
+				'<h2>Heading 2</h2>'
+			].join( '' );
+
+			editor.setData( data );
+			expect( editor.getData() ).to.equal( data );
+		} );
+
+		it( 'image works', () => {
+			const data = '<figure class="image"><img src="./manual/sample.jpg"></figure>';
+
+			editor.setData( data );
+			expect( editor.getData() ).to.equal( data );
+		} );
+
+		it( 'list works', () => {
+			const data = [
+				'<ul>',
+				'<li>Item 1.</li>',
+				'<li>Item 2.</li>',
+				'</ul>',
+				'<ol>',
+				'<li>Item 1.</li>',
+				'<li>Item 2.</li>',
+				'</ol>'
+			].join( '' );
+
+			editor.setData( data );
+			expect( editor.getData() ).to.equal( data );
+		} );
+
+		it( 'link works', () => {
+			const data = '<p><a href="//ckeditor.com">CKEditor.com</a></p>';
+
+			editor.setData( data );
+			expect( editor.getData() ).to.equal( data );
+		} );
+	} );
+} );

+ 27 - 0
packages/ckeditor5-build-balloon/tests/manual/ckeditor-cjs-version.html

@@ -0,0 +1,27 @@
+<div id="editor">
+	<h2>About CKEditor&nbsp;5</h2>
+
+	<p>This is <a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a>.</p>
+
+	<figure class="image">
+		<img src="./sample.jpg" alt="Autumn fields" />
+	</figure>
+
+	<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets, we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
+
+	<p>We explained this design choice in <a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5: The future of rich text editing&ldquo;</a>:</p>
+
+	<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be developing several out-of-the-box solutions based on it, which will be available to use in many different contexts. It will be a real “one size fits all” approach, from little requirements, to super advanced full featured applications.</p></blockquote>
+
+	<h3>Notes</h3>
+
+	<p><a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo is not production-ready software. For example:</p>
+
+	<ul>
+		<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
+		<li>Firefox requires enabling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
+		<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a> is under development (content filtering is unstable).</li>
+	</ul>
+
+	<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few iterations of the project. Stay tuned for some updates soon!</p>
+</div>

+ 14 - 0
packages/ckeditor5-build-balloon/tests/manual/ckeditor-cjs-version.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+const BalloonToolbarEditor = require( '../../build/ckeditor' ).BalloonToolbarEditor;
+
+BalloonToolbarEditor.create( document.querySelector( '#editor' ) )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 9 - 0
packages/ckeditor5-build-balloon/tests/manual/ckeditor-cjs-version.md

@@ -0,0 +1,9 @@
+# CKEditor 5 editor with a balloon toolbar build – standard version (CommonJS `require()`)
+
+Just play with it.
+
+**Note:** Remember to rebuild the bundles (`npm run build`). You can also run Webpack in the watch mode:
+
+```
+./node_modules/.bin/webpack -w
+```

+ 27 - 0
packages/ckeditor5-build-balloon/tests/manual/ckeditor.html

@@ -0,0 +1,27 @@
+<div id="editor">
+	<h2>About CKEditor&nbsp;5</h2>
+
+	<p>This is <a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a>.</p>
+
+	<figure class="image">
+		<img src="./sample.jpg" alt="Autumn fields" />
+	</figure>
+
+	<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets, we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
+
+	<p>We explained this design choice in <a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5: The future of rich text editing&ldquo;</a>:</p>
+
+	<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be developing several out-of-the-box solutions based on it, which will be available to use in many different contexts. It will be a real “one size fits all” approach, from little requirements, to super advanced full featured applications.</p></blockquote>
+
+	<h3>Notes</h3>
+
+	<p><a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo is not production-ready software. For example:</p>
+
+	<ul>
+		<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
+		<li>Firefox requires enabling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
+		<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a> is under development (content filtering is unstable).</li>
+	</ul>
+
+	<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few iterations of the project. Stay tuned for some updates soon!</p>
+</div>

+ 14 - 0
packages/ckeditor5-build-balloon/tests/manual/ckeditor.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { BalloonToolbarEditor } from '../../build/ckeditor';
+
+BalloonToolbarEditor.create( document.querySelector( '#editor' ) )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 9 - 0
packages/ckeditor5-build-balloon/tests/manual/ckeditor.md

@@ -0,0 +1,9 @@
+# CKEditor 5 editor with a balloon toolbar build – standard version
+
+Just play with it.
+
+**Note:** Remember to rebuild the bundles (`npm run build`). You can also run Webpack in the watch mode:
+
+```
+./node_modules/.bin/webpack -w
+```

二進制
packages/ckeditor5-build-balloon/tests/manual/sample.jpg


+ 62 - 0
packages/ckeditor5-build-balloon/webpack.config.js

@@ -0,0 +1,62 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+/* eslint-env node */
+
+const path = require( 'path' );
+const webpack = require( 'webpack' );
+const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
+const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
+const BabiliPlugin = require( 'babel-minify-webpack-plugin' );
+const buildConfig = require( './build-config' );
+
+module.exports = {
+	devtool: 'source-map',
+
+	entry: path.resolve( __dirname, 'ckeditor.js' ),
+
+	output: {
+		path: path.resolve( __dirname, 'build' ),
+		filename: 'ckeditor.js',
+		libraryTarget: 'umd'
+	},
+
+	plugins: [
+		new CKEditorWebpackPlugin( {
+			languages: [ buildConfig.language ]
+		} ),
+		new BabiliPlugin( null, {
+			comments: false
+		} ),
+		new webpack.BannerPlugin( {
+			banner: bundler.getLicenseBanner(),
+			raw: true
+		} )
+	],
+
+	module: {
+		rules: [
+			{
+				test: /\.svg$/,
+				use: [ 'raw-loader' ]
+			},
+			{
+				test: /\.scss$/,
+				use: [
+					'style-loader',
+					{
+						loader: 'css-loader',
+						options: {
+							minimize: true
+						}
+					},
+					'sass-loader'
+				]
+			}
+		]
+	}
+};