UNPKG

6.25 kBTypeScriptView Raw
1/**
2 * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
3 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4 */
5/**
6 * @module editor-classic/classiceditor
7 */
8import ClassicEditorUI from './classiceditorui.js';
9import { Editor, type EditorConfig } from 'ckeditor5/src/core.js';
10declare const ClassicEditor_base: import("ckeditor5/src/utils.js").Mixed<typeof Editor, import("ckeditor5/src/core.js").ElementApi>;
11/**
12 * The classic editor implementation. It uses an inline editable and a sticky toolbar, all enclosed in a boxed UI.
13 * See the {@glink examples/builds/classic-editor demo}.
14 *
15 * In order to create a classic editor instance, use the static
16 * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`} method.
17 */
18export default class ClassicEditor extends /* #__PURE__ */ ClassicEditor_base {
19 /**
20 * @inheritDoc
21 */
22 readonly ui: ClassicEditorUI;
23 /**
24 * Creates an instance of the classic editor.
25 *
26 * **Note:** do not use the constructor to create editor instances. Use the static
27 * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`} method instead.
28 *
29 * @param sourceElementOrData The DOM element that will be the source for the created editor
30 * or the editor's initial data. For more information see
31 * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
32 * @param config The editor configuration.
33 */
34 protected constructor(sourceElementOrData: HTMLElement | string, config?: EditorConfig);
35 /**
36 * Destroys the editor instance, releasing all resources used by it.
37 *
38 * Updates the original editor element with the data if the
39 * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
40 * configuration option is set to `true`.
41 */
42 destroy(): Promise<unknown>;
43 /**
44 * Creates a new classic editor instance.
45 *
46 * There are three ways how the editor can be initialized.
47 *
48 * # Replacing a DOM element (and loading data from it)
49 *
50 * You can initialize the editor using an existing DOM element:
51 *
52 * ```ts
53 * ClassicEditor
54 * .create( document.querySelector( '#editor' ) )
55 * .then( editor => {
56 * console.log( 'Editor was initialized', editor );
57 * } )
58 * .catch( err => {
59 * console.error( err.stack );
60 * } );
61 * ```
62 *
63 * The element's content will be used as the editor data and the element will be replaced by the editor UI.
64 *
65 * # Creating a detached editor
66 *
67 * Alternatively, you can initialize the editor by passing the initial data directly as a string.
68 * In this case, the editor will render an element that must be inserted into the DOM:
69 *
70 * ```ts
71 * ClassicEditor
72 * .create( '<p>Hello world!</p>' )
73 * .then( editor => {
74 * console.log( 'Editor was initialized', editor );
75 *
76 * // Initial data was provided so the editor UI element needs to be added manually to the DOM.
77 * document.body.appendChild( editor.ui.element );
78 * } )
79 * .catch( err => {
80 * console.error( err.stack );
81 * } );
82 * ```
83 *
84 * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
85 * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
86 *
87 * # Replacing a DOM element (and data provided in `config.initialData`)
88 *
89 * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
90 *
91 * ```ts
92 * ClassicEditor
93 * .create( document.querySelector( '#editor' ), {
94 * initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
95 * } )
96 * .then( editor => {
97 * console.log( 'Editor was initialized', editor );
98 * } )
99 * .catch( err => {
100 * console.error( err.stack );
101 * } );
102 * ```
103 *
104 * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
105 * makes it difficult to set the content of the source element.
106 *
107 * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
108 *
109 * # Configuring the editor
110 *
111 * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
112 * customizing plugins, toolbar and more.
113 *
114 * @param sourceElementOrData The DOM element that will be the source for the created editor
115 * or the editor's initial data.
116 *
117 * If a DOM element is passed, its content will be automatically loaded to the editor upon initialization
118 * and the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element editor element} will replace the passed element
119 * in the DOM (the original one will be hidden and the editor will be injected next to it).
120 *
121 * If the {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
122 * 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,
123 * in which this element is contained, is submitted (if the original element is a `<textarea>`). This ensures seamless integration
124 * with native web forms.
125 *
126 * If the initial data is passed, a detached editor will be created. In this case you need to insert it into the DOM manually.
127 * It is available under the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element `editor.ui.element`} property.
128 *
129 * @param config The editor configuration.
130 * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
131 */
132 static create(sourceElementOrData: HTMLElement | string, config?: EditorConfig): Promise<ClassicEditor>;
133}
134export {};
135
\No newline at end of file