8
0

widget-with-nestededitable.js 2.6 KB

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