1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import { Plugin, icons } from 'ckeditor5/src/core.js';
|
9 | import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
|
10 | import '../theme/blockquote.css';
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | export default class BlockQuoteUI extends Plugin {
|
19 | |
20 |
|
21 |
|
22 | static get pluginName() {
|
23 | return 'BlockQuoteUI';
|
24 | }
|
25 | |
26 |
|
27 |
|
28 | init() {
|
29 | const editor = this.editor;
|
30 | const command = editor.commands.get('blockQuote');
|
31 | editor.ui.componentFactory.add('blockQuote', () => {
|
32 | const buttonView = this._createButton(ButtonView);
|
33 | buttonView.set({
|
34 | tooltip: true
|
35 | });
|
36 |
|
37 | buttonView.bind('isOn').to(command, 'value');
|
38 | return buttonView;
|
39 | });
|
40 | editor.ui.componentFactory.add('menuBar:blockQuote', () => this._createButton(MenuBarMenuListItemButtonView));
|
41 | }
|
42 | |
43 |
|
44 |
|
45 | _createButton(ButtonClass) {
|
46 | const editor = this.editor;
|
47 | const locale = editor.locale;
|
48 | const command = editor.commands.get('blockQuote');
|
49 | const view = new ButtonClass(editor.locale);
|
50 | const t = locale.t;
|
51 | view.set({
|
52 | label: t('Block quote'),
|
53 | icon: icons.quote,
|
54 | isToggleable: true
|
55 | });
|
56 | view.bind('isEnabled').to(command, 'isEnabled');
|
57 |
|
58 | this.listenTo(view, 'execute', () => {
|
59 | editor.execute('blockQuote');
|
60 | editor.editing.view.focus();
|
61 | });
|
62 | return view;
|
63 | }
|
64 | }
|