imageediting.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/image/imageediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import {
  10. viewFigureToModel,
  11. modelToViewAttributeConverter,
  12. srcsetAttributeConverter
  13. } from './converters';
  14. import { toImageWidget } from './utils';
  15. import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
  16. import { upcastElementToElement, upcastAttributeToAttribute } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
  17. import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
  18. /**
  19. * The image engine plugin.
  20. * Registers `<image>` as a block element in the document schema, and allows `alt`, `src` and `srcset` attributes.
  21. * Registers converters for editing and data pipelines.
  22. *
  23. * @extends module:core/plugin~Plugin
  24. */
  25. export default class ImageEditing extends Plugin {
  26. /**
  27. * @inheritDoc
  28. */
  29. init() {
  30. const editor = this.editor;
  31. const schema = editor.model.schema;
  32. const t = editor.t;
  33. const conversion = editor.conversion;
  34. // Configure schema.
  35. schema.register( 'image', {
  36. isObject: true,
  37. isBlock: true,
  38. allowWhere: '$block',
  39. allowAttributes: [ 'alt', 'src', 'srcset' ]
  40. } );
  41. conversion.for( 'dataDowncast' ).add( downcastElementToElement( {
  42. model: 'image',
  43. view: ( modelElement, viewWriter ) => createImageViewElement( viewWriter )
  44. } ) );
  45. conversion.for( 'editingDowncast' ).add( downcastElementToElement( {
  46. model: 'image',
  47. view: ( modelElement, viewWriter ) => toImageWidget( createImageViewElement( viewWriter ), viewWriter, t( 'image widget' ) )
  48. } ) );
  49. conversion.for( 'downcast' )
  50. .add( modelToViewAttributeConverter( 'src' ) )
  51. .add( modelToViewAttributeConverter( 'alt' ) )
  52. .add( srcsetAttributeConverter() );
  53. conversion.for( 'upcast' )
  54. .add( upcastElementToElement( {
  55. view: {
  56. name: 'img',
  57. attribute: {
  58. src: true
  59. }
  60. },
  61. model: ( viewImage, modelWriter ) => modelWriter.createElement( 'image', { src: viewImage.getAttribute( 'src' ) } )
  62. } ) )
  63. .add( upcastAttributeToAttribute( {
  64. view: {
  65. name: 'img',
  66. key: 'alt'
  67. },
  68. model: 'alt'
  69. } ) )
  70. .add( upcastAttributeToAttribute( {
  71. view: {
  72. name: 'img',
  73. key: 'srcset'
  74. },
  75. model: {
  76. key: 'srcset',
  77. value: viewImage => {
  78. const value = {
  79. data: viewImage.getAttribute( 'srcset' )
  80. };
  81. if ( viewImage.hasAttribute( 'width' ) ) {
  82. value.width = viewImage.getAttribute( 'width' );
  83. }
  84. return value;
  85. }
  86. }
  87. } ) )
  88. .add( viewFigureToModel() );
  89. }
  90. }
  91. // Creates a view element representing the image.
  92. //
  93. // <figure class="image"><img></img></figure>
  94. //
  95. // Note that `alt` and `src` attributes are converted separately, so they are not included.
  96. //
  97. // @private
  98. // @param {module:engine/view/writer~Writer} writer
  99. // @return {module:engine/view/containerelement~ContainerElement}
  100. export function createImageViewElement( writer ) {
  101. const emptyElement = writer.createEmptyElement( 'img' );
  102. const figure = writer.createContainerElement( 'figure', { class: 'image' } );
  103. writer.insert( ViewPosition.createAt( figure ), emptyElement );
  104. return figure;
  105. }