|
@@ -17,15 +17,21 @@ import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement
|
|
|
import '../theme/theme.scss';
|
|
import '../theme/theme.scss';
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * The balloon editor. Uses an inline editable and a toolbar based
|
|
|
|
|
|
|
+ * {@glink builds/guides/overview#Balloon-editor Balloon editor} - Uses an inline editable and a toolbar based
|
|
|
* on the {@link module:ui/toolbar/contextual/contextualtoolbar~ContextualToolbar}.
|
|
* on the {@link module:ui/toolbar/contextual/contextualtoolbar~ContextualToolbar}.
|
|
|
*
|
|
*
|
|
|
|
|
+ * In order to create a Balloon editor, use the
|
|
|
|
|
+ * {@link module:editor-balloon/ballooneditor~BalloonEditor#create `BalloonEditor.create()`} method.
|
|
|
|
|
+ *
|
|
|
* @extends module:core/editor/standardeditor~StandardEditor
|
|
* @extends module:core/editor/standardeditor~StandardEditor
|
|
|
*/
|
|
*/
|
|
|
export default class BalloonEditor extends StandardEditor {
|
|
export default class BalloonEditor extends StandardEditor {
|
|
|
/**
|
|
/**
|
|
|
* Creates an instance of the balloon editor.
|
|
* Creates an instance of the balloon editor.
|
|
|
*
|
|
*
|
|
|
|
|
+ * <strong>Note:</strong> do not use the constructor to create editor instances. Use static
|
|
|
|
|
+ * {@link module:editor-balloon/ballooneditor~BalloonEditor#create BalloonEditor.create()} method instead.
|
|
|
|
|
+ *
|
|
|
* @param {HTMLElement} element The DOM element that will be the source for the created editor.
|
|
* @param {HTMLElement} element The DOM element that will be the source for the created editor.
|
|
|
* @param {Object} config The editor configuration.
|
|
* @param {Object} config The editor configuration.
|
|
|
*/
|
|
*/
|
|
@@ -61,16 +67,36 @@ export default class BalloonEditor extends StandardEditor {
|
|
|
/**
|
|
/**
|
|
|
* Creates a balloon editor instance.
|
|
* Creates a balloon editor instance.
|
|
|
*
|
|
*
|
|
|
- * BalloonEditor.create( document.querySelector( '#editor' ), {
|
|
|
|
|
- * plugins: [ Delete, Enter, Typing, Paragraph, Undo, Bold, Italic ],
|
|
|
|
|
- * toolbar: [ 'bold', 'italic' ]
|
|
|
|
|
- * } )
|
|
|
|
|
- * .then( editor => {
|
|
|
|
|
- * console.log( 'Editor was initialized', editor );
|
|
|
|
|
- * } )
|
|
|
|
|
- * .catch( err => {
|
|
|
|
|
- * console.error( err.stack );
|
|
|
|
|
- * } );
|
|
|
|
|
|
|
+ * Creating instance when using {@glink builds/index CKEditor build}:
|
|
|
|
|
+ *
|
|
|
|
|
+ * BalloonEditor
|
|
|
|
|
+ * .create( document.querySelector( '#editor' ) )
|
|
|
|
|
+ * .then( editor => {
|
|
|
|
|
+ * console.log( 'Editor was initialized', editor );
|
|
|
|
|
+ * } )
|
|
|
|
|
+ * .catch( err => {
|
|
|
|
|
+ * console.error( err.stack );
|
|
|
|
|
+ * } );
|
|
|
|
|
+ *
|
|
|
|
|
+ * Creating instance when using CKEditor from source (make sure to specify the list of plugins to load and the toolbar):
|
|
|
|
|
+ *
|
|
|
|
|
+ * import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
|
|
|
|
|
+ * import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
|
|
|
|
|
+ * import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
|
|
|
|
|
+ * import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
|
|
|
|
|
+ * import ...
|
|
|
|
|
+ *
|
|
|
|
|
+ * BalloonEditor
|
|
|
|
|
+ * .create( document.querySelector( '#editor' ), {
|
|
|
|
|
+ * plugins: [ Essentials, Bold, Italic, ... ],
|
|
|
|
|
+ * toolbar: [ 'bold', 'italic', ... ]
|
|
|
|
|
+ * } )
|
|
|
|
|
+ * .then( editor => {
|
|
|
|
|
+ * console.log( 'Editor was initialized', editor );
|
|
|
|
|
+ * } )
|
|
|
|
|
+ * .catch( err => {
|
|
|
|
|
+ * console.error( err.stack );
|
|
|
|
|
+ * } );
|
|
|
*
|
|
*
|
|
|
* @param {HTMLElement} element See {@link #constructor}'s parameters.
|
|
* @param {HTMLElement} element See {@link #constructor}'s parameters.
|
|
|
* @param {Object} config See {@link #constructor}'s parameters.
|
|
* @param {Object} config See {@link #constructor}'s parameters.
|