/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/* globals window, document, location, console */
import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
ClassicEditor.builtinPlugins.push( HtmlEmbed );
ClassicEditor.builtinPlugins.push( CodeBlock );
/* eslint-disable max-len */
const initialData =
`
CKEditor 5 classic editor build
The classic editor build for CKEditor 5. Read more about the classic editor build and see the demo.
Documentation
See:
- Installation for how to install this package and what it contains.
- Basic API for how to create an editor and interact with it.
- Configuration for how to configure the editor.
Quick start
First, install the build from npm:
npm install --save @ckeditor/ckeditor5-build-classic
And use it in your website:
<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>
License
Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file or https://ckeditor.com/legal/ckeditor-oss-license.
`;
ClassicEditor
.create( document.querySelector( '#snippet-html-embed' ), {
initialData,
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'blockQuote',
'link',
'imageUpload',
'mediaEmbed',
'insertTable',
'codeBlock',
'htmlEmbed',
'|',
'undo',
'redo'
],
viewportTopOffset: window.getViewportTopOffsetConfig()
},
image: {
styles: [
'full',
'alignLeft',
'alignRight'
],
toolbar: [
'imageStyle:alignLeft',
'imageStyle:full',
'imageStyle:alignRight',
'|',
'imageTextAlternative'
]
},
table: {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
},
cloudServices: CS_CONFIG
} )
.then( editor => {
window.editor = editor;
// The "Preview editor data" button logic.
document.querySelector( '#preview-data-action' ).addEventListener( 'click', () => {
const mainCSSElement = [ ...document.querySelectorAll( 'link' ) ]
.find( linkElement => linkElement.href.endsWith( 'css/styles.css' ) );
const snippetCSSElement = [ ...document.querySelectorAll( 'link' ) ]
.find( linkElement => linkElement.href.endsWith( 'snippet.css' ) );
const iframeElement = document.querySelector( '#preview-data-container' );
// We create the iframe in a careful way and set the base URL to make emojics widget work.
// NOTE: the emojics widget works only when hosted on ckeditor.com.
const html = '' +
'' +
'' +
`` +
`${ document.title }` +
`` +
`` +
`` +
'' +
'' +
editor.getData() +
'' +
'';
iframeElement.contentWindow.document.open();
iframeElement.contentWindow.document.write( html );
iframeElement.contentWindow.document.close();
} );
} )
.catch( err => {
console.error( err.stack );
} );