widget-with-nestededitable.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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 */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  7. import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  8. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  9. import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  10. import Widget from '../../src/widget';
  11. import { toWidget, toWidgetEditable } from '../../src/utils';
  12. ClassicEditor
  13. .create( document.querySelector( '#editor' ), {
  14. plugins: [ Essentials, Paragraph, Bold, Widget ],
  15. toolbar: [ 'undo', 'redo', 'bold' ]
  16. } )
  17. .then( editor => {
  18. window.editor = editor;
  19. const model = editor.model;
  20. model.schema.register( 'widget', {
  21. inheritAllFrom: '$block',
  22. isObject: true
  23. } );
  24. model.schema.extend( '$text', {
  25. allowIn: 'nested'
  26. } );
  27. model.schema.register( 'nested', {
  28. allowIn: 'widget',
  29. isLimit: true
  30. } );
  31. editor.conversion.for( 'dataDowncast' )
  32. .elementToElement( {
  33. model: 'widget',
  34. view: ( modelItem, writer ) => {
  35. return writer.createContainerElement( 'div', { class: 'widget' } );
  36. }
  37. } )
  38. .elementToElement( {
  39. model: 'nested',
  40. view: ( modelItem, writer ) => {
  41. return writer.createContainerElement( 'div', { class: 'nested' } );
  42. }
  43. } );
  44. editor.conversion.for( 'editingDowncast' )
  45. .elementToElement( {
  46. model: 'widget',
  47. view: ( modelItem, writer ) => {
  48. const div = writer.createContainerElement( 'div', { class: 'widget' } );
  49. return toWidget( div, writer, { label: 'widget label' } );
  50. }
  51. } )
  52. .elementToElement( {
  53. model: 'nested',
  54. view: ( modelItem, writer ) => {
  55. const nested = writer.createEditableElement( 'div', { class: 'nested' } );
  56. return toWidgetEditable( nested, writer );
  57. }
  58. } );
  59. editor.conversion.for( 'upcast' )
  60. .elementToElement( {
  61. view: {
  62. name: 'div',
  63. class: 'widget'
  64. },
  65. model: 'widget'
  66. } )
  67. .elementToElement( {
  68. view: {
  69. name: 'div',
  70. class: 'nested'
  71. },
  72. model: 'nested'
  73. } );
  74. editor.setData(
  75. '<p>foobar</p>' +
  76. '<div class="widget"><div class="nested">bar</div></div>' +
  77. '<p>foobar</p>'
  78. );
  79. } )
  80. .catch( err => {
  81. console.error( err.stack );
  82. } );