nested-widgets.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals console, window, document, setInterval */
  6. import Widget from '../../src/widget';
  7. import { toWidget } from '../../src/utils';
  8. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  9. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  10. import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
  11. import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
  12. import { getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  13. import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
  14. function MyPlugin( editor ) {
  15. editor.model.schema.register( 'div', {
  16. allowIn: [ '$root', 'div' ],
  17. isObject: true
  18. } );
  19. editor.model.schema.extend( '$text', {
  20. allowIn: 'div'
  21. } );
  22. editor.conversion.for( 'downcast' ).add( downcastElementToElement( {
  23. model: 'div',
  24. view: ( modelElement, writer ) => {
  25. return toWidget( writer.createContainerElement( 'div', { class: 'widget' } ), writer );
  26. }
  27. } ) );
  28. editor.conversion.for( 'upcast' ).add( upcastElementToElement( {
  29. model: 'div',
  30. view: 'div'
  31. } ) );
  32. }
  33. ClassicEditor
  34. .create( document.querySelector( '#editor' ), {
  35. plugins: [ ArticlePluginSet, Widget, MyPlugin ],
  36. toolbar: [
  37. 'heading',
  38. '|',
  39. 'bold',
  40. 'italic',
  41. 'link',
  42. 'bulletedList',
  43. 'numberedList',
  44. 'blockQuote',
  45. 'insertTable',
  46. 'mediaEmbed',
  47. 'undo',
  48. 'redo'
  49. ],
  50. image: {
  51. toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  52. },
  53. table: {
  54. contentToolbar: [
  55. 'tableColumn',
  56. 'tableRow',
  57. 'mergeTableCells'
  58. ]
  59. }
  60. } )
  61. .then( editor => {
  62. window.editor = editor;
  63. setInterval( () => {
  64. console.log( getModelData( editor.model ) );
  65. console.log( getViewData( editor.editing.view ) );
  66. }, 3000 );
  67. } )
  68. .catch( err => {
  69. console.error( err.stack );
  70. } );