-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
/
boxededitoruiview.js
120 lines (107 loc) · 2.45 KB
/
boxededitoruiview.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/**
* @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module ui/editorui/boxed/boxededitoruiview
*/
import EditorUIView from '../../editorui/editoruiview';
import LabelView from '../../label/labelview';
/**
* The boxed editor UI view class. This class represents an editor interface
* consisting of a toolbar and an editable area, enclosed within a box.
*
* @extends module:ui/editorui/editoruiview~EditorUIView
*/
export default class BoxedEditorUIView extends EditorUIView {
/**
* Creates an instance of the boxed editor UI view class.
*
* @param {module:utils/locale~Locale} locale The locale instance..
*/
constructor( locale ) {
super( locale );
/**
* Collection of the child views located in the top (`.ck-editor__top`)
* area of the UI.
*
* @readonly
* @member {module:ui/viewcollection~ViewCollection}
*/
this.top = this.createCollection();
/**
* Collection of the child views located in the main (`.ck-editor__main`)
* area of the UI.
*
* @readonly
* @member {module:ui/viewcollection~ViewCollection}
*/
this.main = this.createCollection();
/**
* Voice label of the UI.
*
* @protected
* @readonly
* @member {module:ui/view~View} #_voiceLabelView
*/
this._voiceLabelView = this._createVoiceLabel();
this.setTemplate( {
tag: 'div',
attributes: {
class: [
'ck',
'ck-reset',
'ck-editor',
'ck-rounded-corners'
],
role: 'application',
dir: locale.uiLanguageDirection,
lang: locale.uiLanguage,
'aria-labelledby': this._voiceLabelView.id
},
children: [
this._voiceLabelView,
{
tag: 'div',
attributes: {
class: [
'ck',
'ck-editor__top',
'ck-reset_all'
],
role: 'presentation'
},
children: this.top
},
{
tag: 'div',
attributes: {
class: [
'ck',
'ck-editor__main'
],
role: 'presentation'
},
children: this.main
}
]
} );
}
/**
* Creates a voice label view instance.
*
* @private
* @returns {module:ui/label/labelview~LabelView}
*/
_createVoiceLabel() {
const t = this.t;
const voiceLabel = new LabelView();
voiceLabel.text = t( 'Rich Text Editor' );
voiceLabel.extendTemplate( {
attributes: {
class: 'ck-voice-label'
}
} );
return voiceLabel;
}
}