Source: modules/media_library/js/plugins/drupalmedialibrary/plugin.es6.js

  1. /**
  2. * @file
  3. * Drupal Media Library plugin.
  4. */
  5. (function (Drupal, CKEDITOR) {
  6. CKEDITOR.plugins.add('drupalmedialibrary', {
  7. requires: 'drupalmedia',
  8. icons: 'drupalmedialibrary',
  9. hidpi: true,
  10. beforeInit(editor) {
  11. editor.addCommand('drupalmedialibrary', {
  12. allowedContent: {
  13. 'drupal-media': {
  14. attributes: {
  15. '!data-entity-type': true,
  16. '!data-entity-uuid': true,
  17. '!data-view-mode': true,
  18. '!data-align': true,
  19. '!data-caption': true,
  20. '!alt': true,
  21. '!title': true,
  22. },
  23. classes: {},
  24. },
  25. },
  26. // This does not use the object format used above, but a
  27. // CKEDITOR.style instance, because requiredContent does not support
  28. // the object format.
  29. // @see https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter_contentRule.html
  30. // eslint-disable-next-line new-cap
  31. requiredContent: new CKEDITOR.style({
  32. element: 'drupal-media',
  33. attributes: {
  34. 'data-entity-type': '',
  35. 'data-entity-uuid': '',
  36. },
  37. }),
  38. modes: { wysiwyg: 1 },
  39. // There is an edge case related to the undo functionality that will
  40. // be resolved in https://www.drupal.org/project/drupal/issues/3073294.
  41. canUndo: true,
  42. // eslint-disable-next-line no-shadow
  43. exec(editor) {
  44. const saveCallback = function (values) {
  45. editor.fire('saveSnapshot');
  46. const mediaElement = editor.document.createElement('drupal-media');
  47. // eslint-disable-next-line prefer-destructuring
  48. const attributes = values.attributes;
  49. Object.keys(attributes).forEach((key) => {
  50. mediaElement.setAttribute(key, attributes[key]);
  51. });
  52. editor.insertHtml(mediaElement.getOuterHtml());
  53. editor.fire('saveSnapshot');
  54. };
  55. // @see \Drupal\media_library\MediaLibraryUiBuilder::dialogOptions()
  56. Drupal.ckeditor.openDialog(
  57. editor,
  58. editor.config.DrupalMediaLibrary_url,
  59. {},
  60. saveCallback,
  61. editor.config.DrupalMediaLibrary_dialogOptions,
  62. );
  63. },
  64. });
  65. if (editor.ui.addButton) {
  66. editor.ui.addButton('DrupalMediaLibrary', {
  67. label: Drupal.t('Insert from Media Library'),
  68. command: 'drupalmedialibrary',
  69. });
  70. }
  71. },
  72. });
  73. })(Drupal, CKEDITOR);