The basic implementation of the decoupled document build.

parent c9848d5a
Contributing
========================================
Information about contributing can be found on the following page: <https://github.com/ckeditor/ckeditor5/blob/master/CONTRIBUTING.md>.
Software License Agreement
==========================
**CKEditor 5 classic editor build** – https://github.com/ckeditor/ckeditor5-build-decoupled-document <br>
Copyright (c) 2003-2018, [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.
#!/usr/bin/env bash
echo "Building 'build/ckeditor.js'..."
echo ""
webpack
echo ""
echo "Done."
#!/usr/bin/env node
/**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
'use strict';
const path = require( 'path' );
const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
const buildConfig = require( '../build-config' );
console.log( 'Creating the entry file...' );
bundler.createEntryFile( path.join( 'src', 'ckeditor.js' ), buildConfig );
console.log( 'Done.' );
/**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
'use strict';
module.exports = {
// The editor creator to use.
editor: '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor',
// The name under which the editor will be exported.
moduleName: 'DecoupledDocumentEditor',
// Plugins to include in the build.
plugins: [
'@ckeditor/ckeditor5-essentials/src/essentials',
'@ckeditor/ckeditor5-alignment/src/alignment',
'@ckeditor/ckeditor5-font/src/fontsize',
'@ckeditor/ckeditor5-font/src/fontfamily',
'@ckeditor/ckeditor5-highlight/src/highlight',
'@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter',
'@ckeditor/ckeditor5-autoformat/src/autoformat',
'@ckeditor/ckeditor5-basic-styles/src/bold',
'@ckeditor/ckeditor5-basic-styles/src/italic',
'@ckeditor/ckeditor5-basic-styles/src/strikethrough',
'@ckeditor/ckeditor5-basic-styles/src/underline',
'@ckeditor/ckeditor5-block-quote/src/blockquote',
'@ckeditor/ckeditor5-easy-image/src/easyimage',
'@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-image/src/imageupload',
'@ckeditor/ckeditor5-link/src/link',
'@ckeditor/ckeditor5-list/src/list',
'@ckeditor/ckeditor5-paragraph/src/paragraph',
],
// Editor config.
config: {
toolbar: {
items: [
'heading',
'|',
'fontsize',
'fontfamily',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'highlight',
'|',
'alignment',
'|',
'numberedList',
'bulletedList',
'|',
'link',
'blockquote',
'uploadImage',
'|',
'undo',
'redo'
]
},
image: {
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
},
// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
language: 'en'
}
};
{
"name": "@ckeditor/ckeditor5-build-decoupled-document",
"version": "1.0.0-alpha.2",
"description": "CKEditor 5 decoupled document editor build.",
"keywords": [
"ckeditor5",
"ckeditor5-build",
"text editor",
"WYSIWYG",
"rich-text editor"
],
"main": "./build/ckeditor.js",
"files": [
"build"
],
"devDependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-alignment": "^0.0.1",
"@ckeditor/ckeditor5-autoformat": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-block-quote": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-dev-utils": "^7.0.3",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^3.0.4",
"@ckeditor/ckeditor5-easy-image": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-editor-decoupled": "^0.0.1",
"@ckeditor/ckeditor5-essentials": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-font": "^0.0.1",
"@ckeditor/ckeditor5-heading": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-highlight": "^0.0.1",
"@ckeditor/ckeditor5-image": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-link": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-list": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-theme-lark": "^1.0.0-alpha.2",
"@ckeditor/ckeditor5-upload": "^1.0.0-alpha.2",
"babel-minify-webpack-plugin": "^0.3.0",
"postcss-loader": "^2.0.10",
"raw-loader": "^0.5.1",
"style-loader": "^0.19.1",
"webpack": "^3.10.0",
"webpack-sources": "1.0.1"
},
"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-decoupled-document/issues",
"repository": {
"type": "git",
"url": "https://github.com/ckeditor/ckeditor5-build-decoupled-document.git"
},
"scripts": {
"build": "npm run create-entry-file && npm run build-ckeditor",
"create-entry-file": "node bin/create-entry-file.js",
"build-ckeditor": "sh bin/build-ckeditor.sh",
"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"
}
}
/**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
import DecoupledDocumentEditorBase from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import AlignmentPlugin from '@ckeditor/ckeditor5-alignment/src/alignment';
import FontsizePlugin from '@ckeditor/ckeditor5-font/src/fontsize';
import FontfamilyPlugin from '@ckeditor/ckeditor5-font/src/fontfamily';
import HighlightPlugin from '@ckeditor/ckeditor5-highlight/src/highlight';
import UploadadapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
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 StrikethroughPlugin from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import UnderlinePlugin from '@ckeditor/ckeditor5-basic-styles/src/underline';
import BlockquotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import EasyimagePlugin from '@ckeditor/ckeditor5-easy-image/src/easyimage';
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 ImageuploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
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 default class DecoupledDocumentEditor extends DecoupledDocumentEditorBase {}
DecoupledDocumentEditor.build = {
plugins: [
EssentialsPlugin,
AlignmentPlugin,
FontsizePlugin,
FontfamilyPlugin,
HighlightPlugin,
UploadadapterPlugin,
AutoformatPlugin,
BoldPlugin,
ItalicPlugin,
StrikethroughPlugin,
UnderlinePlugin,
BlockquotePlugin,
EasyimagePlugin,
HeadingPlugin,
ImagePlugin,
ImagecaptionPlugin,
ImagestylePlugin,
ImagetoolbarPlugin,
ImageuploadPlugin,
LinkPlugin,
ListPlugin,
ParagraphPlugin
],
config: {
toolbar: {
items: [
'heading',
'|',
'fontsize',
'fontfamily',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'highlight',
'|',
'alignment',
'|',
'numberedList',
'bulletedList',
'|',
'link',
'blockquote',
'uploadImage',
'|',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
language: 'en'
}
};
/**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
/* globals document */
import DecoupledDocumentEditor from '../src/ckeditor';
import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
describe( 'DecoupledDocumentEditor build', () => {
let editor, editorData;
beforeEach( () => {
editorData = '<p><strong>foo</strong> bar</p>';
} );
afterEach( () => {
editor = null;
} );
describe( 'buid', () => {
it( 'contains plugins', () => {
expect( DecoupledDocumentEditor.build.plugins ).to.not.be.empty;
} );
it( 'contains config', () => {
expect( DecoupledDocumentEditor.build.config.toolbar ).to.not.be.empty;
} );
} );
describe( 'create()', () => {
beforeEach( () => {
return DecoupledDocumentEditor.create( editorData )
.then( newEditor => {
editor = newEditor;
} );
} );
afterEach( () => {
return editor.destroy();
} );
it( 'creates an instance which inherits from the DecoupledDocumentEditor', () => {
expect( editor ).to.be.instanceof( DecoupledDocumentEditor );
expect( editor ).to.be.instanceof( DecoupledEditor );
} );
it( 'loads passed data', () => {
expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
} );
it( 'does not define the UI DOM structure', () => {
expect( editor.ui.view.element ).to.be.null;
expect( editor.ui.view.toolbar.element.parentElement ).to.be.null;
expect( editor.ui.view.editable.element.parentElement ).to.be.null;
} );
} );
describe( 'destroy()', () => {
beforeEach( () => {
return DecoupledDocumentEditor.create( editorData )
.then( newEditor => {
editor = newEditor;
} );
} );
} );
describe( 'plugins', () => {
beforeEach( () => {
return DecoupledDocumentEditor.create( editorData )
.then( newEditor => {
editor = newEditor;
} );
} );
afterEach( () => {
return editor.destroy();
} );
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 );
} );
} );
describe( 'config', () => {
afterEach( () => {
return editor.destroy();
} );
// https://github.com/ckeditor/ckeditor5/issues/572
it( 'allows configure toolbar items through config.toolbar', () => {
return DecoupledDocumentEditor
.create( editorData, {
toolbar: [ 'bold' ]
} )
.then( newEditor => {
editor = newEditor;
expect( editor.ui.view.toolbar.items.length ).to.equal( 1 );
} );
} );
} );
} );
<h2>The toolbar</h2>
<div class="toolbar-container ck-reset_all"></div>
<h2>The editable</h2>
<div class="editable-container ck-reset "></div>
<style>
.editable-container,
.toolbar-container {
position: relative;
border: 1px solid #ddd;
background: #eee;
}
.toolbar-container {
padding: 1em;
}
.editable-container {
padding: 3em;
overflow-y: scroll;
max-height: 500px;
}
.editable-container .ck-editor__editable {
min-height: 21cm;
padding: 2em;
border: 1px #D3D3D3 solid;
border-radius: var(--ck-border-radius);
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
/**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
const DecoupledDocumentEditor = require( '../../build/ckeditor' );
const editorData = `<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>`;
DecoupledDocumentEditor
.create( editorData, {
toolbarContainer: '.toolbar-container',
editableContainer: '.editable-container',
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
# CKEditor 5 classic 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
```
<h2>The toolbar</h2>
<div class="toolbar-container ck-reset_all"></div>
<h2>The editable</h2>
<div class="editable-container ck-reset "></div>
<style>
.editable-container,
.toolbar-container {
position: relative;
border: 1px solid #ddd;
background: #eee;
}
.toolbar-container {
padding: 1em;
}
.editable-container {
padding: 3em;
overflow-y: scroll;
max-height: 500px;
}
.editable-container .ck-editor__editable {
min-height: 21cm;
padding: 2em;
border: 1px #D3D3D3 solid;
border-radius: var(--ck-border-radius);
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
/**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
import DecoupledDocumentEditor from '../../build/ckeditor';
const editorData = `<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>`;
DecoupledDocumentEditor
.create( editorData, {
toolbarContainer: '.toolbar-container',
editableContainer: '.editable-container',
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
# CKEditor 5 decoupled document 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
```
/**
* @license Copyright (c) 2003-2018, 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, styles } = 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, 'src', 'ckeditor.js' ),
output: {
path: path.resolve( __dirname, 'build' ),
filename: 'ckeditor.js',
libraryTarget: 'umd',
libraryExport: 'default',
library: buildConfig.moduleName
},
plugins: [
new CKEditorWebpackPlugin( {
language: buildConfig.config.language,
additionalLanguages: 'all'
} ),
new BabiliPlugin( null, {
comments: false
} ),
new webpack.BannerPlugin( {
banner: bundler.getLicenseBanner(),
raw: true
} ),
new webpack.optimize.ModuleConcatenationPlugin()
],
module: {
rules: [
{
test: /\.svg$/,
use: [ 'raw-loader' ]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
]
}
]
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment