浏览代码

Enhance clipboard manual test.

Maciej Gołaszewski 5 年之前
父节点
当前提交
61cc4f2f63

+ 62 - 53
packages/ckeditor5-table/tests/manual/tableclipboard.html

@@ -11,65 +11,74 @@
 
 
 <div style="display:flex">
 <div style="display:flex">
 	<div style="flex:1;">
 	<div style="flex:1;">
-		<div id="editor">
-			<h3>A simple table to test selection:</h3>
-			<table>
-				<thead>
-					<tr>
-						<td>0</td>
-						<td>1</td>
-						<td>2</td>
-						<td>3</td>
-						<td>4</td>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>a</td>
-						<td>b</td>
-						<td>c</td>
-						<td>d</td>
-						<td>e</td>
-					</tr>
-					<tr>
-						<td>f</td>
-						<td>g</td>
-						<td>h</td>
-						<td>i</td>
-						<td>j</td>
-					</tr>
-					<tr>
-						<td>k</td>
-						<td>l</td>
-						<td>m</td>
-						<td>n</td>
-						<td>o</td>
-					</tr>
-					<tr>
-						<td>p</td>
-						<td>q</td>
-						<td>r</td>
-						<td>s</td>
-						<td>t</td>
-					</tr>
-				</tbody>
-			</table>
 
 
-			<h3>A complex table</h3>
+		<h3>A "content" test editor</h3>
 
 
-			<figure class="table">
-				<table>
+		<div id="editor-content">
+			<figure class="table" style="width:60%;">
+				<table
+					style="background-color:hsl(0,0%,90%);border-bottom:2px solid hsl(30, 75%, 60%);border-left:2px solid hsl(30, 75%, 60%);border-right:2px solid hsl(30, 75%, 60%);border-top:2px solid hsl(30, 75%, 60%);">
 					<thead>
 					<thead>
 						<tr>
 						<tr>
+							<th>0</th>
+							<th>1</th>
+							<th>2</th>
+							<th>3</th>
+							<th>4</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
 							<td>a</td>
 							<td>a</td>
 							<td>b</td>
 							<td>b</td>
-							<td>c</td>
+							<td style="border-bottom:4px dashed hsl(0, 75%, 60%);border-left:4px dashed hsl(0, 75%, 60%);border-right:4px dashed hsl(0, 75%, 60%);border-top:4px dashed hsl(0, 75%, 60%);height:30px;text-align:right;vertical-align:top;width:30px;">
+								c
+							</td>
 							<td>d</td>
 							<td>d</td>
-							<td>e</td>
-							<td>f</td>
-							<td>g</td>
-							<td>h</td>
-							<td>i</td>
+							<td><i><strong>e</strong></i></td>
+						</tr>
+						<tr>
+							<td style="background-color:hsl(210,75%,60%);">f</td>
+							<td style="background-color:hsl(210,75%,60%);">g</td>
+							<td style="background-color:hsl(210,75%,60%);">h</td>
+							<td style="background-color:hsl(210,75%,60%);">i</td>
+							<td style="background-color:hsl(210,75%,60%);"><i><strong>j</strong></i></td>
+						</tr>
+						<tr>
+							<td>k</td>
+							<td>l</td>
+							<td>m</td>
+							<td>n</td>
+							<td><i><strong>o</strong></i></td>
+						</tr>
+						<tr>
+							<td>p</td>
+							<td>q</td>
+							<td>r</td>
+							<td>s</td>
+							<td>t</td>
+						</tr>
+					</tbody>
+				</table>
+			</figure>
+		</div>
+
+		<h3>A "geometry" test editor</h3>
+
+		<div id="editor-geometry">
+			<figure class="table">
+				<table>
+					<thead>
+						<tr>
+							<th>a</th>
+							<th>b</th>
+							<th>c</th>
+							<th>d</th>
+							<th>e</th>
+							<th>f</th>
+							<th>g</th>
+							<th>h</th>
+							<th>i</th>
 						</tr>
 						</tr>
 					</thead>
 					</thead>
 					<tbody>
 					<tbody>
