Skip to content

C
ck5
提交 c6dad8df authored 作者: 蔡芬's avatar 蔡芬
浏览文件
操作

1

上级
隐藏空白字符变更
内嵌 并排
正在显示 包含 915 行增加 和 0 行删除
.eslintrc.js 0 → 100644
浏览文件 @ c6dad8df
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/* eslint-env node */
'use strict';
module.exports = {
rules: {
'ckeditor5-rules/ckeditor-imports': 'off'
}
};
.gitignore 0 → 100644
浏览文件 @ c6dad8df
node_modules/
coverage/
packages/*/node_modules/
docs/api/output.json
external/
lerna-debug.log
.idea
.vscode
# Ignore `yarn.lock` - this file might contain info from external repositories.
yarn.lock
# Ignore `mrgit.json` this file contains info about external repositories.
mrgit.json
build/
!packages/ckeditor5-build-*/build
CHANGELOG.md 0 → 100644
浏览文件 @ c6dad8df
This source diff could not be displayed because it is too large. You can view the blob instead.
CONTRIBUTING.md 0 → 100644
浏览文件 @ c6dad8df
Contributing
========================================
See the [official contributors' guide to CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html) to learn more.
LICENSE.md 0 → 100644
浏览文件 @ c6dad8df
Software License Agreement
==========================
**CKEditor 5 classic editor build** – https://github.com/ckeditor/ckeditor5-build-classic <br>
Copyright (c) 2003-2022, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
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.
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/.
Trademarks
----------
**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
README.md 0 → 100644
浏览文件 @ c6dad8df
CKEditor 5 classic editor build
========================================
[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-build-classic.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic)
[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
[![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://app.travis-ci.com/github/ckeditor/ckeditor5)
![Dependency Status](https://img.shields.io/librariesio/release/npm/@ckeditor/ckeditor5-build-classic)
The classic editor build for CKEditor 5. Read more about the [classic editor build](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/predefined-builds.html#classic-editor) and see the [demo](https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html).
![CKEditor 5 classic editor build screenshot](https://c.cksource.com/a/1/img/npm/ckeditor5-build-classic.png)
## Documentation
See:
* [Installation](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html) for how to install this package and what it contains.
* [Basic API](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/basic-api.html) for how to create an editor and interact with it.
* [Configuration](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/configuration.html) for how to configure the editor.
* [Creating custom builds](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#building-the-editor-from-source) for how to customize the build (configure and rebuild the editor bundle).
## Quick start
First, install the build from npm:
```bash
npm install --save @ckeditor/ckeditor5-build-classic
```
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>
```
Or in your JavaScript application:
```js
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
// Or using the CommonJS version:
// const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
```
**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/installation/advanced/advanced-setup.html).
## License
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).
package-lock.json 0 → 100644
浏览文件 @ c6dad8df
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
浏览文件 @ c6dad8df
{
"name": "@ckeditor/ckeditor5-build-classic",
"version": "34.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",
"ckeditor5-metadata.json"
],
"dependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "^34.0.0",
"@ckeditor/ckeditor5-autoformat": "^34.0.0",
"@ckeditor/ckeditor5-basic-styles": "^34.0.0",
"@ckeditor/ckeditor5-block-quote": "^34.0.0",
"@ckeditor/ckeditor5-ckfinder": "^34.0.0",
"@ckeditor/ckeditor5-cloud-services": "^34.0.0",
"@ckeditor/ckeditor5-easy-image": "^34.0.0",
"@ckeditor/ckeditor5-editor-classic": "^34.0.0",
"@ckeditor/ckeditor5-essentials": "^34.0.0",
"@ckeditor/ckeditor5-heading": "^34.0.0",
"@ckeditor/ckeditor5-image": "^34.0.0",
"@ckeditor/ckeditor5-indent": "^34.0.0",
"@ckeditor/ckeditor5-link": "^34.0.0",
"@ckeditor/ckeditor5-list": "^34.0.0",
"@ckeditor/ckeditor5-media-embed": "^34.0.0",
"@ckeditor/ckeditor5-paragraph": "^34.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^34.0.0",
"@ckeditor/ckeditor5-table": "^34.0.0",
"@ckeditor/ckeditor5-typing": "^34.0.0"
},
"devDependencies": {
"@ckeditor/ckeditor5-core": "^34.0.0",
"@ckeditor/ckeditor5-dev-utils": "^30.0.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^30.0.0",
"@ckeditor/ckeditor5-editor-balloon": "^34.0.0",
"@ckeditor/ckeditor5-editor-inline": "^34.0.0",
"@ckeditor/ckeditor5-theme-lark": "^34.0.0",
"css-loader": "^5.2.7",
"postcss-loader": "^4.3.0",
"raw-loader": "^4.0.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0"
},
"engines": {
"node": ">=14.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.git",
"directory": "packages/ckeditor5-build-classic"
},
"scripts": {
"build": "webpack --mode production",
"preversion": "npm run build"
}
}
sample/index.html 0 → 100644
浏览文件 @ c6dad8df
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – super build</title>
<style>
body {
max-width: 800px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>CKEditor 5 – super build</h1>
<div id="classic-editor">
<h2>Sample</h2>
<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/predefined-builds.html#classic-editor">classic editor build</a>.</p>
</div>
<div id="inline-editor">
<h2>Sample</h2>
<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/predefined-builds.html#inline-editor">inline editor build</a>.</p>
</div>
<script src="../build/ckeditor.js"></script>
<script>
CKEDITOR.ClassicEditor
.create( document.querySelector( '#classic-editor' ) )
.catch( err => {
console.error( err.stack );
} );
CKEDITOR.BalloonEditor
.create( document.querySelector( '#inline-editor' ) )
.catch( err => {
console.error( err.stack );
} );
</script>
</body>
</html>
src/ckeditor.js 0 → 100644
浏览文件 @ c6dad8df
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. 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 BalloonEditorBase from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
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 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 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 CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';
class ClassicEditor extends ClassicEditorBase {}
class BalloonEditor extends BalloonEditorBase {}
// export default class ClassicEditor extends ClassicEditorBase {}
export default {
ClassicEditor, BalloonEditor
};
// Plugins to include in the build.
const plugins = [
Essentials,
UploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
CKFinder,
CloudServices,
EasyImage,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation
];
ClassicEditor.builtinPlugins = plugins;
BalloonEditor.builtinPlugins = plugins;
// Editor configuration.
const config = {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'uploadImage',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'|',
'toggleImageCaption',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
// This value must be kept in sync with the language defined in webpack.config.js.
language: 'en'
};
ClassicEditor.defaultConfig = config;
BalloonEditor.defaultConfig = config;
tests/ckeditor.js 0 → 100644
浏览文件 @ c6dad8df
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/* globals document */
import ClassicEditor from '../src/ckeditor';
import BaseClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import { describeMemoryUsage, testMemoryUsage } from '@ckeditor/ckeditor5-core/tests/_utils/memory';
describe( 'ClassicEditor build', () => {
let editor, editorElement;
beforeEach( () => {
editorElement = document.createElement( 'div' );
editorElement.innerHTML = '<p><strong>foo</strong> bar</p>';
document.body.appendChild( editorElement );
} );
afterEach( () => {
editorElement.remove();
editor = null;
} );
describe( 'build', () => {
it( 'contains plugins', () => {
expect( ClassicEditor.builtinPlugins ).to.not.be.empty;
} );
it( 'contains config', () => {
expect( ClassicEditor.defaultConfig.toolbar ).to.not.be.empty;
} );
} );
describe( 'create()', () => {
beforeEach( () => {
return ClassicEditor.create( editorElement )
.then( newEditor => {
editor = newEditor;
} );
} );
afterEach( () => {
return editor.destroy();
} );
it( 'creates an instance which inherits from the ClassicEditor', () => {
expect( editor ).to.be.instanceof( ClassicEditor );
expect( editor ).to.be.instanceof( BaseClassicEditor );
} );
it( 'loads data from the editor element', () => {
expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
} );
} );
describe( 'destroy()', () => {
beforeEach( () => {
return ClassicEditor.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>' );
} );
} );
it( 'restores the editor element', () => {
expect( editor.sourceElement.style.display ).to.equal( 'none' );
return editor.destroy()
.then( () => {
expect( editor.sourceElement.style.display ).to.equal( '' );
} );
} );
} );
describe( 'plugins', () => {
beforeEach( () => {
return ClassicEditor.create( editorElement )
.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="/assets/sample.png"></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 configuring toolbar items through config.toolbar', () => {
return ClassicEditor
.create( editorElement, {
toolbar: [ 'bold' ]
} )
.then( newEditor => {
editor = newEditor;
expect( editor.ui.view.toolbar.items.length ).to.equal( 1 );
} );
} );
// https://github.com/ckeditor/ckeditor5/issues/572
it( 'allows configuring toolbar offset without overriding toolbar items', () => {
return ClassicEditor
.create( editorElement, {
ui: {
viewportOffset: {
top: 42
}
}
} )
.then( newEditor => {
editor = newEditor;
expect( editor.ui.view.toolbar.items.length ).to.equal( 17 );
expect( editor.ui.view.stickyPanel.viewportTopOffset ).to.equal( 42 );
} );
} );
it( 'allows removing built-in toolbar items', () => {
return ClassicEditor
.create( editorElement, {
toolbar: {
removeItems: [ 'italic' ]
}
} )
.then( newEditor => {
editor = newEditor;
expect( editor.ui.view.toolbar.items.length ).to.equal( 16 );
expect( editor.ui.view.toolbar.items.find( item => item.label === 'Italic' ) ).to.be.undefined;
} );
} );
} );
describeMemoryUsage( () => {
testMemoryUsage(
'should not grow on multiple create/destroy',
() => ClassicEditor.create( document.querySelector( '#mem-editor' ) ) );
} );
} );
tests/manual/ckeditor-amd-version.html 0 → 100644
浏览文件 @ c6dad8df
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – classic editor build – RequireJS integration test</title>
<style>
body {
max-width: 800px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>CKEditor 5 – classic editor build – RequireJS integration test (see <a href="https://github.com/ckeditor/ckeditor5/issues/914">#914</a>)</h1>
<h2>In the default language</h2>
<div id="editor">
<h2>About CKEditor&nbsp;5</h2>
<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
</div>
<h2>In German</h2>
<div id="editor-de">
<h2>About CKEditor&nbsp;5</h2>
<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
<script>
require( [ '../../build/ckeditor.js' ], ( ClassicEditor ) => {
ClassicEditor.create( document.getElementById( 'editor' ) )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
} );
require( [ '../../build/ckeditor.js', '../../build/translations/de.js' ], ( ClassicEditor ) => {
ClassicEditor
.create( document.getElementById( 'editor-de' ), {
language: 'de'
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
} );
</script>
</body>
</html>
tests/manual/ckeditor-cjs-version.html 0 → 100644
浏览文件 @ c6dad8df
<div id="editor">
<h2>About CKEditor&nbsp;5</h2>
<p>This is <a href="https://ckeditor.com">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://ckeditor.com">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>
tests/manual/ckeditor-cjs-version.js 0 → 100644
浏览文件 @ c6dad8df
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/* eslint-env commonjs */
/* globals window, document, console */
const ClassicEditor = require( '../../build/ckeditor' );
ClassicEditor.create( document.querySelector( '#editor' ) )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
tests/manual/ckeditor-cjs-version.md 0 → 100644
浏览文件 @ c6dad8df
# CKEditor 5 classic build – standard version (CommonJS `require()`)
Just play with it.
**Note:** Remember to rebuild the bundles by running `npm run build` in build's package directory. You can also run Webpack in the watch mode:
```
./node_modules/.bin/webpack -w
```
tests/manual/ckeditor-global-version.html 0 → 100644
浏览文件 @ c6dad8df
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – classic editor build – global variable test</title>
<style>
body {
max-width: 800px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>CKEditor 5 – classic editor build – global variable test</h1>
<h2>In the default language</h2>
<div id="editor">
<h2>About CKEditor&nbsp;5</h2>
<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
</div>
<h2>In German</h2>
<div id="editor-de">
<h2>About CKEditor&nbsp;5</h2>
<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
</div>
<script src="../../build/ckeditor.js"></script>
<script src="../../build/translations/de.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 );
} );
ClassicEditor
.create( document.querySelector( '#editor-de' ), {
language: 'de'
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
</script>
</body>
</html>
tests/manual/ckeditor.html 0 → 100644
浏览文件 @ c6dad8df
<div id="editor">
<h2>About CKEditor&nbsp;5</h2>
<p>This is <a href="https://ckeditor.com">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://ckeditor.com">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>
tests/manual/ckeditor.js 0 → 100644
浏览文件 @ c6dad8df
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/* globals window, document, console */
import ClassicEditor from '../../build/ckeditor';
ClassicEditor.create( document.querySelector( '#editor' ) )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
tests/manual/ckeditor.md 0 → 100644
浏览文件 @ c6dad8df
# CKEditor 5 classic build – standard version
Just play with it.
**Note:** Remember to rebuild the bundles by running `npm run build` in build's package directory. You can also run Webpack in the watch mode:
```
./node_modules/.bin/webpack -w
```
webpack.config.js 0 → 100644
浏览文件 @ c6dad8df
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
'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 TerserPlugin = require( 'terser-webpack-plugin' );
module.exports = {
devtool: 'source-map',
performance: { hints: false },
entry: path.resolve( __dirname, 'src', 'ckeditor.js' ),
output: {
// The name under which the editor will be exported.
library: 'CKEDITOR',
path: path.resolve( __dirname, 'build' ),
filename: 'ckeditor.js',
libraryTarget: 'umd',
libraryExport: 'default'
},
optimization: {
minimizer: [
new TerserPlugin( {
sourceMap: true,
terserOptions: {
output: {
// Preserve CKEditor 5 license comments.
comments: /^!/
}
},
extractComments: false
} )
]
},
plugins: [
new CKEditorWebpackPlugin( {
// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
language: 'en',
additionalLanguages: 'all'
} ),
new webpack.BannerPlugin( {
banner: bundler.getLicenseBanner(),
raw: true
} )
],
module: {
rules: [
{
test: /\.svg$/,
use: [ 'raw-loader' ]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
attributes: {
'data-cke': true
}
}
},
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
}
]
}
]
}
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论