|
|
@@ -14,8 +14,10 @@ import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
|
|
|
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
|
|
|
import Undo from '@ckeditor/ckeditor5-undo/src/undo';
|
|
|
import UIElement from '../../../src/view/uielement';
|
|
|
+import Position from '../../../src/view/position';
|
|
|
+import writer from '../../../src/view/writer';
|
|
|
|
|
|
-class MyUIElement extends UIElement {
|
|
|
+class EndingUIElement extends UIElement {
|
|
|
render( domDocument ) {
|
|
|
const root = super.render( domDocument );
|
|
|
|
|
|
@@ -26,6 +28,17 @@ class MyUIElement extends UIElement {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+class MiddleUIElement extends UIElement {
|
|
|
+ render( domDocument ) {
|
|
|
+ const root = super.render( domDocument );
|
|
|
+
|
|
|
+ root.classList.add( 'ui-element' );
|
|
|
+ root.innerHTML = 'X';
|
|
|
+
|
|
|
+ return root;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
class UIElementTestPlugin extends Plugin {
|
|
|
init() {
|
|
|
const editor = this.editor;
|
|
|
@@ -34,7 +47,7 @@ class UIElementTestPlugin extends Plugin {
|
|
|
// Add some UIElement to each paragraph.
|
|
|
editing.modelToView.on( 'insert:paragraph', ( evt, data, consumable, conversionApi ) => {
|
|
|
const viewP = conversionApi.mapper.toViewElement( data.item );
|
|
|
- viewP.appendChildren( new MyUIElement( 'span' ) );
|
|
|
+ viewP.appendChildren( new EndingUIElement( 'span' ) );
|
|
|
}, { priority: 'lowest' } );
|
|
|
}
|
|
|
}
|
|
|
@@ -46,6 +59,18 @@ ClassicEditor
|
|
|
} )
|
|
|
.then( editor => {
|
|
|
window.editor = editor;
|
|
|
+
|
|
|
+ // Add some UI elements.
|
|
|
+ const viewRoot = editor.editing.view.getRoot();
|
|
|
+ const viewText1 = viewRoot.getChild( 0 ).getChild( 0 );
|
|
|
+ const viewText2 = viewRoot.getChild( 1 ).getChild( 0 );
|
|
|
+
|
|
|
+ writer.insert( new Position( viewText1, 20 ), new MiddleUIElement( 'span' ) );
|
|
|
+ writer.insert( new Position( viewText1, 20 ), new MiddleUIElement( 'span' ) );
|
|
|
+ writer.insert( new Position( viewText2, 0 ), new MiddleUIElement( 'span' ) );
|
|
|
+ writer.insert( new Position( viewText2, 6 ), new MiddleUIElement( 'span' ) );
|
|
|
+
|
|
|
+ editor.editing.view.render();
|
|
|
} )
|
|
|
.catch( err => {
|
|
|
console.error( err.stack );
|