8
0
Quellcode durchsuchen

Merge branch 'master' into i/ckeditor5-dev/481

Maciej Gołaszewski vor 5 Jahren
Ursprung
Commit
7197b4c92d

+ 105 - 0
packages/ckeditor5-clipboard/docs/framework/guides/deep-dive/clipboard.md

@@ -93,6 +93,111 @@ editor.plugins.get( 'Clipboard' ).on( 'inputTransformation', ( evt, data ) => {
 }, { priority: 'lowest' } );
 ```
 
+### Paste as plain text plugin example
+
+You can use knowledge from previous sections to create a full plugin which will allow users to paste the content as plain text while the feature is toggled on.
+
+If you are not familiar with creating plugins in CKEditor 5, we would advise starting from reading {@link framework/guides/creating-simple-plugin Creating a simple plugin} guide to get a better understanding of what's going on in the code below.
+
+```js
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import Command from '@ckeditor/ckeditor5-core/src/command';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+import plainTextToHtml from '@ckeditor/ckeditor5-clipboard/src/utils/plaintexttohtml';
+
+class PastePlainText extends Plugin {
+	static get pluginName() {
+		return 'PastePlainText'
+	}
+
+	static get requires() {
+		return [ PastePlainTextUI, PastePlainTextCommand ]
+	}
+
+	init() {
+		const editor = this.editor;
+
+		editor.commands.add( 'pastePlainText', new PastePlainTextCommand( editor ) );
+
+		// Logic responsible for converting HTML to plain text.
+		const clipboardPlugin = editor.plugins.get( 'Clipboard' );
+		const command = editor.commands.get( 'pastePlainText' );
+		const editingView = editor.editing.view;
+
+		editingView.document.on( 'clipboardInput', ( evt, data ) => {
+			if ( editor.isReadOnly || !command.value ) {
+				return;
+			}
+
+			const dataTransfer = data.dataTransfer;
+			let content = plainTextToHtml( dataTransfer.getData( 'text/plain' ) );
+			content = clipboardPlugin._htmlDataProcessor.toView( content );
+			clipboardPlugin.fire( 'inputTransformation', { content, dataTransfer } );
+			editingView.scrollToTheSelection();
+
+			evt.stop();
+		} );
+	}
+};
+
+class PastePlainTextUI extends Plugin {
+	init() {
+		const editor = this.editor;
+
+		editor.ui.componentFactory.add( 'pastePlainText', locale => {
+			const view = new ButtonView( locale );
+			const command = editor.commands.get( 'pastePlainText' );
+
+			view.set( {
+				label: 'Paste as plain text',
+				withText: true,
+				tooltip: true,
+				isToggleable: true
+			} );
+
+			// Callback executed once the button is clicked.
+			view.on( 'execute', () => {
+				editor.execute( 'pastePlainText' );
+			} );
+
+			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+			return view;
+		} );
+	}
+};
+
+class PastePlainTextCommand extends Command {
+	refresh() {
+		// Disable the command if the editor is in read-only mode.
+		this.isEnabled = !this.editor.isReadOnly;
+	}
+
+	execute() {
+		// Activate pasting plain text.
+		this.value = !this.value;
+	}
+}
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Essentials, Paragraph, Bold, Italic, PastePlainText ],
+		toolbar: [ 'bold', 'italic', 'pastePlainText' ],
+		// ...
+	} )
+	.catch( error => {
+    	console.log( error );
+	} );
+```
+
 ## Output pipeline
 
 The output pipeline is the equivalent of the input pipeline but for the copy and cut operations.