@@ -78,7 +87,7 @@
 							<td>01</td>
 							<td>01</td>
 							<td rowspan="4">02</td>
 							<td rowspan="4">02</td>
 							<td>03</td>
 							<td>03</td>
-							<td rowspan="7" colspan="2">04</td>
+							<td colspan="2" rowspan="7">04</td>
 							<td>07</td>
 							<td>07</td>
 							<td>07</td>
 							<td>07</td>
 							<td>08</td>
 							<td>08</td>

+ 28 - 49
packages/ckeditor5-table/tests/manual/tableclipboard.js

@@ -3,63 +3,42 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
-/* globals console, window, document, global */
+/* globals console, document, window, CKEditorInspector */
 
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import Table from '../../src/table';
 import Table from '../../src/table';
 import TableToolbar from '../../src/tabletoolbar';
 import TableToolbar from '../../src/tabletoolbar';
-import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import TableSelection from '../../src/tableselection';
 import TableSelection from '../../src/tableselection';
 import TableClipboard from '../../src/tableclipboard';
 import TableClipboard from '../../src/tableclipboard';
+import TableProperties from '../../src/tableproperties';
+import TableCellProperties from '../../src/tablecellproperties';
 
 
-ClassicEditor
-	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Table, TableToolbar, TableSelection, TableClipboard ],
-		toolbar: [
-			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
-		],
-		table: {
-			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
-		}
-	} )
-	.then( editor => {
-		window.editor = editor;
-		editor.model.document.on( 'change', () => {
-			printModelContents( editor );
-		} );
-
-		printModelContents( editor );
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );
+window.editors = {};
 
 
-const modelDiv = global.document.querySelector( '#model' );
+createEditor( '#editor-content', 'content' );
+createEditor( '#editor-geometry', 'geometry' );
 
 
-function printModelContents( editor ) {
-	modelDiv.innerHTML = formatTable( getData( editor.model ) )
-		.replace( /</g, '&lt;' )
-		.replace( />/g, '&gt;' )
-		.replace( /\n/g, '<br>' )
-		.replace( /\[/g, '<span class="print-selected">[' )
-		.replace( /]/g, ']</span>' );
-}
-
-function formatTable( tableString ) {
-	return tableString
-		.replace( /<table>/g, '\n<table' )
-		.replace( /<table /g, '\n<table ' )
-		.replace( /<tableRow>/g, '\n<tableRow>\n    ' )
-		.replace( /<thead>/g, '\n<thead>\n    ' )
-		.replace( /<tbody>/g, '\n<tbody>\n    ' )
-		.replace( /<tr>/g, '\n<tr>\n    ' )
-		.replace( /<\/tableRow>/g, '\n</tableRow>' )
-		.replace( /<\/thead>/g, '\n</thead>' )
-		.replace( /<\/tbody>/g, '\n</tbody>' )
-		.replace( /<\/tr>/g, '\n</tr>' )
-		.replace( /<\/table>/g, '\n</table>' )
-		.replace( /tableCell/g, 'cell' )
-		.replace( /tableRow/g, 'row' )
-		.replace( /paragraph/g, 'p' );
+function createEditor( target, inspectorName ) {
+	ClassicEditor
+		.create( document.querySelector( target ), {
+			plugins: [ ArticlePluginSet, Table, TableToolbar, TableSelection, TableClipboard, TableProperties, TableCellProperties ],
+			toolbar: [
+				'heading', '|',
+				'insertTable', '|',
+				'bold', 'italic', 'link', '|',
+				'bulletedList', 'numberedList', 'blockQuote', '|',
+				'undo', 'redo'
+			],
+			table: {
+				contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ]
+			}
+		} )
+		.then( editor => {
+			window.editors[ inspectorName ] = editor;
+			CKEditorInspector.attach( inspectorName, editor );
+		} )
+		.catch( err => {
+			console.error( err.stack );
+		} );
 }
 }