boxededitoruiview.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. 'use strict';
  6. import EditorUIView from '../../editorui/editoruiview.js';
  7. import uid from '../../../utils/uid.js';
  8. /**
  9. * Boxed editor UI view.
  10. *
  11. * @member ui.editorUI.boxed
  12. * @extends ui.editorUI.EditorUIView
  13. */
  14. export default class BoxedEditorUIView extends EditorUIView {
  15. /**
  16. * Creates a BoxedEditorUIView instance.
  17. *
  18. * @param {utils.Observable} model (View)Model of this view.
  19. * @param {utils.Locale} [locale] The {@link ckeditor5.Editor#locale editor's locale} instance.
  20. */
  21. constructor( model, locale ) {
  22. super( model, locale );
  23. const t = this.t;
  24. const ariaLabelUid = uid();
  25. this.template = {
  26. tag: 'div',
  27. attributes: {
  28. class: [
  29. 'ck-reset',
  30. 'ck-editor',
  31. 'ck-rounded-corners'
  32. ],
  33. role: 'application',
  34. dir: 'ltr',
  35. lang: locale.lang,
  36. 'aria-labelledby': `cke-editor__aria-label_${ ariaLabelUid }`
  37. },
  38. children: [
  39. {
  40. tag: 'span',
  41. attributes: {
  42. id: `cke-editor__aria-label_${ ariaLabelUid }`,
  43. class: 'cke-voice-label',
  44. children: [
  45. // TODO: Editor name?
  46. t( 'Rich Text Editor' )
  47. ]
  48. }
  49. },
  50. {
  51. tag: 'div',
  52. attributes: {
  53. class: 'ck-editor__top ck-reset-all',
  54. role: 'presentation'
  55. }
  56. },
  57. {
  58. tag: 'div',
  59. attributes: {
  60. class: 'ck-editor__main',
  61. role: 'presentation'
  62. }
  63. }
  64. ]
  65. };
  66. this.register( 'top', '.ck-editor__top' );
  67. this.register( 'main', '.ck-editor__main' );
  68. }
  69. }