boxededitoruiview.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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 '/ckeditor5/ui/editorui/editoruiview.js';
  7. import uid from '/ckeditor5/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: 'ck-reset ck-editor',
  29. role: 'application',
  30. dir: 'ltr',
  31. lang: locale.lang,
  32. 'aria-labelledby': `cke-editor__aria-label_${ ariaLabelUid }`
  33. },
  34. children: [
  35. {
  36. tag: 'span',
  37. attributes: {
  38. id: `cke-editor__aria-label_${ ariaLabelUid }`,
  39. class: 'cke-voice-label',
  40. children: [
  41. // TODO: Editor name?
  42. t( 'Rich Text Editor' )
  43. ]
  44. }
  45. },
  46. {
  47. tag: 'div',
  48. attributes: {
  49. class: 'ck-editor__top ck-reset-all',
  50. role: 'presentation'
  51. }
  52. },
  53. {
  54. tag: 'div',
  55. attributes: {
  56. class: 'ck-editor__main',
  57. role: 'presentation'
  58. }
  59. }
  60. ]
  61. };
  62. this.register( 'top', '.ck-editor__top' );
  63. this.register( 'main', '.ck-editor__main' );
  64. }
  65. }