8
0

extending-content-arbitrary-attribute-values.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals ClassicEditor, console, window, document */
  6. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  7. function HandleFontSizeValue( editor ) {
  8. // Add special catch-all converter for font-size feature.
  9. editor.conversion.for( 'upcast' ).elementToAttribute( {
  10. view: {
  11. name: 'span',
  12. styles: {
  13. 'font-size': /[\s\S]+/
  14. }
  15. },
  16. model: {
  17. key: 'fontSize',
  18. value: viewElement => {
  19. const value = parseFloat( viewElement.getStyle( 'font-size' ) ).toFixed( 0 );
  20. // It might be needed to further convert the value to meet business requirements.
  21. // In the sample the font-size is configured to handle only the sizes:
  22. // 10, 12, 14, 'default', 18, 20, 22
  23. // Other sizes will be converted to the model but the UI might not be aware of them.
  24. // The font-size feature expects numeric values to be Number not String.
  25. return parseInt( value );
  26. }
  27. },
  28. converterPriority: 'high'
  29. } );
  30. // Add special converter for font-size feature to convert all (even not configured) model attribute values.
  31. editor.conversion.for( 'downcast' ).attributeToElement( {
  32. model: {
  33. key: 'fontSize'
  34. },
  35. view: ( modelValue, viewWriter ) => {
  36. return viewWriter.createAttributeElement( 'span', {
  37. style: `font-size:${ modelValue }px`
  38. } );
  39. },
  40. converterPriority: 'high'
  41. } );
  42. }
  43. ClassicEditor
  44. .create( document.querySelector( '#snippet-arbitrary-attribute-values' ), {
  45. cloudServices: CS_CONFIG,
  46. extraPlugins: [ HandleFontSizeValue ],
  47. toolbar: {
  48. items: [ 'heading', '|', 'bold', 'italic', '|', 'fontSize' ],
  49. viewportTopOffset: window.getViewportTopOffsetConfig()
  50. },
  51. fontSize: {
  52. options: [ 10, 12, 14, 'default', 18, 20, 22 ]
  53. }
  54. } )
  55. .then( editor => {
  56. window.editor = editor;
  57. } )
  58. .catch( err => {
  59. console.error( err.stack );
  60. } );