imageediting.js 3.3 KB

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