| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /* globals ClassicEditor, console, window, document */
- import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
- import Font from '@ckeditor/ckeditor5-font/src/font';
- function HandleFontSizeValue( editor ) {
- // Add special catch-all converter for font-size feature.
- editor.conversion.for( 'upcast' ).elementToAttribute( {
- view: {
- name: 'span',
- styles: {
- 'font-size': /[\s\S]+/
- }
- },
- model: {
- key: 'fontSize',
- value: viewElement => {
- const value = parseFloat( viewElement.getStyle( 'font-size' ) ).toFixed( 0 );
- // It might be needed to further convert the value to meet business requirements.
- // In the sample the font-size is configured to handle only the sizes:
- // 10, 12, 14, 'default', 18, 20, 22
- // Other sizes will be converted to the model but the UI might not be aware of them.
- // The font-size feature expects numeric values to be Number not String.
- return parseInt( value );
- }
- },
- converterPriority: 'high'
- } );
- // Add special converter for font-size feature to convert all (even not configured) model attribute values.
- editor.conversion.for( 'downcast' ).attributeToElement( {
- model: {
- key: 'fontSize'
- },
- view: ( modelValue, viewWriter ) => {
- return viewWriter.createAttributeElement( 'span', {
- style: `font-size:${ modelValue }px`
- } );
- },
- converterPriority: 'high'
- } );
- }
- ClassicEditor
- .create( document.querySelector( '#snippet-arbitrary-attribute-values' ), {
- cloudServices: CS_CONFIG,
- extraPlugins: [ Font, HandleFontSizeValue ],
- toolbar: {
- items: [ 'heading', '|', 'bold', 'italic', '|', 'fontSize' ],
- viewportTopOffset: window.getViewportTopOffsetConfig()
- },
- fontSize: {
- options: [ 10, 12, 14, 'default', 18, 20, 22 ]
- }
- } )
- .then( editor => {
- window.editor = editor;
- } )
- .catch( err => {
- console.error( err.stack );
- } );
|