|
@@ -15,6 +15,59 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
|
import buildModelConverter from '../../../src/conversion/buildmodelconverter';
|
|
import buildModelConverter from '../../../src/conversion/buildmodelconverter';
|
|
|
import buildViewConverter from '../../../src/conversion/buildviewconverter';
|
|
import buildViewConverter from '../../../src/conversion/buildviewconverter';
|
|
|
import UIElement from '../../../src/view/uielement';
|
|
import UIElement from '../../../src/view/uielement';
|
|
|
|
|
+import ContainerElement from '../../../src/view/containerelement';
|
|
|
|
|
+
|
|
|
|
|
+class MyUIElement extends UIElement {
|
|
|
|
|
+ render( domDocument ) {
|
|
|
|
|
+ const root = super.render( domDocument );
|
|
|
|
|
+
|
|
|
|
|
+ root.setAttribute( 'contenteditable', 'false' );
|
|
|
|
|
+ root.classList.add( 'ui-element' );
|
|
|
|
|
+ root.innerHTML = 'UIElement with some <b>structure</b> inside <img src="close.png" />';
|
|
|
|
|
+
|
|
|
|
|
+ return root;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+class UIElementTestPlugin extends Plugin {
|
|
|
|
|
+ init() {
|
|
|
|
|
+ const editor = this.editor;
|
|
|
|
|
+ const document = editor.document;
|
|
|
|
|
+ const editing = editor.editing;
|
|
|
|
|
+ const data = editor.data;
|
|
|
|
|
+ const schema = document.schema;
|
|
|
|
|
+
|
|
|
|
|
+ schema.registerItem( 'figure', '$block' );
|
|
|
|
|
+
|
|
|
|
|
+ buildModelConverter().for( data.modelToView, editing.modelToView )
|
|
|
|
|
+ .fromElement( 'figure' )
|
|
|
|
|
+ .toElement( () => {
|
|
|
|
|
+ return new ContainerElement( 'figure', null, new MyUIElement( 'div' ) );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ buildViewConverter().for( data.viewToModel )
|
|
|
|
|
+ .fromElement( 'figure' )
|
|
|
|
|
+ .toElement( 'figure' );
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+ClassicEditor.create( document.querySelector( '#editor' ), {
|
|
|
|
|
+ plugins: [ Enter, Typing, Paragraph, Undo, UIElementTestPlugin ],
|
|
|
|
|
+ toolbar: [ 'undo', 'redo' ]
|
|
|
|
|
+} );
|
|
|
|
|
+
|
|
|
|
|
+/*
|
|
|
|
|
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
|
|
|
|
|
+import Enter from '@ckeditor/ckeditor5-enter/src/enter';
|
|
|
|
|
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
|
|
|
|
|
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
|
|
|
|
|
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
|
|
|
|
|
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
|
|
|
+
|
|
|
|
|
+import buildModelConverter from '../../../src/conversion/buildmodelconverter';
|
|
|
|
|
+import buildViewConverter from '../../../src/conversion/buildviewconverter';
|
|
|
|
|
+import UIElement from '../../../src/view/uielement';
|
|
|
|
|
+import AttributeElement from '../../../src/view/attributeelement';
|
|
|
|
|
|
|
|
class MyUIElement extends UIElement {
|
|
class MyUIElement extends UIElement {
|
|
|
render( domDocument ) {
|
|
render( domDocument ) {
|
|
@@ -22,7 +75,9 @@ class MyUIElement extends UIElement {
|
|
|
|
|
|
|
|
root.setAttribute( 'contenteditable', 'false' );
|
|
root.setAttribute( 'contenteditable', 'false' );
|
|
|
root.style.backgroundColor = 'red';
|
|
root.style.backgroundColor = 'red';
|
|
|
- root.innerHTML = 'This is UIElement';
|
|
|
|
|
|
|
+ root.style.display = 'inline-block';
|
|
|
|
|
+ root.style.width = '5px';
|
|
|
|
|
+ root.style.height = '5px';
|
|
|
|
|
|
|
|
return root;
|
|
return root;
|
|
|
}
|
|
}
|
|
@@ -36,15 +91,21 @@ class UIElementTestPlugin extends Plugin {
|
|
|
const data = editor.data;
|
|
const data = editor.data;
|
|
|
const schema = document.schema;
|
|
const schema = document.schema;
|
|
|
|
|
|
|
|
- schema.registerItem( 'span', '$inline' );
|
|
|
|
|
|
|
+ // Allow bold attribute on all inline nodes.
|
|
|
|
|
+ editor.document.schema.allow( { name: '$inline', attributes: [ 'strong' ], inside: '$block' } );
|
|
|
|
|
|
|
|
|
|
+ // Build converter from model to view for data and editing pipelines.
|
|
|
buildModelConverter().for( data.modelToView, editing.modelToView )
|
|
buildModelConverter().for( data.modelToView, editing.modelToView )
|
|
|
- .fromElement( 'span' )
|
|
|
|
|
- .toElement( () => new MyUIElement( 'span' ) );
|
|
|
|
|
|
|
+ .fromAttribute( 'strong' )
|
|
|
|
|
+ .toElement( data => {
|
|
|
|
|
+ return new AttributeElement( 'strong', null, [ new MyUIElement( 'span' ) ] );
|
|
|
|
|
+ // return new UIElement( 'strong' );
|
|
|
|
|
+ } );
|
|
|
|
|
|
|
|
|
|
+ // Build converter from view to model for data pipeline.
|
|
|
buildViewConverter().for( data.viewToModel )
|
|
buildViewConverter().for( data.viewToModel )
|
|
|
- .fromElement( 'span' )
|
|
|
|
|
- .toElement( 'span' );
|
|
|
|
|
|
|
+ .fromElement( 'strong' )
|
|
|
|
|
+ .toAttribute( 'strong', true );
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -52,3 +113,5 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
|
|
|
plugins: [ Enter, Typing, Paragraph, Undo, UIElementTestPlugin ],
|
|
plugins: [ Enter, Typing, Paragraph, Undo, UIElementTestPlugin ],
|
|
|
toolbar: [ 'undo', 'redo' ]
|
|
toolbar: [ 'undo', 'redo' ]
|
|
|
} );
|
|
} );
|
|
|
|
|
+
|
|
|
|
|
+ */
|