Explorar el Código

Initial implementation.

Piotrek Koszuliński hace 9 años
padre
commit
c3d94df797

+ 21 - 1
packages/ckeditor5-clipboard/src/clipboard.js

@@ -81,7 +81,7 @@ export default class Clipboard extends Feature {
 
 		editingView.addObserver( ClipboardObserver );
 
-		// The clipboard pipeline.
+		// The clipboard paste pipeline.
 
 		this.listenTo( editingView, 'paste', ( evt, data ) => {
 			const dataTransfer = data.dataTransfer;
@@ -117,6 +117,26 @@ export default class Clipboard extends Feature {
 				} );
 			}
 		}, { priority: 'low' } );
+
+		// The clipboard copy/cut pipeline.
+
+		const onCopyCut = ( evt, data ) => {
+			const dataTransfer = data.dataTransfer;
+			const content = editor.data.toView( editor.data.getSelectedContent() );
+
+			data.preventDefault();
+
+			editingView.fire( 'clipboardOutput', { dataTransfer, content } );
+		};
+
+		this.listenTo( editingView, 'copy', onCopyCut, { priority: 'low' } );
+		this.listenTo( editingView, 'cut', onCopyCut, { priority: 'low' } );
+
+		this.listenTo( editingView, 'clipboardOutput', ( evt, data ) => {
+			if ( !data.content.isEmpty ) {
+				data.dataTransfer.setData( 'text/html', this._htmlDataProcessor.toData( data.content ) );
+			}
+		}, { priority: 'low' } );
 	}
 }
 

+ 1 - 1
packages/ckeditor5-clipboard/src/clipboardobserver.js

@@ -19,7 +19,7 @@ export default class ClipboardObserver extends DomEventObserver {
 	constructor( doc ) {
 		super( doc );
 
-		this.domEventType = 'paste';
+		this.domEventType = [ 'paste', 'copy', 'cut' ];
 	}
 
 	onDomEvent( domEvent ) {

+ 4 - 0
packages/ckeditor5-clipboard/src/datatransfer.js

@@ -30,4 +30,8 @@ export default class DataTransfer {
 	getData( type ) {
 		return this._native.getData( type );
 	}
+
+	setData( type, data ) {
+		this._native.setData( type, data );
+	}
 }

+ 23 - 0
packages/ckeditor5-clipboard/tests/manual/copycut.html

@@ -0,0 +1,23 @@
+<head>
+	<link rel="stylesheet" href="%APPS_DIR%ckeditor/build/modules/amd/theme/ckeditor.css">
+</head>
+
+<div id="editor">
+	<h2>About CKEditor&nbsp;5, v0.3.0</h2>
+
+	<p>This is the <a href="http://ckeditor.com/blog/Third-Developer-Preview-of-CKEditor-5-Available">third developer preview</a> of <a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a>.</p>
+
+	<p>After 2 years of work, building the next generation editor from scratch and closing over 670 tickets, we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
+
+	<h3>Notes</h3>
+
+	<p><a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a> is <em>under heavy development</em> and this demo is not production-ready software. For example:</p>
+
+	<ul>
+		<li><strong>only Chrome, Opera and Safari are supported</strong>,</li>
+		<li>Firefox requires enabling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">&ldquo;dom.select_events.enabled&rdquo;</a> option,</li>
+		<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">support for pasting</a> is under development.</li>
+	</ul>
+
+	<p>It has <em>bugs</em> that we are aware of – and that we will be working on in the next few iterations of the project. Stay tuned for some updates soon!</p>
+</div>

+ 66 - 0
packages/ckeditor5-clipboard/tests/manual/copycut.js

@@ -0,0 +1,66 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '/ckeditor5/editor-classic/classic.js';
+import Typing from '/ckeditor5/typing/typing.js';
+import Paragraph from '/ckeditor5/paragraph/paragraph.js';
+import Undo from '/ckeditor5/undo/undo.js';
+import Enter from '/ckeditor5/enter/enter.js';
+import Clipboard from '/ckeditor5/clipboard/clipboard.js';
+import Link from '/ckeditor5/link/link.js';
+import List from '/ckeditor5/list/list.js';
+import Heading from '/ckeditor5/heading/heading.js';
+import Bold from '/ckeditor5/basic-styles/bold.js';
+import Italic from '/ckeditor5/basic-styles/italic.js';
+
+import { stringify as stringifyView } from '/ckeditor5/engine/dev-utils/view.js';
+
+ClassicEditor.create( document.querySelector( '#editor' ), {
+	features: [
+		Typing,
+		Paragraph,
+		Undo,
+		Enter,
+		Clipboard,
+		Link,
+		List,
+		Heading,
+		Bold,
+		Italic
+	],
+	toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'undo', 'redo' ]
+} )
+.then( editor => {
+	window.editor = editor;
+
+	editor.editing.view.on( 'paste', ( evt, data ) => {
+		console.clear();
+		onNativeEvent( evt, data );
+	} );
+	editor.editing.view.on( 'paste', onNativeEvent );
+	editor.editing.view.on( 'copy', onNativeEvent, { priority: 'lowest' } );
+	editor.editing.view.on( 'cut', onNativeEvent, { priority: 'lowest' } );
+
+	editor.editing.view.on( 'clipboardInput', onPipelineEvent );
+	editor.editing.view.on( 'clipboardOutput', ( evt, data ) => {
+		console.clear();
+		onPipelineEvent( evt, data );
+	} );
+
+	function onNativeEvent( evt, data ) {
+		console.log( `----- ${ evt.name } -----` );
+		console.log( 'text/html\n', data.dataTransfer.getData( 'text/html' ) );
+	}
+
+	function onPipelineEvent( evt, data ) {
+		console.log( `----- ${ evt.name } -----` );
+		console.log( 'stringify( data.content )\n', stringifyView( data.content ) );
+	}
+} )
+.catch( err => {
+	console.error( err.stack );
+} );

+ 3 - 0
packages/ckeditor5-clipboard/tests/manual/copycut.md

@@ -0,0 +1,3 @@
+@bender-ui: collapsed
+
+## Copy and cut