1.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals console, document, window */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  7. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  8. import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  9. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  10. import Widget from '@ckeditor/ckeditor5-widget/src/widget';
  11. import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
  12. import ClickObserver from '../../../../src/view/observer/clickobserver';
  13. import CompositionObserver from '../../../../src/view/observer/compositionobserver';
  14. import FocusObserver from '../../../../src/view/observer/focusobserver';
  15. import InputObserver from '../../../../src/view/observer/inputobserver';
  16. import KeyObserver from '../../../../src/view/observer/keyobserver';
  17. import MouseObserver from '../../../../src/view/observer/mouseobserver';
  18. import MouseEventsObserver from '@ckeditor/ckeditor5-table/src/tablemouse/mouseeventsobserver';
  19. import DeleteObserver from '@ckeditor/ckeditor5-typing/src/deleteobserver';
  20. import ClipboardObserver from '@ckeditor/ckeditor5-clipboard/src/clipboardobserver';
  21. import EnterObserver from '@ckeditor/ckeditor5-enter/src/enterobserver';
  22. import ImageLoadObserver from '@ckeditor/ckeditor5-image/src/image/imageloadobserver';
  23. class SimpleWidgetEditing extends Plugin {
  24. static get requires() {
  25. return [ Widget ];
  26. }
  27. init() {
  28. this._defineSchema();
  29. this._defineConverters();
  30. this._addObservers();
  31. }
  32. _defineSchema() {
  33. const schema = this.editor.model.schema;
  34. schema.register( 'simpleWidgetElement', {
  35. inheritAllFrom: '$block',
  36. isObject: true
  37. } );
  38. }
  39. _defineConverters() {
  40. const conversion = this.editor.conversion;
  41. conversion.for( 'editingDowncast' ).elementToElement( {
  42. model: 'simpleWidgetElement',
  43. view: ( modelElement, { writer } ) => {
  44. const widgetElement = createWidgetView( modelElement, { writer } );
  45. return toWidget( widgetElement, writer );
  46. }
  47. } );
  48. conversion.for( 'dataDowncast' ).elementToElement( {
  49. model: 'simpleWidgetElement',
  50. view: createWidgetView
  51. } );
  52. conversion.for( 'upcast' ).elementToElement( {
  53. model: 'simpleWidgetElement',
  54. view: {
  55. name: 'section',
  56. classes: 'simple-widget-container'
  57. }
  58. } );
  59. function createWidgetView( modelElement, { writer } ) {
  60. const simpleWidgetContainer = writer.createContainerElement( 'section', { class: 'simple-widget-container' } );
  61. const simpleWidgetElement = writer.createRawElement( 'div', { class: 'simple-widget-element' }, domElement => {
  62. domElement.innerHTML = `
  63. <fieldset data-cke-ignore-events="true">
  64. <legend>Ignored container with <strong>data-cke-ignore-events="true"</strong></legend>
  65. <input>
  66. <button>Click!</button>
  67. <img src="https://placekitten.com/30/30" height="30">
  68. </fieldset>
  69. <fieldset>
  70. <legend>Regular container</legend>
  71. <input>
  72. <button>Click!</button>
  73. <img src="https://placekitten.com/30/30" height="30">
  74. </fieldset>
  75. `;
  76. } );
  77. writer.insert( writer.createPositionAt( simpleWidgetContainer, 0 ), simpleWidgetElement );
  78. return simpleWidgetContainer;
  79. }
  80. }
  81. _addObservers() {
  82. const view = this.editor.editing.view;
  83. const observers = new Map( [
  84. [ ClickObserver, [ 'click' ] ],
  85. [ CompositionObserver, [ 'compositionstart', 'compositionupdate', 'compositionend' ] ],
  86. [ FocusObserver, [ 'focus', 'blur' ] ],
  87. [ InputObserver, [ 'beforeinput' ] ],
  88. [ KeyObserver, [ 'keydown', 'keyup' ] ],
  89. [ MouseEventsObserver, [ 'mousemove', 'mouseup', 'mouseleave' ] ],
  90. [ MouseObserver, [ 'mousedown' ] ],
  91. [ ClipboardObserver, [ 'paste', 'copy', 'cut', 'drop', 'dragover' ] ], // It's inheriting domEventObserver
  92. [ DeleteObserver, [ 'delete' ] ], // Is ignored for some reason, even though there's no explicit support.
  93. [ EnterObserver, [ 'enter' ] ], // Is ignored for some reason, even though there's no explicit support.
  94. [ ImageLoadObserver, [ 'imageLoaded' ] ]
  95. ] );
  96. observers.forEach( ( events, observer ) => {
  97. view.addObserver( observer );
  98. events.forEach( eventName => {
  99. this.listenTo( view.document, eventName, ( event, eventData ) => {
  100. if ( eventName.startsWith( 'mouse' ) ) {
  101. console.log( `Received ${ eventName } event.` );
  102. } else {
  103. console.log( `Received ${ eventName } event. Target: `, eventData.domTarget || eventData.target );
  104. }
  105. } );
  106. } );
  107. } );
  108. }
  109. }
  110. class SimpleWidget extends Plugin {
  111. static get requires() {
  112. return [ SimpleWidgetEditing ];
  113. }
  114. }
  115. ClassicEditor
  116. .create( document.querySelector( '#editor' ), {
  117. plugins: [ Essentials, Paragraph, SimpleWidget ]
  118. } )
  119. .then( editor => {
  120. window.editor = editor;
  121. } )
  122. .catch( error => {
  123. console.error( error.stack );
  124. } );