selection-handle.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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 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. function MyPlugin( editor ) {
  11. editor.model.schema.register( 'div', {
  12. allowIn: [ '$root' ],
  13. isObject: true
  14. } );
  15. editor.conversion.for( 'downcast' ).elementToElement( {
  16. model: 'div',
  17. view: ( modelElement, writer ) => {
  18. return toWidget( writer.createContainerElement( 'div', {
  19. class: 'widget'
  20. } ),
  21. writer,
  22. { hasSelectionHandle: true } );
  23. }
  24. } );
  25. editor.conversion.for( 'upcast' ).elementToElement( {
  26. model: 'div',
  27. view: 'div'
  28. } );
  29. }
  30. const config = {
  31. plugins: [ ArticlePluginSet, Widget, MyPlugin ],
  32. toolbar: [
  33. 'heading',
  34. '|',
  35. 'bold',
  36. 'italic',
  37. 'link',
  38. 'bulletedList',
  39. 'numberedList',
  40. 'blockQuote',
  41. 'insertTable',
  42. 'mediaEmbed',
  43. 'undo',
  44. 'redo'
  45. ],
  46. image: {
  47. toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  48. },
  49. table: {
  50. contentToolbar: [
  51. 'tableColumn',
  52. 'tableRow',
  53. 'mergeTableCells'
  54. ]
  55. }
  56. };
  57. ClassicEditor
  58. .create( document.querySelector( '#editor-ltr' ), config )
  59. .then( editor => {
  60. window.editorLtr = editor;
  61. } )
  62. .catch( err => {
  63. console.error( err.stack );
  64. } );
  65. ClassicEditor
  66. .create( document.querySelector( '#editor-rtl' ), Object.assign( {}, config, {
  67. language: 'ar'
  68. } ) )
  69. .then( editor => {
  70. window.editorRtl = editor;
  71. } )
  72. .catch( err => {
  73. console.error( err.stack );
  74. } );