Przeglądaj źródła

Docs: Tons of improvements to the feature guide.

Aleksander Nowodzinski 6 lat temu
rodzic
commit
d1d6b7656f

+ 13 - 39
packages/ckeditor5-table/docs/_snippets/features/table-styling.html

@@ -1,26 +1,24 @@
 <div id="snippet-table-styling">
-	<h2>Balance Sheet &amp; Cash Flow Statement Information</h2>
-	<p>(In millions, except DSO)</p>
+	<h3>Balance Sheet &amp; Cash Flow Statement Information</h3>
 	<figure class="table">
 		<table style="border-bottom:1px solid;border-left:1px solid;border-right:1px solid;border-top:1px solid;">
 			<thead>
 				<tr>
-					<th style="background-color:#eee;text-align:left;width:317px;" colspan="1">&nbsp;</th>
+					<th style="background-color:#eee;width:317px;" colspan="1" rowspan="2"><p>&nbsp;</p><p>&nbsp;</p></th>
 					<th style="background-color:#1d7373;text-align:center;width:224px;" colspan="3">Full Year (unaudited)</th>
 					<th style="background-color:#1d7373;text-align:center;width:360px;" colspan="4">2013 (unaudited)</th>
 				</tr>
-			</thead>
-			<tbody>
 				<tr>
-					<th style="background-color:#eee;width:317px;">&nbsp;</th>
-					<td style="background-color:#5ccccc;width:78px;">2011</td>
-					<td style="background-color:#5ccccc;width:73px;">2012</td>
-					<td style="background-color:#5ccccc;width:72px;">2013</td>
-					<td style="background-color:#5ccccc;width:72px;">Q1</td>
-					<td style="background-color:#5ccccc;width:72px;">Q2</td>
-					<td style="background-color:#5ccccc;width:72px;">Q3</td>
-					<td style="background-color:#5ccccc;width:72px;">Q4</td>
+					<th style="background-color:#5ccccc;width:78px;">2011</th>
+					<th style="background-color:#5ccccc;width:73px;">2012</th>
+					<th style="background-color:#5ccccc;width:72px;">2013</th>
+					<th style="background-color:#5ccccc;width:72px;">Q1</th>
+					<th style="background-color:#5ccccc;width:72px;">Q2</th>
+					<th style="background-color:#5ccccc;width:72px;">Q3</th>
+					<th style="background-color:#5ccccc;width:72px;">Q4</th>
 				</tr>
+			</thead>
+			<tbody>
 				<tr>
 					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Cash, Cash Equivalents&nbsp;</strong></th>
 					<td style="width:78px;">$44,626</td>
@@ -32,27 +30,15 @@
 					<td style="width:72px;">$58,717</td>
 				</tr>
 				<tr>
-					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Accounts Receivable</strong>
-					</th>
+					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Accounts Receivable</strong></th>
 					<td style="width:78px;">$5,427</td>
 					<td style="width:73px;">$6,769</td>
-					<td style="background-color:#ffc7c7;border-bottom:2px solid red;border-left:2px solid red;border-right:2px solid red;border-top:2px solid red;text-align:left;width:72px;">$8,098</td>
+					<td style="background-color:#ffc7c7;border-bottom:2px solid red;border-left:2px solid red;border-right:2px solid red;border-top:2px solid red;width:72px;">$8,098</td>
 					<td style="width:72px;">$6,526</td>
 					<td style="width:72px;">$6,792</td>
 					<td style="width:72px;">$7,083</td>
 					<td style="width:72px;">$8,098</td>
 				</tr>
-				<tr>
-					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><i>DSO for Company stand-alone</i>
-					</th>
-					<td style="width:78px;">52</td>
-					<td style="width:73px;">54</td>
-					<td style="width:72px;">53</td>
-					<td style="width:72px;">45</td>
-					<td style="width:72px;">47</td>
-					<td style="width:72px;">47</td>
-					<td style="width:72px;">47</td>
-				</tr>
 				<tr>
 					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Property and Equipment, Net</strong></th>
 					<td style="width:78px;">$9,603</td>
@@ -83,20 +69,8 @@
 					<td style="width:72px;">$5,083</td>
 					<td style="width:72px;">$5,238</td>
 				</tr>
-				<tr>
-					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Capital Expenditures</strong></th>
-					<td style="width:78px;">$3,438</td>
-					<td style="width:73px;">$3,273</td>
-					<td style="width:72px;">$7,358</td>
-					<td style="width:72px;">$1,203</td>
-					<td style="width:72px;">$1,611</td>
-					<td style="width:72px;">$2,289</td>
-					<td style="vertical-align:middle;width:72px;">$2,255</td>
-				</tr>
 			</tbody>
 		</table>
 	</figure>
 </div>
 
