nested-widgets.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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, 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 { getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  11. import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
  12. function MyPlugin( editor ) {
  13. editor.model.schema.register( 'div', {
  14. allowIn: [ '$root', 'div' ],
  15. isObject: true
  16. } );
  17. editor.model.schema.extend( '$text', {
  18. allowIn: 'div'
  19. } );
  20. editor.conversion.for( 'downcast' ).elementToElement( {
  21. model: 'div',
  22. view: ( modelElement, writer ) => {
  23. return toWidget( writer.createContainerElement( 'div', { class: 'widget' } ), writer );
  24. }
  25. } );
  26. editor.conversion.for( 'upcast' ).elementToElement( {
  27. model: 'div',
  28. view: 'div'
  29. } );
  30. }
  31. ClassicEditor
  32. .create( document.querySelector( '#editor' ), {
  33. plugins: [ ArticlePluginSet, Widget, MyPlugin ],
  34. toolbar: [
  35. 'heading',
  36. '|',
  37. 'bold',
  38. 'italic',
  39. 'link',
  40. 'bulletedList',
  41. 'numberedList',
  42. 'blockQuote',
  43. 'insertTable',
  44. 'mediaEmbed',
  45. 'undo',
  46. 'redo'
  47. ],
  48. image: {
  49. toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  50. },
  51. table: {
  52. contentToolbar: [
  53. 'tableColumn',
  54. 'tableRow',
  55. 'mergeTableCells'
  56. ]
  57. }
  58. } )
  59. .then( editor => {
  60. window.editor = editor;
  61. setInterval( () => {
  62. console.log( getModelData( editor.model ) );
  63. console.log( getViewData( editor.editing.view ) );
  64. }, 3000 );
  65. } )
  66. .catch( err => {
  67. console.error( err.stack );
  68. } );