增加ckeditor5和使用的说明

master
joefalmko 1 month ago
parent 4e9ae56c97
commit 9f2336b918

@ -0,0 +1,6 @@
# 后端启动
`cd GinSkeleton; go mod tidy; go run main.go`
api文档见 `GinSkeleton/api_doc.md`
# CKEditor
`ckeditor5-build-classic/handbook.md`中有一些参考,
包括下载、安装、引用、配置插件等。

@ -0,0 +1,14 @@
/**
* @license Copyright (c) 2003-2024, 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'
}
};

@ -0,0 +1,40 @@
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { CKFinderUploadAdapter } from '@ckeditor/ckeditor5-adapter-ckfinder';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CKBox } from '@ckeditor/ckeditor5-ckbox';
import { CKFinder } from '@ckeditor/ckeditor5-ckfinder';
import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing } from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
export default class ClassicEditor extends ClassicEditorBase {
static builtinPlugins: (typeof Essentials | typeof CKFinderUploadAdapter | typeof Autoformat | typeof Bold | typeof Italic | typeof BlockQuote | typeof CKBox | typeof CKFinder | typeof CloudServices | typeof EasyImage | typeof Heading | typeof Image | typeof ImageCaption | typeof ImageStyle | typeof ImageToolbar | typeof ImageUpload | typeof Indent | typeof Link | typeof List | typeof MediaEmbed | typeof Paragraph | typeof PasteFromOffice | typeof PictureEditing | typeof Table | typeof TableToolbar | typeof TextTransformation | typeof Alignment)[];
static defaultConfig: {
toolbar: {
items: string[];
};
image: {
toolbar: string[];
};
table: {
contentToolbar: string[];
};
language: string;
};
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,32 @@
# 下载
`https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-classic`
# 安装依赖&打包
`npm install`
`npm run build`
# 引用包
直接引用build/ckeditor.js即可见sample/index.html
# 安装插件
@ckeditor/ckeditor5-alignment为例
`npm install --save-dev @ckeditor/ckeditor5-alignment`
# 使用插件
修改src/ckeditor.js添加@ckeditor/ckeditor5-alignment
`import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; // <--- 新加的插件`
`builtinPlugins`中加入`Alignment`
`toolbar`中加入`alignment`
然后重新编译并打包
# 更改语言
需要同时修改`webpack.config.js` 和 `/src/ckeditor.js` 文件中的 language 配置:
`language: 'zh-cn'`
然后打包并在index.html中引用
`<script src="../build/translations/zh.js"></script>`
# 插件开发
参考内容:
0. 官方文档
`https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/getting-and-setting-data.html`
1. CKEditor5导入并解析word功能的集成实现word转html
`https://blog.csdn.net/zhang_hai_cheng/article/details/133012884`
2. CKEditor: 实现word嵌入浏览器并导出为word实现方案
`https://juejin.cn/post/7111675480482250782`
3. ckeditor5编写自定义插件并做国际化处理
`https://blog.csdn.net/cc_want/article/details/119457360`

File diff suppressed because it is too large Load Diff

@ -0,0 +1,76 @@
{
"name": "@ckeditor/ckeditor5-build-classic",
"version": "43.2.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",
"types": "./build/ckeditor.d.ts",
"files": [
"build",
"ckeditor5-metadata.json",
"CHANGELOG.md"
],
"dependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "43.2.0",
"@ckeditor/ckeditor5-autoformat": "43.2.0",
"@ckeditor/ckeditor5-basic-styles": "43.2.0",
"@ckeditor/ckeditor5-block-quote": "43.2.0",
"@ckeditor/ckeditor5-ckbox": "43.2.0",
"@ckeditor/ckeditor5-ckfinder": "43.2.0",
"@ckeditor/ckeditor5-cloud-services": "43.2.0",
"@ckeditor/ckeditor5-easy-image": "43.2.0",
"@ckeditor/ckeditor5-editor-classic": "43.2.0",
"@ckeditor/ckeditor5-essentials": "43.2.0",
"@ckeditor/ckeditor5-heading": "43.2.0",
"@ckeditor/ckeditor5-image": "43.2.0",
"@ckeditor/ckeditor5-indent": "43.2.0",
"@ckeditor/ckeditor5-link": "43.2.0",
"@ckeditor/ckeditor5-list": "43.2.0",
"@ckeditor/ckeditor5-media-embed": "43.2.0",
"@ckeditor/ckeditor5-paragraph": "43.2.0",
"@ckeditor/ckeditor5-paste-from-office": "43.2.0",
"@ckeditor/ckeditor5-table": "43.2.0",
"@ckeditor/ckeditor5-typing": "43.2.0"
},
"devDependencies": {
"@ckeditor/ckeditor5-alignment": "^43.2.0",
"@ckeditor/ckeditor5-core": "43.2.0",
"@ckeditor/ckeditor5-dev-translations": "^45.0.0",
"@ckeditor/ckeditor5-dev-utils": "^45.0.0",
"@ckeditor/ckeditor5-theme-lark": "43.2.0",
"terser-webpack-plugin": "^5.0.0",
"typescript": "5.0.4",
"webpack": "^5.94.0",
"webpack-cli": "^5.1.4"
},
"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",
"postbuild": "tsc -p ./tsconfig.types.json"
}
}

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CKEditor 5 classic editor build development sample</title>
<style>
body {
max-width: 800px;
margin: 20px auto;
}
</style>
</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/getting-started/legacy/installation-methods/predefined-builds.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/installation/legacy/advanced/alternative-setups/custom-builds.html">custom build</a> works fine.</p>
</div>
<script src="../build/ckeditor.js"></script>
<script src="../build/translations/zh.js"></script>
<script>
// import '../build/translation/zh-cn.js';
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>

@ -0,0 +1,94 @@
/**
* @license Copyright (c) 2003-2024, 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 { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { CKFinderUploadAdapter } from '@ckeditor/ckeditor5-adapter-ckfinder';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CKBox } from '@ckeditor/ckeditor5-ckbox';
import { CKFinder } from '@ckeditor/ckeditor5-ckfinder';
import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing } from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; // <--- 新加的插件
export default class ClassicEditor extends ClassicEditorBase {
public static override builtinPlugins = [
Essentials,
CKFinderUploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
CKBox,
CKFinder,
CloudServices,
EasyImage,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
PictureEditing,
Table,
TableToolbar,
TextTransformation,
Alignment // <--- 新加的插件
];
public static override defaultConfig = {
toolbar: {
items: [
'undo', 'redo',
'|', 'heading',
'|', 'alignment', // <--- 新加的插件
'|', 'bold', 'italic',
'|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
]
},
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: 'zh-cn'
};
}

@ -0,0 +1,237 @@
/**
* @license Copyright (c) 2003-2024, 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.js';
import BaseClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import { describeMemoryUsage, testMemoryUsage } from '@ckeditor/ckeditor5-core/tests/_utils/memory.js';
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( 'clears editor element if config.updateSourceElementOnDestroy flag is not set', () => {
editor.setData( '<p>foo</p>' );
return editor.destroy()
.then( () => {
expect( editorElement.innerHTML ).to.equal( '' );
} );
} );
it( 'sets the data back to the editor element if config.updateSourceElementOnDestroy flag is set', () => {
editor.setData( '<p>foo</p>' );
editor.config.set( 'updateSourceElementOnDestroy', true );
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( 18 );
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( 17 );
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' ) ) );
} );
} );

@ -0,0 +1,60 @@
<!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>

@ -0,0 +1,27 @@
<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>

@ -0,0 +1,17 @@
/**
* @license Copyright (c) 2003-2024, 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 );
} );

@ -0,0 +1,9 @@
# CKEditor&nbsp;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
```

@ -0,0 +1,57 @@
<!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>

@ -0,0 +1,27 @@
<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>

@ -0,0 +1,16 @@
/**
* @license Copyright (c) 2003-2024, 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.js';
ClassicEditor.create( document.querySelector( '#editor' ) )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );

@ -0,0 +1,9 @@
# CKEditor&nbsp;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
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

@ -0,0 +1,7 @@
{
"extends": "./tsconfig_master.json",
"include": [
"src",
"../../typings"
]
}

@ -0,0 +1,13 @@
{
"extends": "./tsconfig_master.json",
"compilerOptions": {
"declaration": true,
"emitDeclarationOnly": true,
"declarationDir": "build",
"stripInternal": true
},
"include": [
"src",
"../../typings"
]
}

@ -0,0 +1,37 @@
/*
* The base configuration used by all other configuration.
*
* Be careful when updating this file. It may affect building docs, preparing DLLs, executing tests, or impacts the release process.
*/
{
"compilerOptions": {
/**
* TypeScript automagically loads typings from all "@types/*" packages if the "compilerOptions.types" array is not defined in
* this file. However, if some dependencies have "@types/*" packages as their dependencies, they'll also be loaded as well.
* As a result, TypeScript loaded "@types/node" which we don't want to use, because it allows using Node.js specific APIs that
* are not available in the browsers.
*
* To avoid such issues, we defined this empty "types" to disable automatic inclusion of the "@types/*" packages.
*/
"types": [],
"lib": [
"ES2019", // Must match the "target"
"ES2020.String",
"DOM",
"DOM.Iterable"
],
"noImplicitAny": true,
"noImplicitOverride": true,
"strict": true,
"module": "es6",
"target": "es2019",
"sourceMap": true,
"allowJs": true,
"moduleResolution": "node",
"skipLibCheck": true,
"allowSyntheticDefaultImports": true
},
"include": [
"./typings/"
]
}

