@progress/kendo-angular-editor 19.1.2-develop.1 → 19.1.2-develop.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/common/apply-to-word-options.d.ts +12 -6
- package/common/commands.d.ts +7 -6
- package/common/css-settings.interface.d.ts +13 -4
- package/common/font-family-item.interface.d.ts +11 -3
- package/common/font-size-item.interface.d.ts +11 -3
- package/common/format-item.interface.d.ts +11 -3
- package/common/paste-cleanup-settings.d.ts +29 -24
- package/common/plugins-function.d.ts +7 -6
- package/common/resizable-options.interface.d.ts +15 -5
- package/directives.d.ts +1 -1
- package/editor.component.d.ts +36 -27
- package/editor.module.d.ts +5 -4
- package/esm2022/common/error-messages.mjs +1 -1
- package/esm2022/directives.mjs +1 -1
- package/esm2022/editor.component.mjs +36 -27
- package/esm2022/editor.module.mjs +5 -4
- package/esm2022/localization/custom-messages.component.mjs +10 -1
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/preventable-events/paste-event.mjs +4 -4
- package/esm2022/tools/alignment/editor-align-center-button.directive.mjs +3 -3
- package/esm2022/tools/alignment/editor-align-justify-button.directive.mjs +3 -3
- package/esm2022/tools/alignment/editor-align-left-button.directive.mjs +3 -3
- package/esm2022/tools/alignment/editor-align-right-button.directive.mjs +3 -3
- package/esm2022/tools/blockquote/editor-blockquote-button.directive.mjs +2 -3
- package/esm2022/tools/colorpicker/editor-back-color.directive.mjs +3 -4
- package/esm2022/tools/colorpicker/editor-colorpicker.component.mjs +20 -10
- package/esm2022/tools/colorpicker/editor-fore-color.directive.mjs +3 -4
- package/esm2022/tools/editor-clean-formatting-button.directive.mjs +3 -3
- package/esm2022/tools/fontfamily/editor-fontfamily.component.mjs +4 -5
- package/esm2022/tools/fontsize/editor-fontsize.component.mjs +6 -6
- package/esm2022/tools/format/editor-format.component.mjs +6 -6
- package/esm2022/tools/history/editor-redo-button.directive.mjs +3 -3
- package/esm2022/tools/history/editor-undo-button.directive.mjs +3 -3
- package/esm2022/tools/image/editor-insert-image-button.directive.mjs +2 -2
- package/esm2022/tools/indentation/editor-indent-button.directive.mjs +3 -4
- package/esm2022/tools/indentation/editor-outdent-button.directive.mjs +3 -4
- package/esm2022/tools/link/editor-create-link-button.directive.mjs +3 -4
- package/esm2022/tools/link/editor-insert-file-button.directive.mjs +2 -3
- package/esm2022/tools/link/editor-unlink-button.directive.mjs +3 -4
- package/esm2022/tools/list/editor-insert-ordered-list-button.directive.mjs +3 -4
- package/esm2022/tools/list/editor-insert-unordered-list-button.directive.mjs +3 -3
- package/esm2022/tools/print/editor-print-button.directive.mjs +3 -3
- package/esm2022/tools/select-all/select-all-button.directive.mjs +2 -2
- package/esm2022/tools/source/editor-view-source-button.directive.mjs +2 -2
- package/esm2022/tools/tables/editor-add-column-after-button.directive.mjs +3 -3
- package/esm2022/tools/tables/editor-add-column-before-button.directive.mjs +3 -3
- package/esm2022/tools/tables/editor-add-row-after-button.directive.mjs +3 -3
- package/esm2022/tools/tables/editor-add-row-before-button.directive.mjs +3 -3
- package/esm2022/tools/tables/editor-delete-column-button.directive.mjs +3 -3
- package/esm2022/tools/tables/editor-delete-row-button.directive.mjs +3 -3
- package/esm2022/tools/tables/editor-delete-table-button.directive.mjs +3 -3
- package/esm2022/tools/tables/editor-insert-table-button.component.mjs +3 -1
- package/esm2022/tools/tables/editor-merge-cells-button.directive.mjs +4 -4
- package/esm2022/tools/tables/editor-split-cell-button.directive.mjs +4 -4
- package/esm2022/tools/typographical-emphasis/editor-bold-button.directive.mjs +3 -3
- package/esm2022/tools/typographical-emphasis/editor-italic-button.directive.mjs +3 -3
- package/esm2022/tools/typographical-emphasis/editor-strikethrough-button.directive.mjs +3 -3
- package/esm2022/tools/typographical-emphasis/editor-subscript-button.directive.mjs +3 -3
- package/esm2022/tools/typographical-emphasis/editor-superscript-button.directive.mjs +3 -3
- package/esm2022/tools/typographical-emphasis/editor-underline-button.directive.mjs +3 -3
- package/esm2022/util.mjs +7 -6
- package/fesm2022/progress-kendo-angular-editor.mjs +210 -188
- package/localization/custom-messages.component.d.ts +10 -1
- package/package.json +15 -15
- package/preventable-events/paste-event.d.ts +4 -4
- package/schematics/ngAdd/index.js +4 -4
- package/tools/alignment/editor-align-center-button.directive.d.ts +3 -3
- package/tools/alignment/editor-align-justify-button.directive.d.ts +3 -3
- package/tools/alignment/editor-align-left-button.directive.d.ts +3 -3
- package/tools/alignment/editor-align-right-button.directive.d.ts +3 -3
- package/tools/blockquote/editor-blockquote-button.directive.d.ts +2 -3
- package/tools/colorpicker/editor-back-color.directive.d.ts +3 -4
- package/tools/colorpicker/editor-colorpicker.component.d.ts +20 -10
- package/tools/colorpicker/editor-fore-color.directive.d.ts +3 -4
- package/tools/editor-clean-formatting-button.directive.d.ts +3 -3
- package/tools/fontfamily/editor-fontfamily.component.d.ts +4 -5
- package/tools/fontsize/editor-fontsize.component.d.ts +6 -6
- package/tools/format/editor-format.component.d.ts +6 -6
- package/tools/history/editor-redo-button.directive.d.ts +3 -3
- package/tools/history/editor-undo-button.directive.d.ts +3 -3
- package/tools/image/editor-insert-image-button.directive.d.ts +2 -2
- package/tools/indentation/editor-indent-button.directive.d.ts +3 -4
- package/tools/indentation/editor-outdent-button.directive.d.ts +3 -4
- package/tools/link/editor-create-link-button.directive.d.ts +3 -4
- package/tools/link/editor-insert-file-button.directive.d.ts +2 -3
- package/tools/link/editor-unlink-button.directive.d.ts +3 -4
- package/tools/list/editor-insert-ordered-list-button.directive.d.ts +3 -4
- package/tools/list/editor-insert-unordered-list-button.directive.d.ts +3 -3
- package/tools/print/editor-print-button.directive.d.ts +3 -3
- package/tools/select-all/select-all-button.directive.d.ts +2 -2
- package/tools/source/editor-view-source-button.directive.d.ts +2 -2
- package/tools/tables/editor-add-column-after-button.directive.d.ts +3 -3
- package/tools/tables/editor-add-column-before-button.directive.d.ts +3 -3
- package/tools/tables/editor-add-row-after-button.directive.d.ts +3 -3
- package/tools/tables/editor-add-row-before-button.directive.d.ts +3 -3
- package/tools/tables/editor-delete-column-button.directive.d.ts +3 -3
- package/tools/tables/editor-delete-row-button.directive.d.ts +3 -3
- package/tools/tables/editor-delete-table-button.directive.d.ts +3 -3
- package/tools/tables/editor-insert-table-button.component.d.ts +3 -1
- package/tools/tables/editor-merge-cells-button.directive.d.ts +4 -4
- package/tools/tables/editor-split-cell-button.directive.d.ts +4 -4
- package/tools/typographical-emphasis/editor-bold-button.directive.d.ts +3 -3
- package/tools/typographical-emphasis/editor-italic-button.directive.d.ts +3 -3
- package/tools/typographical-emphasis/editor-strikethrough-button.directive.d.ts +3 -3
- package/tools/typographical-emphasis/editor-subscript-button.directive.d.ts +3 -3
- package/tools/typographical-emphasis/editor-superscript-button.directive.d.ts +3 -3
- package/tools/typographical-emphasis/editor-underline-button.directive.d.ts +3 -3
- package/util.d.ts +7 -6
|
@@ -72,6 +72,13 @@ const getPasteCleanupAttributes = (config) => {
|
|
|
72
72
|
};
|
|
73
73
|
/**
|
|
74
74
|
* Represents the [Kendo UI Editor component for Angular]({% slug overview_editor %}).
|
|
75
|
+
*
|
|
76
|
+
* Use the Editor to create and edit rich text content in your Angular applications.
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
* ```html
|
|
80
|
+
* <kendo-editor [(value)]="editorValue"></kendo-editor>
|
|
81
|
+
* ```
|
|
75
82
|
*/
|
|
76
83
|
export class EditorComponent {
|
|
77
84
|
dialogService;
|
|
@@ -84,6 +91,7 @@ export class EditorComponent {
|
|
|
84
91
|
renderer;
|
|
85
92
|
/**
|
|
86
93
|
* Sets the value of the Editor ([see example](slug:overview_editor)).
|
|
94
|
+
* Use this property to update the Editor content programmatically.
|
|
87
95
|
*/
|
|
88
96
|
set value(value) {
|
|
89
97
|
this.changeValue(value);
|
|
@@ -101,7 +109,7 @@ export class EditorComponent {
|
|
|
101
109
|
}
|
|
102
110
|
}
|
|
103
111
|
/**
|
|
104
|
-
* Sets the disabled state of the component. To
|
|
112
|
+
* Sets the disabled state of the component. To disable the Editor in reactive forms, see [Forms Support](slug:formssupport_editor#toc-managing-the-editor-disabled-state-in-reactive-forms).
|
|
105
113
|
*/
|
|
106
114
|
set disabled(value) {
|
|
107
115
|
this._disabled = value || false;
|
|
@@ -124,6 +132,7 @@ export class EditorComponent {
|
|
|
124
132
|
/**
|
|
125
133
|
* Sets the read-only state of the component.
|
|
126
134
|
*
|
|
135
|
+
* When `true`, users cannot edit the content.
|
|
127
136
|
* @default false
|
|
128
137
|
*/
|
|
129
138
|
set readonly(value) {
|
|
@@ -163,13 +172,14 @@ export class EditorComponent {
|
|
|
163
172
|
return this._readonly;
|
|
164
173
|
}
|
|
165
174
|
/**
|
|
166
|
-
* If set to `false`, the Editor
|
|
167
|
-
*
|
|
175
|
+
* If set to `false`, the Editor runs in non-encapsulated style mode.
|
|
176
|
+
* The Editor content inherits styles from the page.
|
|
168
177
|
* @default true
|
|
169
178
|
*/
|
|
170
179
|
iframe = true;
|
|
171
180
|
/**
|
|
172
|
-
*
|
|
181
|
+
* Applies custom CSS styles to the Editor in iframe mode.
|
|
182
|
+
* Use this property to provide additional CSS for the Editor content.
|
|
173
183
|
*/
|
|
174
184
|
set iframeCss(settings) {
|
|
175
185
|
this._iframeCss = Object.assign(this._iframeCss, settings);
|
|
@@ -178,12 +188,12 @@ export class EditorComponent {
|
|
|
178
188
|
return this._iframeCss;
|
|
179
189
|
}
|
|
180
190
|
/**
|
|
181
|
-
*
|
|
191
|
+
* When set to `true` or an `ApplyToWordOptions` object, emphasis or inline style commands apply to the whole word at the cursor.
|
|
182
192
|
* @default false
|
|
183
193
|
*/
|
|
184
194
|
applyToWord = false;
|
|
185
195
|
/**
|
|
186
|
-
*
|
|
196
|
+
* Provides a custom schema for the Editor ([see example]({% slug schema_editor %})).
|
|
187
197
|
*/
|
|
188
198
|
set schema(value) {
|
|
189
199
|
if (isDevMode) {
|
|
@@ -200,9 +210,8 @@ export class EditorComponent {
|
|
|
200
210
|
return this._schema;
|
|
201
211
|
}
|
|
202
212
|
/**
|
|
203
|
-
* Defines a function
|
|
204
|
-
*
|
|
205
|
-
* the plugins collection that will be used when creating the Editor component. ([see example]({% slug plugins_editor %}))
|
|
213
|
+
* Defines a function to customize the plugins used by the Editor.
|
|
214
|
+
* The function receives the default plugins and returns the plugins to use ([see example]({% slug plugins_editor %})).
|
|
206
215
|
*/
|
|
207
216
|
set plugins(fn) {
|
|
208
217
|
if (isDevMode) {
|
|
@@ -219,7 +228,8 @@ export class EditorComponent {
|
|
|
219
228
|
return this._plugins;
|
|
220
229
|
}
|
|
221
230
|
/**
|
|
222
|
-
*
|
|
231
|
+
* Sets the hint text displayed when the Editor is empty.
|
|
232
|
+
* Use this property to provide guidance to users.
|
|
223
233
|
*/
|
|
224
234
|
set placeholder(value) {
|
|
225
235
|
if (isDevMode && this._view) {
|
|
@@ -231,41 +241,40 @@ export class EditorComponent {
|
|
|
231
241
|
return this._placeholder;
|
|
232
242
|
}
|
|
233
243
|
/**
|
|
234
|
-
*
|
|
235
|
-
* Set to `true` to preserve whitespace
|
|
236
|
-
* Set to `'full'` to preserve whitespace
|
|
237
|
-
*
|
|
244
|
+
* Controls whitespace handling in the Editor content.
|
|
245
|
+
* Set to `true` to preserve whitespace and normalize newlines to spaces.
|
|
246
|
+
* Set to `'full'` to preserve all whitespace.
|
|
238
247
|
* @default false
|
|
239
248
|
*/
|
|
240
249
|
preserveWhitespace = false;
|
|
241
250
|
/**
|
|
242
|
-
* Configures how pasted content is
|
|
251
|
+
* Configures how pasted content is cleaned before it is added to the Editor ([see example]({% slug paste_cleanup %})).
|
|
252
|
+
* Use this property to remove unwanted HTML, styles, or attributes from pasted content.
|
|
243
253
|
*/
|
|
244
254
|
pasteCleanupSettings;
|
|
245
255
|
/**
|
|
246
256
|
* Determines whether the Editor can be resized ([see example](slug:resizing_editor#toc-resizing-the-editor)).
|
|
257
|
+
* Set to `true` or provide an object with resizing options.
|
|
247
258
|
* @default false
|
|
248
259
|
*/
|
|
249
260
|
resizable = false;
|
|
250
261
|
/**
|
|
251
|
-
* Fires
|
|
252
|
-
*
|
|
253
|
-
*
|
|
254
|
-
* the `valueChange` event is not triggered because it might cause a mix-up with the
|
|
255
|
-
* built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
|
262
|
+
* Fires when the Editor value changes due to user interaction.
|
|
263
|
+
* This event does not fire when the value changes programmatically through `ngModel` or form bindings
|
|
264
|
+
* ([see example](slug:events_editor)).
|
|
256
265
|
*/
|
|
257
266
|
valueChange = new EventEmitter();
|
|
258
267
|
/**
|
|
259
|
-
* Fires when the content area
|
|
268
|
+
* Fires when the Editor content area receives focus ([see example](slug:events_editor)).
|
|
260
269
|
*/
|
|
261
270
|
onFocus = new EventEmitter();
|
|
262
271
|
/**
|
|
263
|
-
* Fires when the user
|
|
264
|
-
*
|
|
272
|
+
* Fires when the user paste content into the Editor ([see example](slug:events_editor)).
|
|
273
|
+
* This event is preventable. If you cancel it, the Editor content does not change.
|
|
265
274
|
*/
|
|
266
275
|
paste = new EventEmitter();
|
|
267
276
|
/**
|
|
268
|
-
* Fires when the content area
|
|
277
|
+
* Fires when the Editor content area is blurred ([see example](slug:events_editor)).
|
|
269
278
|
*/
|
|
270
279
|
onBlur = new EventEmitter();
|
|
271
280
|
hostClass = true;
|
|
@@ -315,14 +324,14 @@ export class EditorComponent {
|
|
|
315
324
|
return this.defaultToolbar || this.userToolBarElement;
|
|
316
325
|
}
|
|
317
326
|
/**
|
|
318
|
-
* Returns the ProseMirror [EditorView](https://prosemirror.net/docs/ref/#view.EditorView) object
|
|
319
|
-
*
|
|
327
|
+
* Returns the ProseMirror [EditorView](https://prosemirror.net/docs/ref/#view.EditorView) object.
|
|
328
|
+
* Use this property to access the underlying `EditorView` instance.
|
|
320
329
|
*/
|
|
321
330
|
get view() {
|
|
322
331
|
return this._view;
|
|
323
332
|
}
|
|
324
333
|
/**
|
|
325
|
-
* Returns the text
|
|
334
|
+
* Returns the text currently selected in the Editor ([see example]({% slug selection_editor %}#toc-retrieve-the-selected-text)).
|
|
326
335
|
*/
|
|
327
336
|
get selectionText() {
|
|
328
337
|
return this._view && this._view.state ? getSelectionText(this._view.state) : '';
|
|
@@ -56,21 +56,22 @@ import * as i43 from "./tools/tables/editor-split-cell-button.directive";
|
|
|
56
56
|
import * as i44 from "@progress/kendo-angular-toolbar";
|
|
57
57
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
58
58
|
/**
|
|
59
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
59
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Editor component.
|
|
60
|
+
* Use this module to import the Editor and its related directives and services into your NgModule-based Angular application.
|
|
60
61
|
*
|
|
61
|
-
*
|
|
62
|
+
* @example
|
|
63
|
+
* ```ts
|
|
62
64
|
* import { NgModule } from '@angular/core';
|
|
63
65
|
* import { EditorModule } from '@progress/kendo-angular-editor';
|
|
64
66
|
* import { BrowserModule } from "@angular/platform-browser";
|
|
65
67
|
* import { AppComponent } from './app.component';
|
|
66
68
|
*
|
|
67
|
-
*
|
|
69
|
+
* @NgModule({
|
|
68
70
|
* declarations: [AppComponent],
|
|
69
71
|
* imports: [BrowserModule, EditorModule],
|
|
70
72
|
* bootstrap: [AppComponent]
|
|
71
73
|
* })
|
|
72
74
|
* export class AppModule {}
|
|
73
|
-
*
|
|
74
75
|
* ```
|
|
75
76
|
*/
|
|
76
77
|
export class EditorModule {
|
|
@@ -8,8 +8,17 @@ import { MessagesDirective } from './messages';
|
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Use this component to override the default component messages
|
|
12
12
|
* ([see example]({% slug globalization_editor %}#toc-custom-messages)).
|
|
13
|
+
* @example
|
|
14
|
+
* ```html
|
|
15
|
+
* <kendo-editor>
|
|
16
|
+
* <kendo-editor-messages
|
|
17
|
+
* bold="Custom Bold"
|
|
18
|
+
* italic="Custom Italic">
|
|
19
|
+
* </kendo-editor-messages>
|
|
20
|
+
* </kendo-editor>
|
|
21
|
+
* ```
|
|
13
22
|
*/
|
|
14
23
|
export class CustomMessagesComponent extends MessagesDirective {
|
|
15
24
|
service;
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '19.1.2-develop.
|
|
13
|
+
publishDate: 1750152829,
|
|
14
|
+
version: '19.1.2-develop.3',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { PreventableEvent } from "./preventable-event";
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Fires when the Editor [`paste`]({% slug api_editor_editorcomponent %}#toc-paste) event occurs.
|
|
8
8
|
*/
|
|
9
9
|
export class EditorPasteEvent extends PreventableEvent {
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Contains the HTML content cleaned according to the [`PasteCleanupSettings`]({% slug paste_cleanup %}).
|
|
12
12
|
*/
|
|
13
13
|
cleanedHtml;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
15
|
+
* Contains the raw pasted content.
|
|
16
16
|
*/
|
|
17
17
|
originalHtml;
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* Contains the original DOM event.
|
|
20
20
|
*/
|
|
21
21
|
originalEvent;
|
|
22
22
|
/**
|
|
@@ -14,10 +14,10 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Use this directive to turn a ToolBarButtonComponent into an Editor **AlignCenter** tool
|
|
18
18
|
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
19
|
-
* The directive
|
|
20
|
-
*
|
|
19
|
+
* The directive sets the SVG icon and `click` event handlers for the button.
|
|
20
|
+
* It also updates the `selected` state of the button based on the cursor position in the editing area.
|
|
21
21
|
*
|
|
22
22
|
* @example
|
|
23
23
|
* ```html
|
|
@@ -14,10 +14,10 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Use this directive to turn a ToolBarButtonComponent into an Editor **AlignJustify** tool
|
|
18
18
|
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
19
|
-
* The directive
|
|
20
|
-
*
|
|
19
|
+
* The directive sets the SVG icon and `click` event handlers for the button.
|
|
20
|
+
* It also updates the `selected` state of the button based on the cursor position in the editing area.
|
|
21
21
|
*
|
|
22
22
|
* @example
|
|
23
23
|
* ```html
|
|
@@ -14,10 +14,10 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Use this directive to turn a ToolBarButtonComponent into an Editor **AlignLeft** tool
|
|
18
18
|
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
19
|
-
* The directive
|
|
20
|
-
*
|
|
19
|
+
* The directive sets the SVG icon and `click` event handlers for the button.
|
|
20
|
+
* It also updates the `selected` state of the button based on the cursor position in the editing area.
|
|
21
21
|
*
|
|
22
22
|
* @example
|
|
23
23
|
* ```html
|
|
@@ -14,10 +14,10 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Use this directive to turn a ToolBarButtonComponent into an Editor **AlignRight** tool
|
|
18
18
|
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
19
|
-
* The directive
|
|
20
|
-
*
|
|
19
|
+
* The directive sets the SVG icon and `click` event handlers for the button.
|
|
20
|
+
* It also updates the `selected` state of the button based on the cursor position in the editing area.
|
|
21
21
|
*
|
|
22
22
|
* @example
|
|
23
23
|
* ```html
|
|
@@ -14,9 +14,8 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* The directive will predefine the SVG icon and `click` event handlers of the button.
|
|
17
|
+
* Configures a ToolBarButtonComponent as an Editor **Blockquote** tool ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
18
|
+
* The directive predefines the SVG icon and `click` event handlers of the button.
|
|
20
19
|
*
|
|
21
20
|
* @example
|
|
22
21
|
* ```html
|
|
@@ -8,12 +8,11 @@ import { commandIcons, commandSVGIcons } from '../../config/command-icons';
|
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
import * as i1 from "./editor-colorpicker.component";
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
12
|
-
* for manipulating the background color of the text
|
|
13
|
-
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
11
|
+
* Configures an EditorColorPickerComponent for manipulating the background color of the text ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
14
12
|
*
|
|
13
|
+
* @example
|
|
15
14
|
* ```html
|
|
16
|
-
* <kendo-toolbar-colorpicker kendoEditorBackColor view="gradient"
|
|
15
|
+
* <kendo-toolbar-colorpicker kendoEditorBackColor view="gradient"></kendo-toolbar-colorpicker>
|
|
17
16
|
* ```
|
|
18
17
|
*/
|
|
19
18
|
export class EditorBackColorDirective {
|
|
@@ -18,45 +18,55 @@ import * as i1 from "../../localization/editor-localization.service";
|
|
|
18
18
|
import * as i2 from "@progress/kendo-angular-dialog";
|
|
19
19
|
import * as i3 from "../../common/provider.service";
|
|
20
20
|
/**
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
21
|
+
* Configures a ColorPickerComponent as a ToolBar tool.
|
|
22
|
+
* Use this component to associate a `kendo-toolbar-colorpicker` with an Editor command that changes the foreground or background color of the text.
|
|
23
|
+
* Use the `kendoEditorForeColor` or `kendoEditorBackColor` directive ([more information]({% slug toolbartools_editor %}#toc-colorpickers)).
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```html
|
|
27
|
+
* <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>
|
|
28
|
+
* ```
|
|
24
29
|
*/
|
|
25
30
|
export class EditorColorPickerComponent extends ToolBarToolComponent {
|
|
26
31
|
localization;
|
|
27
32
|
dialogService;
|
|
28
33
|
ngZone;
|
|
29
34
|
renderer;
|
|
35
|
+
/**
|
|
36
|
+
* Specifies the tab index of the component.
|
|
37
|
+
*
|
|
38
|
+
* @default -1
|
|
39
|
+
*/
|
|
30
40
|
tabindex = -1;
|
|
31
41
|
/**
|
|
32
42
|
* Specifies the initial value of the color picker.
|
|
33
43
|
*/
|
|
34
44
|
value;
|
|
35
45
|
/**
|
|
36
|
-
* Specifies the Kendo UI font icon that
|
|
46
|
+
* Specifies the Kendo UI font icon that the component uses.
|
|
37
47
|
*/
|
|
38
48
|
icon;
|
|
39
49
|
/**
|
|
40
|
-
* Defines an SVGIcon to
|
|
41
|
-
* The input can take either an
|
|
50
|
+
* Defines an SVGIcon to render within the ColorPicker button.
|
|
51
|
+
* The input can take either an existing Kendo SVG icon or a custom one.
|
|
42
52
|
*/
|
|
43
53
|
svgIcon;
|
|
44
54
|
/**
|
|
45
|
-
* Overrides the default
|
|
55
|
+
* Overrides the default color palette settings.
|
|
46
56
|
*/
|
|
47
57
|
paletteSettings;
|
|
48
58
|
/**
|
|
49
|
-
* Specifies the color-related command that
|
|
59
|
+
* Specifies the color-related command that the component executes.
|
|
50
60
|
*/
|
|
51
61
|
editorCommand;
|
|
52
62
|
/**
|
|
53
|
-
* Specifies if the component
|
|
63
|
+
* Specifies if the component is disabled.
|
|
54
64
|
*
|
|
55
65
|
* @default false
|
|
56
66
|
*/
|
|
57
67
|
disabled = false;
|
|
58
68
|
/**
|
|
59
|
-
* Specifies whether the ColorPicker
|
|
69
|
+
* Specifies whether the ColorPicker renders a gradient, palette, or both in its popup.
|
|
60
70
|
*
|
|
61
71
|
* @default ['palette']
|
|
62
72
|
*/
|
|
@@ -8,12 +8,11 @@ import { commandIcons, commandSVGIcons } from '../../config/command-icons';
|
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
import * as i1 from "./editor-colorpicker.component";
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
12
|
-
* for manipulating the foreground color of the text
|
|
13
|
-
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
11
|
+
* Configures an EditorColorPickerComponent for manipulating the foreground color of the text ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
14
12
|
*
|
|
13
|
+
* @example
|
|
15
14
|
* ```html
|
|
16
|
-
* <kendo-toolbar-colorpicker kendoEditorForeColor
|
|
15
|
+
* <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>
|
|
17
16
|
* ```
|
|
18
17
|
*/
|
|
19
18
|
export class EditorForeColorDirective {
|
|
@@ -14,9 +14,9 @@ import * as i2 from "../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../common/provider.service";
|
|
15
15
|
import * as i4 from "./tools.service";
|
|
16
16
|
/**
|
|
17
|
-
* A directive
|
|
18
|
-
*
|
|
19
|
-
*
|
|
17
|
+
* A directive that configures a ToolBarButtonComponent as an Editor **Clean Formatting** tool.
|
|
18
|
+
* The directive sets the SVG icon and `click` event handlers for the button.
|
|
19
|
+
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools))
|
|
20
20
|
*
|
|
21
21
|
* @example
|
|
22
22
|
* ```html
|
|
@@ -20,13 +20,12 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
20
20
|
import * as i3 from "../../common/provider.service";
|
|
21
21
|
import * as i4 from "../tools.service";
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* The component
|
|
26
|
-
* automatically defines the options of the drop-down list and sets its values ([see example]({% slug toolbartools_editor %}#toc-dropdownlists)).
|
|
23
|
+
* Configures a DropDownListComponent as an Editor tool ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
24
|
+
* Use this component to associate a kendo-toolbar-dropdownlist with an Editor command that changes the font family of a content block.
|
|
25
|
+
* The component automatically sets the options and values of the drop-down list ([see example]({% slug toolbartools_editor %}#toc-dropdownlists)).
|
|
27
26
|
*
|
|
28
27
|
* @example
|
|
29
|
-
* ```
|
|
28
|
+
* ```html
|
|
30
29
|
* <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>
|
|
31
30
|
* ```
|
|
32
31
|
*/
|
|
@@ -20,13 +20,13 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
20
20
|
import * as i3 from "../../common/provider.service";
|
|
21
21
|
import * as i4 from "../tools.service";
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* The component
|
|
26
|
-
*
|
|
23
|
+
* Configures a DropDownListComponent as an Editor tool ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
24
|
+
* Use this component to associate a `kendo-dropdownlist` with an Editor command that changes the font size of a content block.
|
|
25
|
+
* The component automatically sets the options and values of the drop-down list.
|
|
26
|
+
* ([see example]({% slug toolbartools_editor %}#toc-dropdownlists))
|
|
27
27
|
*
|
|
28
28
|
* @example
|
|
29
|
-
* ```
|
|
29
|
+
* ```html
|
|
30
30
|
* <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
@@ -40,7 +40,7 @@ export class EditorFontSizeComponent extends ToolBarToolComponent {
|
|
|
40
40
|
tabindex = -1;
|
|
41
41
|
/**
|
|
42
42
|
* Overrides the default font size list.
|
|
43
|
-
*
|
|
43
|
+
* Treat numeric values as pixels.
|
|
44
44
|
*/
|
|
45
45
|
set data(sizes) {
|
|
46
46
|
let normalizedSizes;
|
|
@@ -20,13 +20,13 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
20
20
|
import * as i3 from "../../common/provider.service";
|
|
21
21
|
import * as i4 from "../tools.service";
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
23
|
+
* Configures a DropDownListComponent as an Editor tool
|
|
24
24
|
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
25
|
-
*
|
|
26
|
-
*
|
|
25
|
+
* Associates a `kendo-dropdownlist` with an Editor command that changes the format of a content block.
|
|
26
|
+
* Automatically sets the options and values of the DropDownList ([see example]({% slug toolbartools_editor %}#toc-dropdownlists)).
|
|
27
27
|
*
|
|
28
28
|
* @example
|
|
29
|
-
* ```
|
|
29
|
+
* ```html
|
|
30
30
|
* <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
@@ -41,7 +41,7 @@ export class EditorFormatComponent extends ToolBarToolComponent {
|
|
|
41
41
|
disabled = false;
|
|
42
42
|
tabindex = -1;
|
|
43
43
|
/**
|
|
44
|
-
*
|
|
44
|
+
* Sets the format items list. Use this property to override the default list.
|
|
45
45
|
*/
|
|
46
46
|
set data(formatItems) {
|
|
47
47
|
this._data = formatItems || this._data;
|
|
@@ -50,7 +50,7 @@ export class EditorFormatComponent extends ToolBarToolComponent {
|
|
|
50
50
|
return this._data;
|
|
51
51
|
}
|
|
52
52
|
/**
|
|
53
|
-
*
|
|
53
|
+
* Emits when the value of the DropDownList changes.
|
|
54
54
|
*/
|
|
55
55
|
valueChange = new EventEmitter();
|
|
56
56
|
formatDropDownList;
|
|
@@ -14,10 +14,10 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Configures a ToolBarButtonComponent as an Editor **Redo** tool
|
|
18
18
|
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
19
|
-
*
|
|
20
|
-
*
|
|
19
|
+
* Sets the SVG icon and `click` event handlers of the button.
|
|
20
|
+
* Updates the `disabled` state of the button based on the cursor position in the editing area.
|
|
21
21
|
*
|
|
22
22
|
* @example
|
|
23
23
|
* ```html
|
|
@@ -14,10 +14,10 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Configures a ToolBarButtonComponent as an Editor **Undo** tool
|
|
18
18
|
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
19
|
-
*
|
|
20
|
-
*
|
|
19
|
+
* Sets the SVG icon and `click` event handlers of the button.
|
|
20
|
+
* Updates the `disabled` state of the button based on the cursor position in the editing area.
|
|
21
21
|
*
|
|
22
22
|
* @example
|
|
23
23
|
* ```html
|
|
@@ -14,9 +14,9 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Configures a `ToolBarButtonComponent` as an Editor **InsertImage** tool
|
|
18
18
|
* ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
19
|
-
*
|
|
19
|
+
* Sets the SVG icon and `click` event handlers of the button.
|
|
20
20
|
*
|
|
21
21
|
* @example
|
|
22
22
|
* ```html
|
|
@@ -14,10 +14,9 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* The directive
|
|
20
|
-
* In addition, the directive updates the `disabled` state of the button according to the cursor position in the editing area.
|
|
17
|
+
* Configures a ToolBarButtonComponent as an Editor **Indent** tool ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
18
|
+
* The directive sets the SVG icon and `click` event handlers for the button.
|
|
19
|
+
* The directive also updates the `disabled` state of the button based on the cursor position in the editing area.
|
|
21
20
|
*
|
|
22
21
|
* @example
|
|
23
22
|
* ```html
|
|
@@ -14,10 +14,9 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* The directive
|
|
20
|
-
* In addition, the directive updates the `disabled` state of the button according to the cursor position in the editing area.
|
|
17
|
+
* Configures a ToolBarButtonComponent as an Editor **Outdent** tool ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
18
|
+
* The directive sets the SVG icon and `click` event handlers for the button.
|
|
19
|
+
* The directive also updates the `disabled` state of the button based on the cursor position in the editing area.
|
|
21
20
|
*
|
|
22
21
|
* @example
|
|
23
22
|
* ```html
|
|
@@ -14,10 +14,9 @@ import * as i2 from "../../localization/editor-localization.service";
|
|
|
14
14
|
import * as i3 from "../../common/provider.service";
|
|
15
15
|
import * as i4 from "../tools.service";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* The directive
|
|
20
|
-
* In addition, the directive updates the `disabled` state of the button according to the cursor position in the editing area.
|
|
17
|
+
* Configures a ToolBarButtonComponent as an Editor **CreateLink** tool ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
|
|
18
|
+
* The directive sets the SVG icon and `click` event handlers for the button.
|
|
19
|
+
* The directive also updates the `disabled` state of the button based on the cursor position in the editing area.
|
|
21
20
|
*
|
|
22
21
|
* @example
|
|
23
22
|
* ```html
|