ソースを参照

Merge pull request #10 from ckeditor/t/9

Internal: Font size should include its content styles. Closes #9.
Piotrek Koszuliński 7 年 前
コミット
323cc274b0

+ 0 - 17
packages/ckeditor5-font/docs/_snippets/features/build-font-source.html

@@ -1,17 +0,0 @@
-<style>
-	.text-tiny {
-		font-size: 0.7em;
-	}
-
-	.text-small {
-		font-size: 0.85em;
-	}
-
-	.text-big {
-		font-size: 1.4em;
-	}
-
-	.text-huge {
-		font-size: 1.8em;
-	}
-</style>

+ 15 - 13
packages/ckeditor5-font/docs/features/font.md

@@ -13,7 +13,7 @@ The {@link module:font/font~Font} plugin enables the following features in the e
 
 
 {@snippet features/font}
 {@snippet features/font}
 
 
-## Configuring the font family
+## Configuring the font family feature
 
 
 It is possible to configure which font family options are supported by the editor. Use the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option to do so.
 It is possible to configure which font family options are supported by the editor. Use the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option to do so.
 
 
@@ -41,7 +41,7 @@ ClassicEditor
 
 
 {@snippet features/custom-font-family-options}
 {@snippet features/custom-font-family-options}
 
 
-## Configuring the font size
+## Configuring the font size feature
 
 
 It is possible to configure which font size options are supported by the editor. Use the {@link module:font/fontsize~FontSizeConfig#options `fontSize.options`} configuration option to do so.
 It is possible to configure which font size options are supported by the editor. Use the {@link module:font/fontsize~FontSizeConfig#options `fontSize.options`} configuration option to do so.
 
 
@@ -49,13 +49,14 @@ Use the special `'normal'` keyword to use the default font size defined in the w
 
 
 The font size feature supports two ways of defining configuration: using  predefined (named) presets or simple numeric values.
 The font size feature supports two ways of defining configuration: using  predefined (named) presets or simple numeric values.
 
 
-### Configuration using the predefined named presets
+### Using the predefined presets
 
 
 The font size feature defines 4 named presets:
 The font size feature defines 4 named presets:
-- `'tiny'`
-- `'small'`
-- `'big'`
-- `'huge'`
+
+* `'tiny'`
+* `'small'`
+* `'big'`
+* `'huge'`
 
 
 Each size is represented in the view as a `<span>` element with the `text-*` class. For example, the `'tiny'` preset looks as follows in the editor data:
 Each size is represented in the view as a `<span>` element with the `text-*` class. For example, the `'tiny'` preset looks as follows in the editor data:
 
 
@@ -63,11 +64,9 @@ Each size is represented in the view as a `<span>` element with the `text-*` cla
 <span class="text-tiny">...</span>
 <span class="text-tiny">...</span>
 ```
 ```
 
 
-The CSS definition for the classes (presets) must be included:
-- in the web page's styles where the editor runs (backend),
-- in the web page's styles where the edited content is rendered (frontend)
+The CSS definition for the classes (presets) must be included in the web page's styles where the edited content is rendered.
 
 
-Here's an example of the font size CSS classes:
+Here is an example of the font size CSS classes:
 
 
 ```css
 ```css
 .text-tiny {
 .text-tiny {
@@ -109,7 +108,7 @@ ClassicEditor
 
 
 {@snippet features/custom-font-size-named-options}
 {@snippet features/custom-font-size-named-options}
 
 
-### Configuration using numerical values
+### Using numerical values
 
 
 The font feature also supports numerical values.
 The font feature also supports numerical values.
 
 
@@ -120,7 +119,7 @@ For example, `14` will be represented in the editor data as:
 <span style="font-size: 14px">...</span>
 <span style="font-size: 14px">...</span>
 ```
 ```
 
 
-Here's an example of the editor that supports numerical font sizes. Note that `'normal'` is controlled by the default styles of the web page:
+Here is an example of the editor that supports numerical font sizes. Note that `'normal'` is controlled by the default styles of the web page:
 
 
 ```js
 ```js
 ClassicEditor
 ClassicEditor
@@ -202,6 +201,7 @@ The {@link module:font/fontfamily~FontFamily} plugin registers:
 	```
 	```
 
 
 	The `value` must correspond to the first font name in the configuration string. For the following default configuration:
 	The `value` must correspond to the first font name in the configuration string. For the following default configuration:
+
 	```js
 	```js
 	fontFamily.options = [
 	fontFamily.options = [
 		'default',
 		'default',
@@ -217,6 +217,7 @@ The {@link module:font/fontfamily~FontFamily} plugin registers:
 	```
 	```
 
 
 	the `fontFamily` command will accept the corresponding strings as values:
 	the `fontFamily` command will accept the corresponding strings as values:
+
 	* `'Arial'`
 	* `'Arial'`
 	* `'Courier New'`
 	* `'Courier New'`
 	* `'Georgia'`
 	* `'Georgia'`
@@ -253,6 +254,7 @@ The {@link module:font/fontsize~FontSize} plugin registers the following compone
 	```js
 	```js
 	editor.execute( 'fontSize' );
 	editor.execute( 'fontSize' );
 	```
 	```
+
 ## Contribute
 ## Contribute
 
 
 The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.
 The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.

+ 2 - 0
packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -13,7 +13,9 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
 
 import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { normalizeOptions } from '../fontsize/utils';
 import { normalizeOptions } from '../fontsize/utils';
+
 import fontSizeIcon from '../../theme/icons/font-size.svg';
 import fontSizeIcon from '../../theme/icons/font-size.svg';
+import '../../theme/fontsize.css';
 
 
 /**
 /**
  * The font family UI plugin. It introduces the `'fontSize'` dropdown.
  * The font family UI plugin. It introduces the `'fontSize'` dropdown.

+ 0 - 18
packages/ckeditor5-font/tests/manual/font-size-presets.html

@@ -1,21 +1,3 @@
-<style>
-	.text-tiny {
-		font-size: 0.7em;
-	}
-
-	.text-small {
-		font-size: 0.85em;
-	}
-
-	.text-big {
-		font-size: 1.4em;
-	}
-
-	.text-huge {
-		font-size: 1.8em;
-	}
-</style>
-
 <div id="editor">
 <div id="editor">
 	<h2>Font <span class="text-big">Size</span> feature sample.</h2>
 	<h2>Font <span class="text-big">Size</span> feature sample.</h2>
 
 

+ 20 - 0
packages/ckeditor5-font/theme/fontsize.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.text-tiny {
+	font-size: .7em;
+}
+
+.text-small {
+	font-size: .85em;
+}
+
+.text-big {
+	font-size: 1.4em;
+}
+
+.text-huge {
+	font-size: 1.8em;
+}