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

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