-<style>
-</style>

+ 54 - 9
packages/ckeditor5-table/docs/features/table.md

@@ -7,33 +7,43 @@ category: features
 
 The {@link module:table/table~Table} feature offers table creation and editing tools that help content authors bring tabular data into their documents.
 
-## Demo
+## Demos
 
-{@snippet features/table}
+### Basic table features
+
+The editor bellow shows the basic set of table features focusing on the **structure and semantics**. These features allow users to insert new tables into the content, add or remove columns and rows, define headers and merge multiple cells. It is also worth noting that you will find them out–of–the–box in all {@link builds/guides/overview ready–to–use editor builds}.
 
-## Styling tables and table cells
+{@snippet features/table}
 
-Sometimes the default table formatting is not enough or maybe you just want to paste a table from other text editor and preserve as much formatting as possible. This is when {@link module:table/tableproperties~TableProperties table properties} and {@link module:table/tablecellproperties~TableCellProperties table cell properties} plugins come in handy.
+Use the **"Insert table"** button in the toolbar to create new tables. Focus any cell in the table to display the toolbar with buttons that will help you further shape the structure of the table.
 
-Take, for example, a table in the editor below. You may have noticed that there are plenty of table cells with non–standard formatting like background colors or borders, especially when compared with the previous demo. Put a selection in the table and click the **"Table properties"** button in the toolbar to open a pop–up with multiple options that will allow you to shape the look of the entire table to your needs. You can change the border of the entire table, set its background color, change its dimensions or tune the alignment for the best look of your content.
+### Table and cell styling tools
 
-Now if you are satisfied with the look of your table, it is time to focus on individual cells. Put the caret in the table cell you would like to change and click the **"Cell properties"** button in the toolbar. A now–familiar form with styling options will show up, but this time the adjustments will apply to an individual table cell. If you look closely, you may also spot some new fields: "Padding" and "Table cell text alignment". Use the former to give the text in a cell some space around it. The latter will be useful when your table cell requires a non–standard text alignment, be it horizontal or vertical.
+In addition to the default table features described in the [previous section](#basic-table-features), the editor below comes with some additional tools that will help you modify **the look of tables and table cells**, for instance, border color and style, background color, padding, or text alignment.
 
 {@snippet features/table-styling}
 
+Put the caret anywhere inside the table and click the **"Table properties"** button in the toolbar to open a pop–up with multiple options that will allow you to shape the look of the entire table to your needs. If you click the **"Cell properties"** button, a similar interface will appear but for individual table cells.
+
+<info-box>
+	By default, table styling tools are not included in {@link builds/guides/overview ready–to–use editor builds} and must be installed separately. See the [installation](#table-and-cell-styling-tools-2) section to learn how to enable them in your editor.
+</info-box>
+
 ## Installation
 
+### Basic table features
+
 <info-box info>
-	This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom rich text editor.
+	The basic table features are enabled by default in all builds. The installation instructions are for developers interested in building their own, custom rich text editor.
 </info-box>
 
-To add this feature to your editor, install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package:
+To add only the basic tables features to your editor, install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package:
 
 ```bash
 npm install --save @ckeditor/ckeditor5-table
 ```
 
-Then add `Table` and `TableToolbar` plugins to your plugin list and configure the table toolbar:
+Then add the `Table` and `TableToolbar` plugins to your plugin list and configure the table toolbar:
 
 ```js
 import Table from '@ckeditor/ckeditor5-table/src/table';
@@ -51,6 +61,41 @@ ClassicEditor
 	.catch( ... );
 ```
 
+### Table and cell styling tools
+
+To enable not only the [basic table features](#basic-table-features-2) but also the rich table and cell styling tools in your editor, install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-table
+```
+
+Then add the `Table`, `TableToolbar`, **`TableProperties`**, and **`TableCellProperties`** plugins to your plugin list and configure the table toolbar:
+
+```js
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
+import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
+import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Table, TableToolbar, TableProperties, TableCellProperties, Bold, ... ],
+		toolbar: [ 'insertTable', ... ],
+		table: {
+			contentToolbar: [
+				'tableColumn', 'tableRow', 'mergeTableCells',
+				'tableProperties', 'tableCellProperties'
+			]
+		}
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
 ## Block vs inline content in table cells
 
 The table feature allows creating block content (like paragraphs, lists, headings, etc.) in table cells. However, if a table cell contains just one paragraph and this paragraph has no special attributes (like text alignment), this cell content is considered "inline" and the paragraph is not rendered.