|
@@ -18,6 +18,8 @@ import DataApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin
|
|
|
import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin';
|
|
import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin';
|
|
|
import attachToForm from '@ckeditor/ckeditor5-core/src/editor/utils/attachtoform';
|
|
import attachToForm from '@ckeditor/ckeditor5-core/src/editor/utils/attachtoform';
|
|
|
import mix from '@ckeditor/ckeditor5-utils/src/mix';
|
|
import mix from '@ckeditor/ckeditor5-utils/src/mix';
|
|
|
|
|
+import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement';
|
|
|
|
|
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* The {@glink builds/guides/overview#balloon-editor balloon editor} implementation (Medium-like editor).
|
|
* The {@glink builds/guides/overview#balloon-editor balloon editor} implementation (Medium-like editor).
|
|
@@ -54,14 +56,20 @@ export default class BalloonEditor extends Editor {
|
|
|
* {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`} method instead.
|
|
* {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`} method instead.
|
|
|
*
|
|
*
|
|
|
* @protected
|
|
* @protected
|
|
|
- * @param {HTMLElement} element The DOM element that will be the source for the created editor
|
|
|
|
|
- * (on which the editor will be initialized).
|
|
|
|
|
|
|
+ * @param {HTMLElement|String} elementOrData The DOM element that will be the source for the created editor
|
|
|
|
|
+ * (on which the editor will be initialized) or initial data for the editor. If data is provided, `editor.element`
|
|
|
|
|
+ * will be created automatically and need to be added manually to the DOM. For more information see
|
|
|
|
|
+ * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`}.
|
|
|
* @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
|
|
* @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
|
|
|
*/
|
|
*/
|
|
|
- constructor( element, config ) {
|
|
|
|
|
|
|
+ constructor( elementOrData, config ) {
|
|
|
super( config );
|
|
super( config );
|
|
|
|
|
|
|
|
- this.element = element;
|
|
|
|
|
|
|
+ if ( isElement( elementOrData ) ) {
|
|
|
|
|
+ this.element = elementOrData;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.element = global.document.createElement( 'div' );
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
this.config.get( 'plugins' ).push( BalloonToolbar );
|
|
this.config.get( 'plugins' ).push( BalloonToolbar );
|
|
|
this.config.define( 'balloonToolbar', this.config.get( 'toolbar' ) );
|
|
this.config.define( 'balloonToolbar', this.config.get( 'toolbar' ) );
|
|
@@ -70,7 +78,7 @@ export default class BalloonEditor extends Editor {
|
|
|
|
|
|
|
|
this.model.document.createRoot();
|
|
this.model.document.createRoot();
|
|
|
|
|
|
|
|
- this.ui = new BalloonEditorUI( this, new BalloonEditorUIView( this.locale, element ) );
|
|
|
|
|
|
|
+ this.ui = new BalloonEditorUI( this, new BalloonEditorUIView( this.locale, this.element ) );
|
|
|
|
|
|
|
|
attachToForm( this );
|
|
attachToForm( this );
|
|
|
}
|
|
}
|
|
@@ -127,15 +135,18 @@ export default class BalloonEditor extends Editor {
|
|
|
* console.error( err.stack );
|
|
* console.error( err.stack );
|
|
|
* } );
|
|
* } );
|
|
|
*
|
|
*
|
|
|
- * @param {HTMLElement} element The DOM element that will be the source for the created editor
|
|
|
|
|
- * (on which the editor will be initialized).
|
|
|
|
|
|
|
+ * Creating instance when using initial data instead of DOM element:
|
|
|
|
|
+ *
|
|
|
|
|
+ * @param {HTMLElement|String} elementOrData The DOM element that will be the source for the created editor
|
|
|
|
|
+ * (on which the editor will be initialized) or initial data for the editor. If data is provided, `editor.element`
|
|
|
|
|
+ * will be created automatically and need to be added manually to the DOM.
|
|
|
* @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
|
|
* @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
|
|
|
* @returns {Promise} A promise resolved once the editor is ready.
|
|
* @returns {Promise} A promise resolved once the editor is ready.
|
|
|
* The promise returns the created {@link module:editor-balloon/ballooneditor~BalloonEditor} instance.
|
|
* The promise returns the created {@link module:editor-balloon/ballooneditor~BalloonEditor} instance.
|
|
|
*/
|
|
*/
|
|
|
- static create( element, config ) {
|
|
|
|
|
|
|
+ static create( elementOrData, config ) {
|
|
|
return new Promise( resolve => {
|
|
return new Promise( resolve => {
|
|
|
- const editor = new this( element, config );
|
|
|
|
|
|
|
+ const editor = new this( elementOrData, config );
|
|
|
|
|
|
|
|
resolve(
|
|
resolve(
|
|
|
editor.initPlugins()
|
|
editor.initPlugins()
|
|
@@ -143,7 +154,7 @@ export default class BalloonEditor extends Editor {
|
|
|
editor.ui.init();
|
|
editor.ui.init();
|
|
|
editor.fire( 'uiReady' );
|
|
editor.fire( 'uiReady' );
|
|
|
} )
|
|
} )
|
|
|
- .then( () => editor.data.init( getDataFromElement( element ) ) )
|
|
|
|
|
|
|
+ .then( () => editor.data.init( isElement( elementOrData ) ? getDataFromElement( elementOrData ) : elementOrData ) )
|
|
|
.then( () => {
|
|
.then( () => {
|
|
|
editor.fire( 'dataReady' );
|
|
editor.fire( 'dataReady' );
|
|
|
editor.fire( 'ready' );
|
|
editor.fire( 'ready' );
|