Color input can be a hex code or rgba or a color name.
Make Sure the HTML color names are supported by all browsers.
+ +Color input can be a hex code or rgba value or a color name.
Make Sure the HTML color names are supported by all browsers.
+ +Some common error responses given by editor and reasons
+Font size can have any values as suggested here. If the input is a number then it will be treated as pixel, Other values are inserted as it is. Make sure you pass the correct input.
Color input can be a hex code or rgba or a color name.
Make Sure the HTML color names are supported by all browsers.
+ +Color input can be a hex code or rgba or a color name.
Make Sure the HTML color names are supported by all browsers.
+ +Toolbar option is an array of arrays. The default is
[
["bold", "italic", "underline", "strikeThrough", "superscript", "subscript"],
+ ["fontSize", "color"],
["justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "indent", "outdent"],
["cut", "copy", "delete", "removeFormat", "undo", "redo"],
["paragraph", "blockquote", "removeBlockquote", "horizontalLine", "orderedList", "unorderedList"],
diff --git a/docs/components/NgxEditorComponent.html b/docs/components/NgxEditorComponent.html
index 32853495..876ff5b4 100644
--- a/docs/components/NgxEditorComponent.html
+++ b/docs/components/NgxEditorComponent.html
@@ -61,7 +61,7 @@
data-target="#xs-additional-pages"
>
- Additional documentation
+ Wiki
@@ -232,7 +241,7 @@
data-target="#additional-pages"
>
- Additional documentation
+ Wiki
diff --git a/docs/components/NgxEditorMessageComponent.html b/docs/components/NgxEditorMessageComponent.html
index 9aa982d0..02a779d3 100644
--- a/docs/components/NgxEditorMessageComponent.html
+++ b/docs/components/NgxEditorMessageComponent.html
@@ -61,7 +61,7 @@
data-target="#xs-additional-pages"
>
- Additional documentation
+ Wiki
@@ -232,7 +241,7 @@
data-target="#additional-pages"
>
- Additional documentation
+ Wiki
diff --git a/docs/components/NgxEditorToolbarComponent.html b/docs/components/NgxEditorToolbarComponent.html
index 7f29cc43..e275dcb8 100644
--- a/docs/components/NgxEditorToolbarComponent.html
+++ b/docs/components/NgxEditorToolbarComponent.html
@@ -61,7 +61,7 @@
data-target="#xs-additional-pages"
>
- Additional documentation
+ Wiki
@@ -232,7 +241,7 @@
data-target="#additional-pages"
>
- Additional documentation
+ Wiki
@@ -460,6 +478,12 @@ Properties
+ -
+ colorPopover
+
+ -
+ fontSizePopover
+
-
imageForm
@@ -469,6 +493,9 @@ Properties
-
isUploading
+ -
+ selectedColorTab
+
-
updloadPercentage
@@ -501,6 +528,9 @@ Methods
-
canEnableToolbarOptions
+ -
+ insertColor
+
-
insertImage
@@ -510,6 +540,9 @@ Methods
-
onFileChange
+ -
+ setFontSize
+
-
triggerCommand
@@ -559,7 +592,7 @@ Constructor
-
+
@@ -653,7 +686,7 @@ Inputs
-
+
@@ -678,7 +711,7 @@ Outputs
-
+
@@ -714,7 +747,7 @@
-
+
@@ -753,7 +786,7 @@
-
+
@@ -792,7 +825,7 @@
-
+
@@ -842,6 +875,90 @@
+
+
+
+
+
+
+
+ insertColor
+
+
+
+
+
+
+
+ insertColor(color: string, where: string)
+
+
+
+
+
+
+
+
+
+
+
+
+ inser text/background color
+
+
+
+ Parameters :
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ color
+
+
+ string
+
+
+
+ no
+
+
+
+
+
+ where
+
+
+ string
+
+
+
+ no
+
+
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
+
+
+
+
@@ -864,7 +981,7 @@
-
+
@@ -903,7 +1020,7 @@
-
+
@@ -942,7 +1059,7 @@
-
+
@@ -992,6 +1109,77 @@
+
+
+
+
+
+
+
+ setFontSize
+
+
+
+
+
+
+
+ setFontSize(fontSize: string)
+
+
+
+
+
+
+
+
+
+
+
+
+ set font size
+
+
+
+ Parameters :
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ fontSize
+
+
+ string
+
+
+
+ no
+
+
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
+
+
+
+
@@ -1014,7 +1202,7 @@
-
+
@@ -1075,6 +1263,72 @@
Properties
+
+
+
+
+
+
+
+ colorPopover
+
+
+
+
+
+
+
+ colorPopover:
+
+
+
+
+ Decorators : ViewChild
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ fontSizePopover
+
+
+
+
+
+
+
+ fontSizePopover:
+
+
+
+
+ Decorators : ViewChild
+
+
+
+
+
+
+
+
+
+
+
@@ -1141,7 +1395,7 @@
-
+
@@ -1187,6 +1441,51 @@
+
+
+
+
+
+
+
+ selectedColorTab
+
+
+
+
+
+
+
+ selectedColorTab: string
+
+
+
+
+
+ Type : string
+
+
+
+
+
+ Default value : 'textColor'
+
+
+
+
+
+
+
+
+
+
+ which tab to active for color insetion
+
+
+
+
+
+
@@ -1337,7 +1636,7 @@
-
+
@@ -1377,6 +1676,8 @@
updloadPercentage = 0;
/** set to true when the image is being uploaded */
isUploading = false;
+ /** which tab to active for color insetion */
+ selectedColorTab = 'textColor';
/**
* Editor configuration
@@ -1384,6 +1685,8 @@
@Input() config: any;
@ViewChild('urlPopover') urlPopover;
@ViewChild('imagePopover') imagePopover;
+ @ViewChild('fontSizePopover') fontSizePopover;
+ @ViewChild('colorPopover') colorPopover;
/**
* Emits an event when a toolbar button is clicked
*/
@@ -1514,6 +1817,34 @@
this.buildInsertImageForm();
/** close inset URL pop up */
this.imagePopover.hide();
+
+ return;
+ }
+
+ /** inser text/background color */
+ insertColor(color: string, where: string): void {
+
+ try {
+ this._commandExecutorService.insertColor(color, where);
+ } catch (error) {
+ this._messageService.sendMessage(error.message);
+ }
+
+ this.colorPopover.hide();
+ return;
+ }
+
+ /** set font size */
+ setFontSize(fontSize: string): void {
+
+ try {
+ this._commandExecutorService.setFontSize(fontSize);
+ } catch (error) {
+ this._messageService.sendMessage(error.message);
+ }
+
+ this.fontSizePopover.hide();
+ return;
}
ngOnInit() {
@@ -1553,6 +1884,16 @@
<i class="fa fa-subscript" aria-hidden="true"></i>
</button>
</div>
+ <div class="ngx-toolbar-set">
+ <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('fontSize')" (click)="fontSize = ''" title="Font Size"
+ [popover]="fontSizeTemplate" #fontSizePopover="bs-popover" [disabled]="!config['enableToolbar']">
+ <i class="fa fa-text-height" aria-hidden="true"></i>
+ </button>
+ <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('color')" (click)="hexColor = ''" title="Color Picker"
+ [popover]="insertColorTemplate" #colorPopover="bs-popover" [disabled]="!config['enableToolbar']">
+ <i class="fa fa-tint" aria-hidden="true"></i>
+ </button>
+ </div>
<div class="ngx-toolbar-set">
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyLeft')" (click)="triggerCommand('justifyLeft')"
title="Justify Left" [disabled]="!config['enableToolbar']">
@@ -1655,7 +1996,7 @@
<!-- URL Popover template -->
<ng-template #insertLinkTemplate>
- <div class="ngxe-popover-form extra-gt">
+ <div class="ngxe-popover extra-gt">
<form [formGroup]="urlForm" (ngSubmit)="urlForm.valid && insertLink()" autocomplete="off">
<div class="form-group">
<label for="urlInput" class="small">URL</label>
@@ -1676,16 +2017,16 @@
<!-- Image Uploader Popover template -->
<ng-template #insertImageTemplate>
- <div class="ngxe-popover-form image-ctnr">
- <div class="imgc-topbar">
- <button type="button" class="btn" (click)="isImageUploader = true">
+ <div class="ngxe-popover imgc-ctnr">
+ <div class="imgc-topbar btn-ctnr">
+ <button type="button" class="btn" [ngClass]="{active: isImageUploader}" (click)="isImageUploader = true">
<i class="fa fa-upload"></i>
</button>
- <button type="button" class="btn" (click)="isImageUploader = false">
+ <button type="button" class="btn" [ngClass]="{active: !isImageUploader}" (click)="isImageUploader = false">
<i class="fa fa-link"></i>
</button>
</div>
- <div class="imgc-ctnt">
+ <div class="imgc-ctnt is-image">
<div *ngIf="isImageUploader; else insertImageLink"> </div>
<div *ngIf="!isImageUploader; else imageUploder"> </div>
<ng-template #imageUploder>
@@ -1717,6 +2058,40 @@
</div>
</div>
</ng-template>
+
+<!-- Insert color template -->
+<ng-template #insertColorTemplate>
+ <div class="ngxe-popover imgc-ctnr">
+ <div class="imgc-topbar two-tabs">
+ <span (click)="selectedColorTab ='textColor'" [ngClass]="{active: selectedColorTab ==='textColor'}">Text</span>
+ <span (click)="selectedColorTab ='backgroundColor'" [ngClass]="{active: selectedColorTab ==='backgroundColor'}">Background</span>
+ </div>
+ <div class="imgc-ctnt is-color extra-gt1">
+ <form autocomplete="off">
+ <div class="form-group">
+ <label for="hexInput" class="small">Hex Color</label>
+ <input type="text" class="form-control-sm" id="hexInput" name="hexInput" maxlength="7" placeholder="HEX Color" [(ngModel)]="hexColor"
+ required>
+ </div>
+ <button type="button" class="btn-primary btn-sm btn" (click)="insertColor(hexColor, selectedColorTab)">Submit</button>
+ </form>
+ </div>
+ </div>
+</ng-template>
+
+<!-- font size template -->
+<ng-template #fontSizeTemplate>
+ <div class="ngxe-popover extra-gt1">
+ <form autocomplete="off">
+ <div class="form-group">
+ <label for="fontSize" class="small">Font Size</label>
+ <input type="text" class="form-control-sm" id="fontSize" name="fontSize" placeholder="Font size in px/rem" [(ngModel)]="fontSize"
+ required>
+ </div>
+ <button type="button" class="btn-primary btn-sm btn" (click)="setFontSize(fontSize)">Submit</button>
+ </form>
+ </div>
+</ng-template>
@@ -1743,7 +2118,7 @@