|
|
@@ -3,9 +3,10 @@
|
|
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
|
*/
|
|
|
|
|
|
-/* globals console, document, window, Event */
|
|
|
+/* globals console, document, window */
|
|
|
|
|
|
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
|
|
|
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
|
|
|
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
|
|
|
|
|
|
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
|
@@ -19,6 +20,10 @@ import InputObserver from '../../../../src/view/observer/inputobserver';
|
|
|
import KeyObserver from '../../../../src/view/observer/keyobserver';
|
|
|
import MouseObserver from '../../../../src/view/observer/mouseobserver';
|
|
|
import MouseEventsObserver from '@ckeditor/ckeditor5-table/src/tablemouse/mouseeventsobserver';
|
|
|
+import DeleteObserver from '@ckeditor/ckeditor5-typing/src/deleteobserver';
|
|
|
+import ClipboardObserver from '@ckeditor/ckeditor5-clipboard/src/clipboardobserver';
|
|
|
+import EnterObserver from '@ckeditor/ckeditor5-enter/src/enterobserver';
|
|
|
+import ImageLoadObserver from '@ckeditor/ckeditor5-image/src/image/imageloadobserver';
|
|
|
|
|
|
class SimpleWidgetEditing extends Plugin {
|
|
|
static get requires() {
|
|
|
@@ -73,11 +78,13 @@ class SimpleWidgetEditing extends Plugin {
|
|
|
<legend>Ignored container with <strong>data-cke-ignore-events="true"</strong></legend>
|
|
|
<input>
|
|
|
<button>Click!</button>
|
|
|
+ <img src="https://placekitten.com/30/30" height="30">
|
|
|
</fieldset>
|
|
|
<fieldset>
|
|
|
<legend>Regular container</legend>
|
|
|
<input>
|
|
|
<button>Click!</button>
|
|
|
+ <img src="https://placekitten.com/30/30" height="30">
|
|
|
</fieldset>
|
|
|
`;
|
|
|
} );
|
|
|
@@ -98,58 +105,42 @@ class SimpleWidgetEditing extends Plugin {
|
|
|
[ InputObserver, [ 'beforeinput' ] ],
|
|
|
[ KeyObserver, [ 'keydown', 'keyup' ] ],
|
|
|
[ MouseEventsObserver, [ 'mousemove', 'mouseup', 'mouseleave' ] ],
|
|
|
- [ MouseObserver, [ 'mousedown' ] ]
|
|
|
+ [ MouseObserver, [ 'mousedown' ] ],
|
|
|
+ [ ClipboardObserver, [ 'paste', 'copy', 'cut', 'drop', 'dragover' ] ], // It's inheriting domEventObserver
|
|
|
+ [ DeleteObserver, [ 'delete' ] ], // Is ignored for some reason, even though there's no explicit support.
|
|
|
+ [ EnterObserver, [ 'enter' ] ], // Is ignored for some reason, even though there's no explicit support.
|
|
|
+ [ ImageLoadObserver, [ 'imageLoaded' ] ]
|
|
|
] );
|
|
|
|
|
|
observers.forEach( ( events, observer ) => {
|
|
|
view.addObserver( observer );
|
|
|
|
|
|
events.forEach( eventName => {
|
|
|
- this.listenTo( view.document, eventName, () => {
|
|
|
- console.log( `Received ${ eventName } event.` );
|
|
|
+ this.listenTo( view.document, eventName, ( event, eventData ) => {
|
|
|
+ if ( eventName.startsWith( 'mouse' ) ) {
|
|
|
+ console.log( `Received ${ eventName } event.` );
|
|
|
+ } else {
|
|
|
+ console.log( `Received ${ eventName } event. Target: `, eventData.domTarget || eventData.target );
|
|
|
+ }
|
|
|
} );
|
|
|
} );
|
|
|
} );
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-class SimpleWidgetUI extends Plugin {}
|
|
|
-
|
|
|
class SimpleWidget extends Plugin {
|
|
|
static get requires() {
|
|
|
- return [ SimpleWidgetEditing, SimpleWidgetUI ];
|
|
|
+ return [ SimpleWidgetEditing ];
|
|
|
}
|
|
|
}
|
|
|
|
|
|
ClassicEditor
|
|
|
.create( document.querySelector( '#editor' ), {
|
|
|
- plugins: [ Essentials, SimpleWidget ]
|
|
|
+ plugins: [ Essentials, Paragraph, SimpleWidget ]
|
|
|
} )
|
|
|
.then( editor => {
|
|
|
window.editor = editor;
|
|
|
- addEventDispatcherForButtons( editor, 'click' );
|
|
|
} )
|
|
|
.catch( error => {
|
|
|
console.error( error.stack );
|
|
|
} );
|
|
|
-
|
|
|
-function addEventDispatcherForButtons( editor, eventName ) {
|
|
|
- const view = editor.editing.view;
|
|
|
- const container = Array
|
|
|
- .from( view.document.getRoot().getChildren() )
|
|
|
- .find( element => element.hasClass( 'simple-widget-container' ) );
|
|
|
-
|
|
|
- view.domConverter
|
|
|
- .viewToDom( container )
|
|
|
- .querySelectorAll( 'button' )
|
|
|
- .forEach( button => {
|
|
|
- button.addEventListener( 'click', event => {
|
|
|
- if ( !event.isTrusted ) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- console.log( `Dispatched ${ eventName } event.` );
|
|
|
- button.dispatchEvent( new Event( eventName, { bubbles: true } ) );
|
|
|
- } );
|
|
|
- } );
|
|
|
-}
|