This commit is contained in:
2026-08-08 18:53:36 +03:30
commit 92f21ca1cf
134 changed files with 22909 additions and 0 deletions

View File

@@ -0,0 +1,237 @@
/**
* @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( '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( 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' ) ) );
} );
} );

View File

@@ -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>

View File

@@ -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>

View File

@@ -0,0 +1,17 @@
/**
* @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 );
} );

View File

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

View File

@@ -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>

View File

@@ -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>

View File

@@ -0,0 +1,16 @@
/**
* @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 );
} );

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB