8
0
Просмотр исходного кода

Introduced "the fontFamily.disableValueMatching" option that allows keeping fonts that are not defined in the plugins configuration.

Kamil Piechaczek 5 лет назад
Родитель
Сommit
130b35cd5a

+ 29 - 2
packages/ckeditor5-font/src/fontfamily/fontfamilyediting.js

@@ -49,7 +49,8 @@ export default class FontFamilyEditing extends Plugin {
 				'Times New Roman, Times, serif',
 				'Trebuchet MS, Helvetica, sans-serif',
 				'Verdana, Geneva, sans-serif'
-			]
+			],
+			disableValueMatching: false
 		} );
 	}
 
@@ -71,8 +72,34 @@ export default class FontFamilyEditing extends Plugin {
 		const definition = buildDefinition( FONT_FAMILY, options );
 
 		// Set-up the two-way conversion.
-		editor.conversion.attributeToElement( definition );
+		if ( editor.config.get( 'fontFamily.disableValueMatching' ) ) {
+			this._setupGenericConverters();
+		} else {
+			editor.conversion.attributeToElement( definition );
+		}
 
 		editor.commands.add( FONT_FAMILY, new FontFamilyCommand( editor ) );
 	}
+
+	/**
+	 * @private
+	 */
+	_setupGenericConverters() {
+		const editor = this.editor;
+
+		editor.conversion.for( 'downcast' ).attributeToElement( {
+			model: FONT_FAMILY,
+			view: ( attributeValue, writer ) => writer.createAttributeElement( 'span', { style: 'font-family:' + attributeValue } )
+		} );
+
+		editor.conversion.for( 'upcast' ).attributeToAttribute( {
+			model: {
+				key: FONT_FAMILY,
+				value: viewElement => viewElement.getStyle( 'font-family' )
+			},
+			view: {
+				name: 'span'
+			}
+		} );
+	}
 }

+ 11 - 0
packages/ckeditor5-font/tests/manual/font-family.html

@@ -1,6 +1,17 @@
+<p>
+	<b>Font-family converters mode</b>:
+	<input type="radio" id="mode-restricted-values" name="mode" value="restricted-values"><label for="mode-restricted-values">Restricted value matching</label>
+	<input type="radio" id="mode-disable-value-matching" name="mode" value="disable-value" checked><label for="mode-disable-value-matching">Disabled value matching</label>
+</p>
+
 <div id="editor">
 	<h2>Font Family feature sample.</h2>
 
+	<h3>Docs-Roboto, Arial: </h3>
+	<p>
+		<span style="font-family:docs-Roboto, Arial;">This font will be removed after changing the font-family converters to restricted value matching.</span>
+	</p>
+
 	<h3>Arial, Helvetica, sans-serif: </h3>
 	<p>
 		<span style="font-family: Arial, Helvetica, sans-serif;">Topping cheesecake cotton candy toffee cookie cookie lemon drops cotton candy. Carrot cake dessert jelly beans powder cake cupcake tiramisu pastry gummi bears.</span>

+ 40 - 11
packages/ckeditor5-font/tests/manual/font-family.js

@@ -3,22 +3,51 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals console, window, document */
+/* globals window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import FontFamily from '../../src/fontfamily';
 
-ClassicEditor
-	.create( document.querySelector( '#editor' ), {
+const restrictedModeButton = document.getElementById( 'mode-restricted-values' );
+const standardModeButton = document.getElementById( 'mode-disable-value-matching' );
+
+restrictedModeButton.addEventListener( 'change', handleModeChange );
+standardModeButton.addEventListener( 'change', handleModeChange );
+
+// When page loaded.
+startMode( document.querySelector( 'input[name="mode"]:checked' ).value );
+
+// When a user changed a mode.
+async function handleModeChange( evt ) {
+	await startMode( evt.target.value );
+}
+
+// Starts the editor.
+async function startMode( selectedMode ) {
+	if ( selectedMode === 'restricted-values' ) {
+		await reloadEditor();
+	} else {
+		await reloadEditor( { disableValueMatching: true } );
+	}
+}
+
+async function reloadEditor( options = {} ) {
+	if ( window.editor ) {
+		await window.editor.destroy();
+	}
+
+	const config = {
 		plugins: [ ArticlePluginSet, FontFamily ],
 		toolbar: [
 			'heading', '|', 'fontFamily', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
-		]
-	} )
-	.then( editor => {
-		window.editor = editor;
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );
+		],
+		fontFamily: {}
+	};
+
+	if ( options.disableValueMatching ) {
+		config.fontFamily.disableValueMatching = true;
+	}
+
+	window.editor = await ClassicEditor.create( document.querySelector( '#editor' ), config );
+}

+ 10 - 1
packages/ckeditor5-font/tests/manual/font-family.md

@@ -1,7 +1,7 @@
 ### Loading
 
 The data should be loaded with paragraphs, each with different font.
-Also the image caption should have "changed font" string with different font. 
+Also the image caption should have "changed font" string with different font.
 
 ### Testing
 
@@ -10,3 +10,12 @@ Try to:
 - Change font size by selecting some text.
 - Change to default font size by selecting many paragraphs.
 - Change to default font size by selecting some text.
+
+### Converters mode
+
+The "Restricted value matching" option means that all font-family values that aren't defined in the plugin's configuration will be removed (e.g. when pasted from Google Docs).
+This behaviour can be disabled by selecting the "Disabled value matching" option.
+
+The `Docs-Roboto, Arial` font-family is not specified in the plugin's configuration and should be restored to default font when the "Restricted value matching" option is selected.
+
+By default editor should load with the "Disabled value matching" option.