rtl.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  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 Heading from '@ckeditor/ckeditor5-heading/src/heading';
  8. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  9. import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  10. import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  11. import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  12. import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  13. const config = {
  14. plugins: [ Essentials, Paragraph, Bold, Italic, Heading ],
  15. toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo' ]
  16. };
  17. window.setInterval( function() {
  18. const doc1 = window.editor1.document;
  19. const doc2 = window.editor2.document;
  20. if ( window.editor1.editing.view.isFocused ) {
  21. console.log( 'editor 1', getData( doc1 ) );
  22. const modelSel = doc1.selection;
  23. console.log(
  24. 'editor 1 – model selection',
  25. 'anchor: ' + modelSel.anchor.offset,
  26. 'focus: ' + modelSel.focus.offset,
  27. 'backward: ' + modelSel.isBackward
  28. );
  29. const nativeSel = document.getSelection();
  30. console.log(
  31. 'editor 1 – native selection',
  32. 'anchor: ', nativeSel.anchorNode, nativeSel.anchorOffset,
  33. 'focus: ', nativeSel.focusNode, nativeSel.focusOffset
  34. );
  35. }
  36. if ( window.editor2.editing.view.isFocused ) {
  37. console.log( 'editor 2', getData( doc2 ) );
  38. const modelSel = doc2.selection;
  39. console.log(
  40. 'editor 2 – model selection',
  41. 'anchor: ' + modelSel.anchor.offset,
  42. 'focus: ' + modelSel.focus.offset,
  43. 'backward: ' + modelSel.isBackward
  44. );
  45. const nativeSel = document.getSelection();
  46. console.log(
  47. 'editor 2 – native selection',
  48. 'anchor: ', nativeSel.anchorNode, nativeSel.anchorOffset,
  49. 'focus: ', nativeSel.focusNode, nativeSel.focusOffset
  50. );
  51. }
  52. if ( document.activeElement == document.getElementById( 'native1' ) ) {
  53. const nativeSel = document.getSelection();
  54. console.log(
  55. 'native 1 – native selection',
  56. 'anchor: ', nativeSel.anchorNode, nativeSel.anchorOffset,
  57. 'focus: ', nativeSel.focusNode, nativeSel.focusOffset
  58. );
  59. }
  60. if ( document.activeElement == document.getElementById( 'native2' ) ) {
  61. const nativeSel = document.getSelection();
  62. console.log(
  63. 'native 2 – native selection',
  64. 'anchor: ', nativeSel.anchorNode, nativeSel.anchorOffset,
  65. 'focus: ', nativeSel.focusNode, nativeSel.focusOffset
  66. );
  67. }
  68. }, 3000 );
  69. ClassicEditor
  70. .create( document.querySelector( '#editor1' ), config )
  71. .then( editor => {
  72. window.editor1 = editor;
  73. // Editable doesn't automatically get this attribute right now.
  74. // https://github.com/ckeditor/ckeditor5-editor-classic/issues/32
  75. editor.editing.view.getDomRoot().setAttribute( 'dir', 'rtl' );
  76. } )
  77. .catch( err => {
  78. console.error( err.stack );
  79. } );
  80. ClassicEditor
  81. .create( document.querySelector( '#editor2' ), config )
  82. .then( editor => {
  83. window.editor2 = editor;
  84. } )
  85. .catch( err => {
  86. console.error( err.stack );
  87. } );