rtl.js 3.1 KB

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