-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathsmart-webcomponents-angular-editor.js
1424 lines (1417 loc) · 73.9 KB
/
smart-webcomponents-angular-editor.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
import './../source/modules/smart.editor';
import * as pkg from './../common/marked.min.js';
window.marked = pkg.default;
import { __decorate, __awaiter } from 'tslib';
import { EventEmitter, Output, Input, ElementRef, Directive, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
__decorate([
Output()
], BaseElement.prototype, "onCreate", void 0);
__decorate([
Output()
], BaseElement.prototype, "onReady", void 0);
__decorate([
Output()
], BaseElement.prototype, "onAttach", void 0);
__decorate([
Output()
], BaseElement.prototype, "onDetach", void 0);
__decorate([
Input()
], BaseElement.prototype, "locale", null);
__decorate([
Input()
], BaseElement.prototype, "localizeFormatFunction", null);
__decorate([
Input()
], BaseElement.prototype, "messages", null);
__decorate([
Input()
], BaseElement.prototype, "rightToLeft", null);
__decorate([
Input()
], BaseElement.prototype, "theme", null);
const Smart = window.Smart;
let EditorComponent = class EditorComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered on blur if the content is changed.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value)
* oldValue - The old value before the change.
* value - The new value after the change.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered after user input to indicate that the content is changed via user interaction.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value)
* oldValue - The old value before the input change.
* value - The new value after the input change.
*/
this.onChanging = new EventEmitter();
/** @description This event is triggered before a Toolbar action is started. The event can be canceled via event.preventDefault().
* @param event. The custom event. Custom event was created with: event.detail( name)
* name - The name of the action.
*/
this.onActionStart = new EventEmitter();
/** @description This event is triggered when a Toolbar action has ended.
* @param event. The custom event. Custom event was created with: event.detail( name)
* name - The name of the action.
*/
this.onActionEnd = new EventEmitter();
/** @description This event is triggered when a Context menu item has been clicked.
* @param event. The custom event. Custom event was created with: event.detail( originalEvent, value)
* originalEvent - The original click event.
* value - The value of the item.
*/
this.onContextMenuItemClick = new EventEmitter();
/** @description This event is triggered when the Context Menu is opened.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onContextMenuOpen = new EventEmitter();
/** @description This event is triggered when the Context Menu is opening. The opening operation can be canceled via event.preventDefault().
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onContextMenuOpening = new EventEmitter();
/** @description This event is triggered when the Context Menu is closed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onContextMenuClose = new EventEmitter();
/** @description This event is triggered when the Context Menu is closing. The closing operation can be canceled via event.preventDefault().
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onContextMenuClosing = new EventEmitter();
/** @description This event is triggered when an image/table/video resizing has started.
* @param event. The custom event. */
this.onResizeStart = new EventEmitter();
/** @description This event is triggered when an image/table/video resizing has ended.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The element that is resized (image/table or video).
*/
this.onResizeEnd = new EventEmitter();
/** @description This event is triggered when the inline Toolbar is opened.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onInlineToolbarOpen = new EventEmitter();
/** @description This event is triggered when the inline Toolbar is opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onInlineToolbarOpening = new EventEmitter();
/** @description This event is triggered when the inline Toolbar is closed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onInlineToolbarClose = new EventEmitter();
/** @description This event is triggered when the inline Toolbar is closing.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
*/
this.onInlineToolbarClosing = new EventEmitter();
/** @description This event is triggered when the Drop Down Toolbar is opened.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onDropDownToolbarOpen = new EventEmitter();
/** @description This event is triggered when the Drop Down Toolbar is opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onDropDownToolbarOpening = new EventEmitter();
/** @description This event is triggered when the Drop Down Toolbar is closed.
* @param event. The custom event. Custom event was created with: event.detail( target, owner)
* target - The toolbar that is the target of the operation.
* owner - The tooltip target (the owner of the tooltip).
*/
this.onDropDownToolbarClose = new EventEmitter();
/** @description This event is triggered when the Drop Down Toolbar is closing. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( target)
* target - The toolbar that is the target of the operation.
*/
this.onDropDownToolbarClosing = new EventEmitter();
/** @description This event is triggered the Dialog Window is opened.
* @param event. The custom event. Custom event was created with: event.detail( target, item)
* target - The window that is the target of the operation.
* item - The toolbar item is the target of the operation.
*/
this.onDialogOpen = new EventEmitter();
/** @description This event is triggered before the Dialog Window is opened. The event can be prevented via event.preventDefault().
* @param event. The custom event. Custom event was created with: event.detail( target, item)
* target - The window that is the target of the operation.
* item - The toolbar item that is the target of the operation.
*/
this.onDialogOpening = new EventEmitter();
/** @description This event is triggered when the Dialog Window is closed.
* @param event. The custom event. Custom event was created with: event.detail( target, item)
* target - The window that is the target of the operation.
* item - The toolbar item that is the target of the operation.
*/
this.onDialogClose = new EventEmitter();
/** @description This event is triggered before the Dialog Window is closing. The event can be prevented via event.preventDefault().
* @param event. The custom event. Custom event was created with: event.detail( target, item)
* target - The window that is the target of the operation.
* item - The toolbar item that is the target of the operation.
*/
this.onDialogClosing = new EventEmitter();
/** @description This event is triggered when the uploading of an image/video is successful.
* @param event. The custom event. Custom event was created with: event.detail( target, item, filename, type, size, index, status, serverResponse)
* target - The file upload element that is the target of the operation.
* item - The toolbar item that is the target of the operation.
* filename - The name of the uploaded file.
* type - The type of the uploaded file.
* size - The size of the uploaded file.
* index - The index of the uploaded file.
* status - The status of the uploaded file. Whether there was an error or success.
* serverResponse - The response of the remote server.
*/
this.onImageUploadSuccess = new EventEmitter();
/** @description This event is triggered when the uploading of an image/video is unsuccessful.
* @param event. The custom event. Custom event was created with: event.detail( target, item, filename, type, size, index, status, serverResponse)
* target - The file upload element that is the target of the operation.
* item - The toolbar item that is the target of the operation.
* filename - The name of the canceled file.
* type - The type of the canceled file.
* size - The size of the canceled file.
* index - The index of the canceled file.
* status - The status of the uploaded file. Whether there was an error or success.
* serverResponse - The response of the remote server.
*/
this.onImageUploadFailed = new EventEmitter();
/** @description This event is triggered when a Toolbar item is clicked.
* @param event. The custom event. Custom event was created with: event.detail( originalEvent, value)
* originalEvent - The original click event.
* value - The name of the toolbar item that was clicked.
*/
this.onToobarItemClick = new EventEmitter();
/** @description This event is triggered when a message is closed.
* @param event. The custom event. Custom event was created with: event.detail( instance)
* instance - The toast item that is the target of the operation.
*/
this.onMessageClose = new EventEmitter();
/** @description This event is triggered when a message is opened.
* @param event. The custom event. Custom event was created with: event.detail( instance)
* instance - The toast item that is the target of the operation.
*/
this.onMessageOpen = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-editor');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Automatically loads the last saved state of the editor (from local storage) on element initialization. An id must be provided in order to load a previously saved state. */
get autoLoad() {
return this.nativeElement ? this.nativeElement.autoLoad : undefined;
}
set autoLoad(value) {
this.nativeElement ? this.nativeElement.autoLoad = value : undefined;
}
/** @description Automatically saves the current content of the editor. Saving happens at time intervas determined by the autoSaveInterval property while the element on focus. An id must be provided to the element in order to store the state. */
get autoSave() {
return this.nativeElement ? this.nativeElement.autoSave : undefined;
}
set autoSave(value) {
this.nativeElement ? this.nativeElement.autoSave = value : undefined;
}
/** @description The property that determines the interval to automatically save the state of the Editor when the autoSave property is set. */
get autoSaveInterval() {
return this.nativeElement ? this.nativeElement.autoSaveInterval : undefined;
}
set autoSaveInterval(value) {
this.nativeElement ? this.nativeElement.autoSaveInterval = value : undefined;
}
/** @description A formatting function for the char counter. Takes two arguments: chars - the current number of characters inside the Editor.maxCharCount - the maximum number of characters inside the Editor. */
get charCountFormatFunction() {
return this.nativeElement ? this.nativeElement.charCountFormatFunction : undefined;
}
set charCountFormatFunction(value) {
this.nativeElement ? this.nativeElement.charCountFormatFunction = value : undefined;
}
/** @description Sets or gets whether files will be automatically uploaded after selection. */
get autoUpload() {
return this.nativeElement ? this.nativeElement.autoUpload : undefined;
}
set autoUpload(value) {
this.nativeElement ? this.nativeElement.autoUpload = value : undefined;
}
/** @description Determines the content filtering settings. */
get contentFiltering() {
return this.nativeElement ? this.nativeElement.contentFiltering : undefined;
}
set contentFiltering(value) {
this.nativeElement ? this.nativeElement.contentFiltering = value : undefined;
}
/** @description Determines the context menu for the Editor. The context menu is triggered when the user right clicks on the content area of the Editor. */
get contextMenu() {
return this.nativeElement ? this.nativeElement.contextMenu : undefined;
}
set contextMenu(value) {
this.nativeElement ? this.nativeElement.contextMenu = value : undefined;
}
/** @description Allows to customize default the context menu of the Editor. The property accepts an array of items which can be strings that represent the value of the item, or objects of the following format: { label: string, value: string }, where the label will be displayed and the value will be action value for the item. The property also accepts a function that must return an array of items with the following format function (target: HTMLElement, type: string, defaultItems: string[]) { return defaultItems } and the following arguments: target - the element that is the target of the context menu.type - the type of context menu ( whether it's a table, image, link or other)defaultItems - an array of strings which represent the default items for the context menu. */
get contextMenuDataSource() {
return this.nativeElement ? this.nativeElement.contextMenuDataSource : undefined;
}
set contextMenuDataSource(value) {
this.nativeElement ? this.nativeElement.contextMenuDataSource = value : undefined;
}
/** @description Sets the Editor's Data Export options. */
get dataExport() {
return this.nativeElement ? this.nativeElement.dataExport : undefined;
}
set dataExport(value) {
this.nativeElement ? this.nativeElement.dataExport = value : undefined;
}
/** @description Enables or disables the Editor. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Disables content editing inside Editor. */
get disableEditing() {
return this.nativeElement ? this.nativeElement.disableEditing : undefined;
}
set disableEditing(value) {
this.nativeElement ? this.nativeElement.disableEditing = value : undefined;
}
/** @description Disables the Quick Search Bar. */
get disableSearchBar() {
return this.nativeElement ? this.nativeElement.disableSearchBar : undefined;
}
set disableSearchBar(value) {
this.nativeElement ? this.nativeElement.disableSearchBar = value : undefined;
}
/** @description Determines the edit mode for the Editor. By default the editor's content accepts and parses HTML. However if set to 'markdown' the Editor can be used as a full time Markdown Editor by parsing the makrdown to HTML in preview mode. */
get editMode() {
return this.nativeElement ? this.nativeElement.editMode : undefined;
}
set editMode(value) {
this.nativeElement ? this.nativeElement.editMode = value : undefined;
}
/** @description Determines whether the value returned from getHTML method and Source Code view are encoded or not. */
get enableHtmlEncode() {
return this.nativeElement ? this.nativeElement.enableHtmlEncode : undefined;
}
set enableHtmlEncode(value) {
this.nativeElement ? this.nativeElement.enableHtmlEncode = value : undefined;
}
/** @description Determines whether the Tab key can insert tab chars inside the Editor or change focus (default) */
get enableTabKey() {
return this.nativeElement ? this.nativeElement.enableTabKey : undefined;
}
set enableTabKey(value) {
this.nativeElement ? this.nativeElement.enableTabKey = value : undefined;
}
/** @description Determines the time interval between results for the find and replace and search bar features. */
get findAndReplaceTimeout() {
return this.nativeElement ? this.nativeElement.findAndReplaceTimeout : undefined;
}
set findAndReplaceTimeout(value) {
this.nativeElement ? this.nativeElement.findAndReplaceTimeout = value : undefined;
}
/** @description Determines whether the Toolbar is hidden or not. */
get hideToolbar() {
return this.nativeElement ? this.nativeElement.hideToolbar : undefined;
}
set hideToolbar(value) {
this.nativeElement ? this.nativeElement.hideToolbar = value : undefined;
}
/** @description Determines whether the Inline Toolbar is hidden or not. */
get hideInlineToolbar() {
return this.nativeElement ? this.nativeElement.hideInlineToolbar : undefined;
}
set hideInlineToolbar(value) {
this.nativeElement ? this.nativeElement.hideInlineToolbar = value : undefined;
}
/** @description Determines the file format of the image/video that are uploaded from local storage. By default images/videos are stroed as base64. */
get imageFormat() {
return this.nativeElement ? this.nativeElement.imageFormat : undefined;
}
set imageFormat(value) {
this.nativeElement ? this.nativeElement.imageFormat = value : undefined;
}
/** @description Sets the content of the Editor as HTML. Allows to insert text and HTML. */
get innerHTML() {
return this.nativeElement ? this.nativeElement.innerHTML : undefined;
}
set innerHTML(value) {
this.nativeElement ? this.nativeElement.innerHTML = value : undefined;
}
/** @description Defines an offset(x,y) for the Inline Toolbar positioning on the page. */
get inlineToolbarOffset() {
return this.nativeElement ? this.nativeElement.inlineToolbarOffset : undefined;
}
set inlineToolbarOffset(value) {
this.nativeElement ? this.nativeElement.inlineToolbarOffset = value : undefined;
}
/** @description Determines the iframe settings of the Editor. When enabled the contents of the Editor are placed inside an iframe, isolated in a separate dom. The element allows to insert external resources into the iframe if needed. */
get iframeSettings() {
return this.nativeElement ? this.nativeElement.iframeSettings : undefined;
}
set iframeSettings(value) {
this.nativeElement ? this.nativeElement.iframeSettings = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Sets a limit on the number of chars inside the Editor. */
get maxCharCount() {
return this.nativeElement ? this.nativeElement.maxCharCount : undefined;
}
set maxCharCount(value) {
this.nativeElement ? this.nativeElement.maxCharCount = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets a to the element which can be used to submit the value of the Editor via a form. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Determines the format of the content that will be pasted inside the Editor. */
get pasteFormat() {
return this.nativeElement ? this.nativeElement.pasteFormat : undefined;
}
set pasteFormat(value) {
this.nativeElement ? this.nativeElement.pasteFormat = value : undefined;
}
/** @description Determines the placeholder that will be shown when there's no content inside the Editor. */
get placeholder() {
return this.nativeElement ? this.nativeElement.placeholder : undefined;
}
set placeholder(value) {
this.nativeElement ? this.nativeElement.placeholder = value : undefined;
}
/** @description Determines whether the clearFormat toolbar action should also remove inline styles from the currently selected node. */
get removeStylesOnClearFormat() {
return this.nativeElement ? this.nativeElement.removeStylesOnClearFormat : undefined;
}
set removeStylesOnClearFormat(value) {
this.nativeElement ? this.nativeElement.removeStylesOnClearFormat = value : undefined;
}
/** @description Determines whether Editor's content is required ot not. If set and the Editor's content is empty, a notification will appear to notify that the Editor cannot be empty. */
get required() {
return this.nativeElement ? this.nativeElement.required : undefined;
}
set required(value) {
this.nativeElement ? this.nativeElement.required = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines whether the value is sanitized from XSS content or not. When enabled scripts and other XSS vulnerabilities are not allowed to exist inside the Editor's as HTML content. */
get sanitized() {
return this.nativeElement ? this.nativeElement.sanitized : undefined;
}
set sanitized(value) {
this.nativeElement ? this.nativeElement.sanitized = value : undefined;
}
/** @description Determines whether the char counter is visible or not. When enabled it is displayed in the bottom right corner. If maxCharCount is set and the content characters are equal or more than 70% of the maximum char count the counter is colored in order to warn the user. If the char count is equal or more than 90% the counter is again colored with a different warning color to indicate that the counter is near maximum. When maximum is reached, text input is not allowed. */
get showCharCount() {
return this.nativeElement ? this.nativeElement.showCharCount : undefined;
}
set showCharCount(value) {
this.nativeElement ? this.nativeElement.showCharCount = value : undefined;
}
/** @description Determines whether the editor may be checked for spelling errors. */
get spellCheck() {
return this.nativeElement ? this.nativeElement.spellCheck : undefined;
}
set spellCheck(value) {
this.nativeElement ? this.nativeElement.spellCheck = value : undefined;
}
/** @description Determines the refresh interval for the Source Code/Preview Panel when Split Mode is enabled. */
get splitModeRefreshTimeout() {
return this.nativeElement ? this.nativeElement.splitModeRefreshTimeout : undefined;
}
set splitModeRefreshTimeout(value) {
this.nativeElement ? this.nativeElement.splitModeRefreshTimeout = value : undefined;
}
/** @description Sets or gets the upload URL. This property corresponds to the upload form's action attribute. For example, the uploadUrl property can point to a PHP file, which handles the upload operation on the server-side. */
get uploadUrl() {
return this.nativeElement ? this.nativeElement.uploadUrl : undefined;
}
set uploadUrl(value) {
this.nativeElement ? this.nativeElement.uploadUrl = value : undefined;
}
/** @description Sets or gets the remove URL. This property corresponds to the form's action attribute. For example, the removeUrl property can point to a PHP file, which handles the remove operation on the server-side. */
get removeUrl() {
return this.nativeElement ? this.nativeElement.removeUrl : undefined;
}
set removeUrl(value) {
this.nativeElement ? this.nativeElement.removeUrl = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description Determines the Toolbar items list. Each item can be string pointing to the name of the item or an object that defines a custom item or adds aditional settings to an item. The name of the items are case insensitive. An object definition should contain a name attribute that refers to the name of the item when modifing an existing toolbar item. The name attribute determines the action of the item. If set to 'custom' it is possible to create a custom toolbar item. If name attribute is not set or not valid it is treated as a separator, no a toolbar item. The following items are supported by default by the Editor: SourceCode - shows the HTML/Preview Panel by hiding the input panel. Item type - 'Toggle button'.SplitMode - shows both input and HTML/Preview Panel by splitting the Editor content in two sections. Item type - 'Toggle button'FullScreen - fits the viewport with the Editor by expanding it over the page content. Item type - 'Toggle button'.Alignment - aligns the selected content. Item type - 'Drop down'.FontName - changes the font family of the selected content. Item type - 'drop-down'.FontSize - changes the font size of the selected content. Item type - 'drop-down'.Formats - changes the format of the current selection. Itme type - 'drop-down'.TableRows - allows to insert/remove a row into a selected table element. Item type - 'drop-down'.TableColumns - allows to insert/remove a column into a selected table element. Itme type - 'drop-down'.TableVAlign - sets the vertical alignment of a selected table cell. Item type - 'drop-down'.TableStyle - sets additional styling to a selected table inside the Editor. Item type - 'drop-down'.BackgroundColor - changes the background color of the current selection. Item type - 'color-input'.FontColor - changes the font color of the current selection. Item type = 'color-input'.Bold - sets the currently selected text as bold or not. Item type - 'button'.Italic - sets the currently selected text as italic. Item type - 'button'. Underline - sets the currently selected text as underlined. Itme type - 'button'.Strikethrough - set the currently selected text as strikethrough. Item type - 'button'.Delete - deletes the current selection. Item type - 'button'.Undo - undoes the last operation. Item type - 'button'.Redo - redoes the previous operation. Item type - 'button'.Indent - indents the current selection once. Item type - 'button'.Outdent - outdents the current selection once. Item type - 'button'.OpenLink - triggers a hyperlink. Item type - 'button'.EditLink - creates/edits the selected hyperlink. Item type - 'button'.CreateLink - creates/edits the selected hyperlink. Item type - 'button'.RemoveLink - removes the currently selected hyperlink. Item type - 'button'.Hyperlink - same as createLink, triggers a Dialog Window for link creation. Item type - 'button'.Cut - Cuts the currently selected text. Item type - 'button'.Copy - copies the currently selected text. Item type - 'button'Paste - pastes the currenly copied/cut text from the Clipboard. Item type = 'button' or 'drop-down' when advanced attribute is set to 'true'.Image - triggers a Dialog Window to insert/edit an image. Item type - 'button'.Video - triggers a Dialog Window to insert/edit a video. Item type - 'button'.LowerCase - changes the current selection to lower case. Item type - 'button'.UpperCase - changes the current selection to upper case. Item type - 'button'.Print - opens the browser print preview window. Item type - 'button'.Caption - insert/remove a caption when a table is selected. Item type - 'button'.ClearFormat - removes the formatting of the currntly selected text. Item type - 'button'.Table - triggers a Dialog Window to insert a table. Item type - 'button'.TableHeader - insert/remove a header row to the currently selected table. Item type - 'button'.OrderedList - insert/remove an order list. Item type = 'button'.UnorderedList - insert/remove an unordered list. Item type - 'button'.Subscript - changes the currently selected text to subscript. Item type - 'button'.Superscript - changes the currently selected text to superscript. Item type - 'button'.FindAndReplace - opens a dialog that allows to find and replace text inside the Editor's content section. Item type - 'button'. The inlineToolbarItems attribute is applicable only to the following items: 'table', 'image', 'hyperlink'. It accepts the same type of value as toolbarItems property but the toolbar items will be placed insinde the Inline Toolbar instead. */
get toolbarItems() {
return this.nativeElement ? this.nativeElement.toolbarItems : undefined;
}
set toolbarItems(value) {
this.nativeElement ? this.nativeElement.toolbarItems = value : undefined;
}
/** @description Determines the toolbar mode of the Editor. The main toolbar of the Editor can appear as a Ribbon or as a Menu. */
get toolbarMode() {
return this.nativeElement ? this.nativeElement.toolbarMode : undefined;
}
set toolbarMode(value) {
this.nativeElement ? this.nativeElement.toolbarMode = value : undefined;
}
/** @description Allows to configure the SingleLineRibbon appearance by changing the order and items of the groups. */
get toolbarRibbonConfig() {
return this.nativeElement ? this.nativeElement.toolbarRibbonConfig : undefined;
}
set toolbarRibbonConfig(value) {
this.nativeElement ? this.nativeElement.toolbarRibbonConfig = value : undefined;
}
/** @description Determines the format of the content that will be pasted inside the Editor. */
get toolbarViewMode() {
return this.nativeElement ? this.nativeElement.toolbarViewMode : undefined;
}
set toolbarViewMode(value) {
this.nativeElement ? this.nativeElement.toolbarViewMode = value : undefined;
}
/** @description Sticks the Toolbar to the top of the window and stays there while scrolling. */
get toolbarSticky() {
return this.nativeElement ? this.nativeElement.toolbarSticky : undefined;
}
set toolbarSticky(value) {
this.nativeElement ? this.nativeElement.toolbarSticky = value : undefined;
}
/** @description If is set to true, the element cannot be focused. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Sets or gets the value of the Editor. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description A function that can be used to completly customize the Editor dialog that is used to insert/edit tables/images/videos/hyperlinks. The function accepts two arguments: target - the target dialog that is about to be opened.item - the toolbar item object that trigger the dialog. */
get windowCustomizationFunction() {
return this.nativeElement ? this.nativeElement.windowCustomizationFunction : undefined;
}
set windowCustomizationFunction(value) {
this.nativeElement ? this.nativeElement.windowCustomizationFunction = value : undefined;
}
/** @description Blurs the content of the Editor.
*/
blur() {
if (this.nativeElement.isRendered) {
this.nativeElement.blur();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.blur();
});
}
}
/** @description Clears the content of the Editor.
*/
clearContent() {
if (this.nativeElement.isRendered) {
this.nativeElement.clearContent();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clearContent();
});
}
}
/** @description Collapse the Toolbar if the toolbarViewMode is set to 'toggle'.
*/
collapseToolbar() {
if (this.nativeElement.isRendered) {
this.nativeElement.collapseToolbar();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.collapseToolbar();
});
}
}
/** @description Disables a Toolbar item.
* @param {string} itemName. The name of the toolbar item to disable.
*/
disableToolbarItem(itemName) {
if (this.nativeElement.isRendered) {
this.nativeElement.disableToolbarItem(itemName);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.disableToolbarItem(itemName);
});
}
}
/** @description Expand the Toolbar if the toolbarViewMode is set to 'toggle'.
*/
expandToolbar() {
if (this.nativeElement.isRendered) {
this.nativeElement.expandToolbar();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.expandToolbar();
});
}
}
/** @description Enables a previously disabled Toolbar item.
* @param {string} itemName. The name of the toolbar item to enable.
*/
enableToolbarItem(itemName) {
if (this.nativeElement.isRendered) {
this.nativeElement.enableToolbarItem(itemName);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.enableToolbarItem(itemName);
});
}
}
/** @description Executes a command via the native execCommand method. The method returns true or false depending on whether the execution was successful or not. The following list of commands can be eexecuted: bold - makes the currently selected content bold. Example: editor.executeCommand('bold');italic - makes the currently selected content italic. Example: editor.executeCommand('italic');undelined - makes the currently selected content underlined. Example: editor.executeCommand('underline');strikeThrough - applies a single line strike through formatting to the currently selected content. Example: editor.executeCommand('strikeThrough');superscript - sets the selected content as superscript. Example: editor.executeCommand('superscript');subscript - sets the selected content as superscript. Example: editor.executeCommand('subscript');uppercase - changes the case of the current selection to upper. Example: editor.executeCommand('uppercase');lowercase - changes the case of the current selection to lower. Example: editor.executeCommand('lowercase');foreColor - changes the font color of the current content selection. Example: editor.executeCommand('foreColor', '#000000');fontName - changes the font name for the selected content. Example: editor.executeCommand('fontName', 'Arial');fontSize - changes the font size of the currently selected content. Example: editor.executeCommand('fontSize', '15px');hiliteColor - changes the background color of current selection. Example: editor.executeCommand('hiliteColor', '#000000');justifyCenter - aligns the content to the center. Example: editor.executeCommand('justifyCenter');justifyFull - aligns the content to be fully justified. Example: editor.executeCommand('justifyFull');justifyLeft - aligns the content to the left. Example: editor.executeCommand('justifyLeft');justifyRight - aligns the content to the right. Example: editor.executeCommand('justifyRight');undo - allows to undo the previous action. Example: editor.executeCommand('undo');redo - allows to redo the previous actions. Example: editor.executeCommand('redo');createLink - creates a hyperlink in the content section of the Editor. Example: editor.executeCommand('createLink', { text: 'Links', url: 'http://', title : 'Link' });indent - indents the content with one level. Example: editor.executeCommand('indent');outdent - outdents the content with one level. Example: editor.executeCommand('outdent');insertHTML - insert an HTML content as string at the current cursor location. Example: editor.executeCommand('insertHTML', 'Text');insertOrderedList - inserts a new numbered list item. Example: editor.executeCommand('insertOrderedList');insertUnorderedList - inserts a new bulleted list item. Example: editor.executeCommand('insertUnorderedList');removeFormat - removes the formatting styles from currently selected text. Example: editor.executeCommand('removeFormat');insertText - inserts a text at the current cursor location. Example: editor.executeCommand('insertText', 'Some text to insert');insertImage - inserts an image at the current cursor location. Example: editor.executeCommand('insertImage', { url: 'https://www.htmlelements.com/demos/images/carousel-medium-2.jpg'});
* @param {string} commandName. The name of the command to execute.
* @param {string | number} value?. The value for the command. Some commands require a value to be passed, others do not.
* @returns {boolean}
*/
executeCommand(commandName, value) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.executeCommand(commandName, value);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
/** @description Focuses the content of the Editor.
*/
focus() {
if (this.nativeElement.isRendered) {
this.nativeElement.focus();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.focus();
});
}
}
/** @description Returns the number of characters inside the Editor's content.
* @returns {number}
*/
getCharCount() {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getCharCount();
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
/** @description Returns the current selection range. By default the result is an object of type Range, but if the editMode property is set to 'markdown' the returned value is an object indicating the start/end indexes of the current selection.
* @returns {any}
*/
getSelectionRange() {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getSelectionRange();
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
/** @description Returns the content of the Editor as HTML. When editMode is set to 'markdown' the markdown is parsed and returned as HTML.
* @returns {string}
*/
getHTML() {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getHTML();
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
/** @description Returns the content of the Editor as text.
* @returns {string}
*/
getText() {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getText();
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
/** @description Hides a specific message or all messages if no argument is provided.
* @param {HTMLElement | string | number} item?. Hides a specific message. The argument can be a DOM reference to a specific item, it's index or it's id. If the argument is not provided then all messages will be closed.
*/
hideMessage(item) {
if (this.nativeElement.isRendered) {
this.nativeElement.hideMessage(item);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.hideMessage(item);
});
}
}
/** @description Hides the last shown message.
*/
hideLastMessage() {
if (this.nativeElement.isRendered) {
this.nativeElement.hideLastMessage();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.hideLastMessage();
});
}
}
/** @description Shows a custom message inside the Editor.
* @param {string} message. The text message to be displayed.
* @param {any} settings?. Additional settings that can be applied to the Toast element that handles the messages. This parameter should contain only valid Toast properties and values.
* @returns {HTMLElement | undefined}
*/
showMessage(message, settings) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.showMessage(message, settings);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
/** @description Selects the text inside Editor's content.
*/
selectAll() {
if (this.nativeElement.isRendered) {
this.nativeElement.selectAll();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.selectAll();
});
}
}
/** @description Selects a range of text inside the Editor. The method will find the nodes containing the text from the start to the end indexes and will select them as ranges. However, currently only FireFox supports multiple range selection. The rest of the browsers will only select the first node. If the editor is in 'html' editMode then the expected text will be selected regardless of the browser because there's only one node inside the editor.
* @param {number} startIndex. The start index to select from.
* @param {number} endIndex. The end index to select to.
*/
selectRange(startIndex, endIndex) {
if (this.nativeElement.isRendered) {
this.nativeElement.selectRange(startIndex, endIndex);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.selectRange(startIndex, endIndex);
});
}
}
/** @description Clears the local storage from previously stored states of the Editor with the current id.
*/
clearState() {
if (this.nativeElement.isRendered) {
this.nativeElement.clearState();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clearState();
});
}
}
/** @description Saves the current state of the Editor to local storage. Requires an id to be set to the Editor.
*/
saveState() {
if (this.nativeElement.isRendered) {
this.nativeElement.saveState();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.saveState();
});
}
}
/** @description Loads the last stored state of the Editor from local storage. Requires an id to be set to the Editor.
*/
loadState() {
if (this.nativeElement.isRendered) {
this.nativeElement.loadState();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.loadState();
});
}
}
/** @description Sets Editor into Split Mode. In split mode the HTML/Markdown editor and SourceCode/Preview panels are visible.
* @param {boolean} value?. Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.
*/
splitMode(value) {
if (this.nativeElement.isRendered) {
this.nativeElement.splitMode(value);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.splitMode(value);
});
}
}
/** @description Sets Editor into SourceCode/Preview Mode. In this mode the HTML view panel is displayed.
* @param {boolean} value?. Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.
*/
previewMode(value) {
if (this.nativeElement.isRendered) {
this.nativeElement.previewMode(value);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.previewMode(value);
});
}
}
/** @description Sets Editor into Full Screen Mode. If enabled the Editor is positioned above the page content and fills the screen.
* @param {boolean} value?. Determines whether to enter or leave split mode. By default the argument is not passed and the mode is toggled.
*/
fullScreenMode(value) {
if (this.nativeElement.isRendered) {
this.nativeElement.fullScreenMode(value);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.fullScreenMode(value);
});
}
}
/** @description Exports the content of the Editor in the desired format. The currently supported formats are: HTML, Markdown and PDF.
* @param {string} dataFormat. The expected file format.
* @param {any} callback?. A callback that is executed before the data is exported. Allows to modify the output.
*/
exportData(dataFormat, callback) {
if (this.nativeElement.isRendered) {
this.nativeElement.exportData(dataFormat, callback);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.exportData(dataFormat, callback);
});
}
}
/** @description Imports the content of a file to the Editor. The currently supported formats are: TXT or HTML.
* @param {any} source. The url to the file or an object that defines settings for the Ajax request like url, timeput, etc. Object format: { url: string, type: string, data: object, timeout: number }
* @param {any} settings?. Additional settings for the ajax request. Such as loadError function, contentType, etc. Format: { contentType: string, beforeSend: Function, loadError: Function, beforeLoadComplete: Function }
*/
importData(source, settings) {
if (this.nativeElement.isRendered) {
this.nativeElement.importData(source, settings);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.importData(source, settings);
});
}
}
/** @description Opens the Print Preview Panel of the Browser to print Editor's content.
*/
print() {
if (this.nativeElement.isRendered) {
this.nativeElement.print();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.print();
});
}
}
/** @description Allows to update the settings of a single toolbar item. The method returns true if successful.
* @param {string | number} name. The name of the toolbar item or it's index inside the <b>toolbarItems</b> array.
* @param {any} settings. A settings object for the toolbar item. It should have the same definition as when defining a custom toolbar item. You can read more about it in the dedicated topic for the Editor Toolbar on the website.
* @returns {boolean | undefined}
*/
updateToolbarItem(name, settings) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.updateToolbarItem(name, settings);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}