Sfoglia il codice sorgente

Add support for background-color.

Maciej Gołaszewski 6 anni fa
parent
commit
2652ccd7fc

+ 44 - 10
packages/ckeditor5-table/src/tableediting.js

@@ -113,10 +113,10 @@ export default class TableEditing extends Plugin {
 
 		// Table styles:
 		schema.extend( 'tableCell', {
-			allowAttributes: [ 'border' ]
+			allowAttributes: [ 'border', 'background' ]
 		} );
 		schema.extend( 'table', {
-			allowAttributes: [ 'border' ]
+			allowAttributes: [ 'border', 'background' ]
 		} );
 
 		// General upcast 'border' attribute (requires model border attribute to be allowed).
@@ -138,14 +138,12 @@ export default class TableEditing extends Plugin {
 				name: 'tableCell',
 				key: 'border'
 			},
-			view: modelAttributeValue => {
-				return ( {
-					key: 'style',
-					value: {
-						'border': modelAttributeValue
-					}
-				} );
-			}
+			view: modelAttributeValue => ( {
+				key: 'style',
+				value: {
+					'border': modelAttributeValue
+				}
+			} )
 		} );
 
 		// Properly downcast table border attribute on <table> and not on <figure>.
@@ -158,6 +156,42 @@ export default class TableEditing extends Plugin {
 			writer.setStyle( 'border', attributeNewValue, table );
 		} ) );
 
+		// Upcast background.
+		conversion.for( 'upcast' ).attributeToAttribute( {
+			view: {
+				styles: {
+					'background-color': /[\s\S]+/
+				}
+			},
+			model: {
+				key: 'background',
+				value: viewElement => viewElement.getStyle( 'background-color' )
+			}
+		} );
+
+		// Downcast table cell only (table has own downcast converter).
+		conversion.for( 'downcast' ).attributeToAttribute( {
+			model: {
+				name: 'tableCell',
+				key: 'background'
+			},
+			view: modelAttributeValue => ( {
+				key: 'style',
+				value: {
+					'background-color': modelAttributeValue
+				}
+			} )
+		} );
+
+		conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( 'attribute:background:table', ( evt, data, conversionApi ) => {
+			const { item, attributeNewValue } = data;
+			const { mapper, writer } = conversionApi;
+
+			const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) );
+
+			writer.setStyle( 'background-color', attributeNewValue, table );
+		} ) );
+
 		// Define all the commands.
 		editor.commands.add( 'insertTable', new InsertTableCommand( editor ) );
 		editor.commands.add( 'insertTableRowAbove', new InsertRowCommand( editor, { order: 'above' } ) );

+ 2 - 2
packages/ckeditor5-table/tests/manual/tablestyles.html

@@ -1,6 +1,6 @@
 <div id="editor">
 	<figure>
-		<table style="border: 1px solid green;">
+		<table style="border: 1px solid green;background:#fdfd77;">
 			<thead>
 				<tr>
 					<td><p>Column A</p></td>
@@ -18,7 +18,7 @@
 				</tr>
 				<tr>
 					<td style="border-right:1px solid blue;"><p>A2</p></td>
-					<td><p>B2</p></td>
+					<td style="background:transparent;"><p>B2</p></td>
 					<td><p>C3</p></td>
 				</tr>
 			</tbody>