inline-widget.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global console */
  6. import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  7. import global from '@ckeditor/ckeditor5-utils/src/dom/global';
  8. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  9. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  10. import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  11. import Enter from '@ckeditor/ckeditor5-enter/src/enter';
  12. import Heading from '@ckeditor/ckeditor5-heading/src/heading';
  13. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  14. import Typing from '@ckeditor/ckeditor5-typing/src/typing';
  15. import Undo from '@ckeditor/ckeditor5-undo/src/undo';
  16. import Widget from '@ckeditor/ckeditor5-widget/src/widget';
  17. import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
  18. class InlineWidget extends Plugin {
  19. constructor( editor ) {
  20. super( editor );
  21. editor.model.schema.register( 'placeholder', {
  22. allowWhere: '$text',
  23. isObject: true,
  24. allowAttributes: [ 'type' ]
  25. } );
  26. editor.conversion.for( 'editingDowncast' ).elementToElement( {
  27. model: 'placeholder',
  28. view: ( modelItem, viewWriter ) => {
  29. const widgetElement = createPlaceholderView( viewWriter, modelItem );
  30. return toWidget( widgetElement, viewWriter );
  31. }
  32. } );
  33. editor.conversion.for( 'dataDowncast' ).elementToElement( {
  34. model: 'placeholder',
  35. view: createPlaceholderView
  36. } );
  37. editor.conversion.for( 'upcast' ).elementToElement( {
  38. view: 'placeholder',
  39. model: ( viewElement, modelWriter ) => {
  40. let type = 'general';
  41. if ( viewElement.childCount ) {
  42. const text = viewElement.getChild( 0 );
  43. if ( text.is( 'text' ) ) {
  44. type = text.data;
  45. }
  46. }
  47. return modelWriter.createElement( 'placeholder', { type } );
  48. }
  49. } );
  50. function createPlaceholderView( viewWriter, modelItem ) {
  51. const widgetElement = viewWriter.createContainerElement( 'placeholder' );
  52. viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewWriter.createText( modelItem.getAttribute( 'type' ) ) );
  53. return widgetElement;
  54. }
  55. }
  56. }
  57. ClassicEditor
  58. .create( global.document.querySelector( '#editor' ), {
  59. plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Widget, InlineWidget ],
  60. toolbar: [ 'heading', '|', 'bold', 'undo', 'redo' ]
  61. } )
  62. .then( editor => {
  63. editor.model.document.on( 'change', () => {
  64. printModelContents( editor );
  65. } );
  66. printModelContents( editor );
  67. } )
  68. .catch( err => {
  69. console.error( err.stack );
  70. } );
  71. const modelDiv = global.document.querySelector( '#model' );
  72. function printModelContents( editor ) {
  73. modelDiv.innerText = formatData( getData( editor.model ) );
  74. }
  75. function formatData( data ) {
  76. return data.replace( /<(paragraph)>/g, '\n<$1>' );
  77. }