@ckeditor/ckeditor5-editor-classic
- Version 43.0.0
- Published
- 163 kB
- 6 dependencies
- GPL-2.0-or-later license
Install
npm i @ckeditor/ckeditor5-editor-classic
yarn add @ckeditor/ckeditor5-editor-classic
pnpm add @ckeditor/ckeditor5-editor-classic
Overview
Classic editor implementation for CKEditor 5.
Index
Classes
class ClassicEditor
class ClassicEditor extends /* #__PURE__ */ ClassicEditor_base {}
The classic editor implementation. It uses an inline editable and a sticky toolbar, all enclosed in a boxed UI. See the .
In order to create a classic editor instance, use the static method.
constructor
protected constructor( sourceElementOrData: string | HTMLElement, config?: EditorConfig);
Creates an instance of the classic editor.
**Note:** do not use the constructor to create editor instances. Use the static method instead.
Parameter sourceElementOrData
The DOM element that will be the source for the created editor or the editor's initial data. For more information see .
Parameter config
The editor configuration.
property ui
readonly ui: ClassicEditorUI;
method create
static create: ( sourceElementOrData: HTMLElement | string, config?: EditorConfig) => Promise<ClassicEditor>;
Creates a new classic editor instance.
There are three ways how the editor can be initialized.
# Replacing a DOM element (and loading data from it)
You can initialize the editor using an existing DOM element:
ClassicEditor.create( document.querySelector( '#editor' ) ).then( editor => {console.log( 'Editor was initialized', editor );} ).catch( err => {console.error( err.stack );} );The element's content will be used as the editor data and the element will be replaced by the editor UI.
# Creating a detached editor
Alternatively, you can initialize the editor by passing the initial data directly as a string. In this case, the editor will render an element that must be inserted into the DOM:
ClassicEditor.create( '<p>Hello world!</p>' ).then( editor => {console.log( 'Editor was initialized', editor );// Initial data was provided so the editor UI element needs to be added manually to the DOM.document.body.appendChild( editor.ui.element );} ).catch( err => {console.error( err.stack );} );This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
# Replacing a DOM element (and data provided in
config.initialData
)You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
ClassicEditor.create( document.querySelector( '#editor' ), {initialData: '<h2>Initial data</h2><p>Foo bar.</p>'} ).then( editor => {console.log( 'Editor was initialized', editor );} ).catch( err => {console.error( err.stack );} );This method can be used to initialize the editor on an existing element with the specified content in case if your integration makes it difficult to set the content of the source element.
Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
# Configuring the editor
See the to learn more about customizing plugins, toolbar and more.
Parameter sourceElementOrData
The DOM element that will be the source for the created editor or the editor's initial data.
If a DOM element is passed, its content will be automatically loaded to the editor upon initialization and the will replace the passed element in the DOM (the original one will be hidden and the editor will be injected next to it).
If the option is set to
true
, the editor data will be set back to the original element once the editor is destroyed and when a form, in which this element is contained, is submitted (if the original element is a<textarea>
). This ensures seamless integration with native web forms.If the initial data is passed, a detached editor will be created. In this case you need to insert it into the DOM manually. It is available under the property.
Parameter config
The editor configuration.
Returns
A promise resolved once the editor is ready. The promise resolves with the created editor instance.
method destroy
destroy: () => Promise<unknown>;
Destroys the editor instance, releasing all resources used by it.
Updates the original editor element with the data if the configuration option is set to
true
.
Package Files (2)
Dependencies (6)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ckeditor/ckeditor5-editor-classic
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@ckeditor/ckeditor5-editor-classic)
- HTML<a href="https://www.jsdocs.io/package/@ckeditor/ckeditor5-editor-classic"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 3639 ms. - Missing or incorrect documentation? Open an issue for this package.