Sfoglia il codice sorgente

Improved the manual test.

Piotrek Koszuliński 9 anni fa
parent
commit
3983235dc6

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

@@ -21,3 +21,25 @@
 
 	<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>
+
+<h2>Native contentEditable</h2>
+
+<div contenteditable="true" id="native" style="border: solid 2px blue">
+	<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>

+ 18 - 5
packages/ckeditor5-clipboard/tests/manual/copycut.js

@@ -39,11 +39,11 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 
 	editor.editing.view.on( 'paste', ( evt, data ) => {
 		console.clear();
-		onNativeEvent( evt, data );
+		onViewEvent( 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( 'paste', onViewEvent );
+	editor.editing.view.on( 'copy', onViewEvent, { priority: 'lowest' } );
+	editor.editing.view.on( 'cut', onViewEvent, { priority: 'lowest' } );
 
 	editor.editing.view.on( 'clipboardInput', onPipelineEvent );
 	editor.editing.view.on( 'clipboardOutput', ( evt, data ) => {
@@ -51,7 +51,7 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 		onPipelineEvent( evt, data );
 	} );
 
-	function onNativeEvent( evt, data ) {
+	function onViewEvent( evt, data ) {
 		console.log( `----- ${ evt.name } -----` );
 		console.log( 'text/html\n', data.dataTransfer.getData( 'text/html' ) );
 	}
@@ -64,3 +64,16 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 .catch( err => {
 	console.error( err.stack );
 } );
+
+document.getElementById( 'native' ).addEventListener( 'paste', onNativeEvent );
+document.getElementById( 'native' ).addEventListener( 'copy', onNativeEvent );
+document.getElementById( 'native' ).addEventListener( 'cut', onNativeEvent );
+
+function onNativeEvent( evt ) {
+	console.clear();
+	console.log( `----- native ${ evt.type } -----` );
+
+	if ( evt.type == 'paste' ) {
+		console.log( 'text/html\n', evt.clipboardData.getData( 'text/html' ) );
+	}
+}

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

@@ -1,3 +1,7 @@
 @bender-ui: collapsed
 
 ## Copy and cut
+
+Play with copy and cut. Paste copied content.
+
+Compare the results with the native editable. Don't expect that they behave identically.