rtl.js 2.7 KB

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