@ -0,0 +1,82 @@
/**
* @license Copyright (c) 2003-2024, 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 */
import path from 'path';
import module from 'module';
import { fileURLToPath } from 'url';
import webpack from 'webpack';
import { bundler, loaders } from '@ckeditor/ckeditor5-dev-utils';
import { CKEditorTranslationsPlugin } from '@ckeditor/ckeditor5-dev-translations';
import TerserPlugin from 'terser-webpack-plugin';
const require = module.createRequire( import.meta.url );
const __filename = fileURLToPath( import.meta.url );
const __dirname = path.dirname( __filename );
export default {
devtool: 'source-map',
performance: { hints: false },
entry: path.resolve( __dirname, 'src', 'ckeditor.ts' ),
output: {
// The name under which the editor will be exported.
library: 'ClassicEditor',
path: path.resolve( __dirname, 'build' ),
filename: 'ckeditor.js',
libraryTarget: 'umd',
libraryExport: 'default'
},
optimization: {
minimizer: [
new TerserPlugin( {
terserOptions: {
output: {
// Preserve CKEditor 5 license comments.
comments: /^!/
}
},
extractComments: false
} )
]
},
plugins: [
new CKEditorTranslationsPlugin( {
// 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: 'zh-cn',
additionalLanguages: 'all'
} ),
new webpack.BannerPlugin( {
banner: bundler.getLicenseBanner(),
raw: true
} )
],
module: {
rules: [
loaders.getIconsLoader( { matchExtensionOnly: true } ),
loaders.getStylesLoader( {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
minify: true
} ),
loaders.getTypeScriptLoader()
]
},
resolve: {
extensions: [ '.ts', '.js', '.json' ],
extensionAlias: {
'.js': [ '.js', '.ts' ]
}
}
};
Loading…
Cancel
Save