Ver código fonte

Add toolbar button for creating inline widget in manual test.

Maciej Gołaszewski 6 anos atrás
pai
commit
ecc74fd810

+ 34 - 1
packages/ckeditor5-widget/tests/manual/inline-widget.js

@@ -18,10 +18,12 @@ import Typing from '@ckeditor/ckeditor5-typing/src/typing';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
 class InlineWidget extends Plugin {
 	constructor( editor ) {
 		super( editor );
+
 		editor.model.schema.register( 'placeholder', {
 			allowWhere: '$text',
 			isObject: true,
@@ -65,13 +67,44 @@ class InlineWidget extends Plugin {
 			viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewWriter.createText( modelItem.getAttribute( 'type' ) ) );
 			return widgetElement;
 		}
+
+		this._createToolbarButton();
+	}
+
+	_createToolbarButton() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		editor.ui.componentFactory.add( 'placeholder', locale => {
+			const buttonView = new ButtonView( locale );
+
+			buttonView.set( {
+				label: t( 'Insert placeholder' ),
+				tooltip: true,
+				withText: true
+			} );
+
+			this.listenTo( buttonView, 'execute', () => {
+				const model = editor.model;
+
+				model.change( writer => {
+					const placeholder = writer.createElement( 'placeholder', { type: 'placeholder' } );
+
+					model.insertContent( placeholder );
+
+					writer.setSelection( placeholder, 'on' );
+				} );
+			} );
+
+			return buttonView;
+		} );
 	}
 }
 
 ClassicEditor
 	.create( global.document.querySelector( '#editor' ), {
 		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Widget, InlineWidget ],
-		toolbar: [ 'heading', '|', 'bold', 'undo', 'redo' ]
+		toolbar: [ 'heading', '|', 'bold', '|', 'placeholder', '|', 'undo', 'redo' ]
 	} )
 	.then( editor => {
 		editor.model.document.on( 'change', () => {