1.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  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, Event */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  7. import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import Widget from '@ckeditor/ckeditor5-widget/src/widget';
  10. import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
  11. import ClickObserver from '../../../../src/view/observer/clickobserver';
  12. import CompositionObserver from '../../../../src/view/observer/compositionobserver';
  13. import FocusObserver from '../../../../src/view/observer/focusobserver';
  14. import InputObserver from '../../../../src/view/observer/inputobserver';
  15. import KeyObserver from '../../../../src/view/observer/keyobserver';
  16. import MouseObserver from '../../../../src/view/observer/mouseobserver';
  17. import MouseEventsObserver from '@ckeditor/ckeditor5-table/src/tablemouse/mouseeventsobserver';
  18. class SimpleWidgetEditing extends Plugin {
  19. static get requires() {
  20. return [ Widget ];
  21. }
  22. init() {
  23. this._defineSchema();
  24. this._defineConverters();
  25. this._addObservers();
  26. }
  27. _defineSchema() {
  28. const schema = this.editor.model.schema;
  29. schema.register( 'simpleWidgetElement', {
  30. inheritAllFrom: '$block',
  31. isObject: true
  32. } );
  33. }
  34. _defineConverters() {
  35. const conversion = this.editor.conversion;
  36. conversion.for( 'editingDowncast' ).elementToElement( {
  37. model: 'simpleWidgetElement',
  38. view: ( modelElement, { writer } ) => {
  39. const widgetElement = createWidgetView( modelElement, { writer } );
  40. return toWidget( widgetElement, writer );
  41. }
  42. } );
  43. conversion.for( 'dataDowncast' ).elementToElement( {
  44. model: 'simpleWidgetElement',
  45. view: createWidgetView
  46. } );
  47. conversion.for( 'upcast' ).elementToElement( {
  48. model: 'simpleWidgetElement',
  49. view: {
  50. name: 'section',
  51. classes: 'simple-widget-container'
  52. }
  53. } );
  54. function createWidgetView( modelElement, { writer } ) {
  55. const simpleWidgetContainer = writer.createContainerElement( 'section', { class: 'simple-widget-container' } );
  56. const simpleWidgetElement = writer.createRawElement( 'div', { class: 'simple-widget-element' }, domElement => {
  57. domElement.innerHTML = `
  58. <fieldset data-cke-ignore-events="true">
  59. <legend>Ignored container with <strong>data-cke-ignore-events="true"</strong></legend>
  60. <input>
  61. <button>Click!</button>
  62. </fieldset>
  63. <fieldset>
  64. <legend>Regular container</legend>
  65. <input>
  66. <button>Click!</button>
  67. </fieldset>
  68. `;
  69. } );
  70. writer.insert( writer.createPositionAt( simpleWidgetContainer, 0 ), simpleWidgetElement );
  71. return simpleWidgetContainer;
  72. }
  73. }
  74. _addObservers() {
  75. const view = this.editor.editing.view;
  76. const observers = new Map( [
  77. [ ClickObserver, [ 'click' ] ],
  78. [ CompositionObserver, [ 'compositionstart', 'compositionupdate', 'compositionend' ] ],
  79. [ FocusObserver, [ 'focus', 'blur' ] ],
  80. [ InputObserver, [ 'beforeinput' ] ],
  81. [ KeyObserver, [ 'keydown', 'keyup' ] ],
  82. [ MouseEventsObserver, [ 'mousemove', 'mouseup', 'mouseleave' ] ],
  83. [ MouseObserver, [ 'mousedown' ] ]
  84. ] );
  85. observers.forEach( ( events, observer ) => {
  86. view.addObserver( observer );
  87. events.forEach( eventName => {
  88. this.listenTo( view.document, eventName, () => {
  89. console.log( `Received ${ eventName } event.` );
  90. } );
  91. } );
  92. } );
  93. }
  94. }
  95. class SimpleWidgetUI extends Plugin {}
  96. class SimpleWidget extends Plugin {
  97. static get requires() {
  98. return [ SimpleWidgetEditing, SimpleWidgetUI ];
  99. }
  100. }
  101. ClassicEditor
  102. .create( document.querySelector( '#editor' ), {
  103. plugins: [ Essentials, SimpleWidget ]
  104. } )
  105. .then( editor => {
  106. window.editor = editor;
  107. addEventDispatcherForButtons( editor, 'click' );
  108. } )
  109. .catch( error => {
  110. console.error( error.stack );
  111. } );
  112. function addEventDispatcherForButtons( editor, eventName ) {
  113. const view = editor.editing.view;
  114. const container = Array
  115. .from( view.document.getRoot().getChildren() )
  116. .find( element => element.hasClass( 'simple-widget-container' ) );
  117. view.domConverter
  118. .viewToDom( container )
  119. .querySelectorAll( 'button' )
  120. .forEach( button => {
  121. button.addEventListener( 'click', event => {
  122. if ( !event.isTrusted ) {
  123. return;
  124. }
  125. console.log( `Dispatched ${ eventName } event.` );
  126. button.dispatchEvent( new Event( eventName, { bubbles: true } ) );
  127. } );
  128. } );
  129. }