src/app/ngx-editor/ngx-editor.component.ts
providers |
{
: , : (() => ), : true
}
|
selector | app-ngx-editor |
styleUrls | ngx-editor.component.scss |
templateUrl | ./ngx-editor.component.html |
Properties |
Methods |
Inputs |
HostListeners |
constructor(_elementRef: ElementRef, _messageService: MessageService, _commandExecutor: CommandExecutorService, _renderer: Renderer2)
|
||||||||||||||||||||
Parameters :
|
config
|
Default value: |
editable
|
Type: |
height
|
Type: |
minHeight
|
Type: |
minWidth
|
Type: |
placeholder
|
Type: |
resizer
|
Default value: |
showToolbar
|
Default value: |
spellcheck
|
Type: |
toolbar
|
Type: |
translate
|
Type: |
width
|
Type: |
document:click |
Arguments : '$event'
|
document:click(event: )
|
executeCommand | ||||||||
executeCommand(commandName: string)
|
||||||||
editor actions, i.e., executes command from toolbar
Parameters :
Returns :
void
|
getCollectiveParams |
getCollectiveParams()
|
return a json containing input params
Returns :
any
|
onBlur |
onBlur()
|
Returns :
void
|
onContentChange | ||||||||
onContentChange(html: string)
|
||||||||
Parameters :
Returns :
void
|
onFocus |
onFocus()
|
events
Returns :
void
|
refreshView | ||||||||
refreshView(value: string)
|
||||||||
refresh view/HTML of the editor
Parameters :
Returns :
void
|
registerOnChange | ||||||||
registerOnChange(fn: any)
|
||||||||
Set the function to be called when the control receives a change event.
Parameters :
Returns :
void
|
registerOnTouched | ||||||||
registerOnTouched(fn: any)
|
||||||||
Set the function to be called when the control receives a touch event.
Parameters :
Returns :
void
|
resizeTextArea | ||||||||
resizeTextArea(offsetY: number)
|
||||||||
resizing text area
Parameters :
Returns :
void
|
writeValue | ||||||||
writeValue(value: any)
|
||||||||
Write a new value to the element.
Parameters :
Returns :
void
|
enableToolbar |
enableToolbar:
|
Default value : false
|
textArea |
textArea:
|
Type : any
|
Decorators : ViewChild
|
Utils |
Utils:
|
Default value : Utils
|
import {
Component, OnInit, Input, Output,
ViewChild, HostListener, ElementRef, EventEmitter,
Renderer2, forwardRef
} from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { CommandExecutorService } from './common/services/command-executor.service';
import { MessageService } from './common/services/message.service';
import { ngxEditorConfig } from './common/ngx-editor.defaults';
import * as Utils from './common/utils/ngx-editor.utils';
@Component({
selector: 'app-ngx-editor',
templateUrl: './ngx-editor.component.html',
styleUrls: ['./ngx-editor.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxEditorComponent),
multi: true
}
]
})
export class NgxEditorComponent implements OnInit, ControlValueAccessor {
@Input() editable: boolean;
@Input() spellcheck: boolean;
@Input() placeholder: string;
@Input() translate: string;
@Input() height: string;
@Input() minHeight: string;
@Input() width: string;
@Input() minWidth: string;
@Input() toolbar: any;
@Input() resizer = 'stack';
@Input() config = ngxEditorConfig;
@Input() showToolbar = true;
@ViewChild('ngxTextArea') textArea: any;
enableToolbar = false;
Utils = Utils;
private lastViewModel: any = '';
private onChange: (value: string) => void;
private onTouched: () => void;
/**
*
* @param _elementRef api to access dom element
* @param _messageService service to send message to the editor message component
* @param _commandExecutor executes command from the toolbar
* @param _renderer access and manipulate the dom element
*/
constructor(
private _elementRef: ElementRef,
private _messageService: MessageService,
private _commandExecutor: CommandExecutorService,
private _renderer: Renderer2) { }
/**
* events
*/
onFocus(): void {
this.enableToolbar = true;
return;
}
@HostListener('document:click', ['$event']) onDocumentClick(event) {
this.enableToolbar = !!this._elementRef.nativeElement.contains(event.target);
}
/**
*
* @param html html string from contenteditable
*/
onContentChange(html: string): void {
if (typeof this.onChange === 'function') {
this.onChange(html);
}
return;
}
onBlur(): void {
if (typeof this.onTouched === 'function') {
this.onTouched();
}
return;
}
/**
* resizing text area
*
* @param offsetY vertical height of the eidtable portion of the editor
*/
resizeTextArea(offsetY: number): void {
let newHeight = parseInt(this.height, 10);
newHeight += offsetY;
this.height = newHeight + 'px';
this.textArea.nativeElement.style.height = this.height;
return;
}
/**
* editor actions, i.e., executes command from toolbar
*
* @param commandName name of the command to be executed
*/
executeCommand(commandName: string): void {
try {
this._commandExecutor.execute(commandName);
} catch (error) {
this._messageService.sendMessage(error.message);
}
return;
}
/**
* Write a new value to the element.
*
* @param value value to be executed when there is a change in contenteditable
*/
writeValue(value: any): void {
if (value === undefined) {
return;
}
this.refreshView(value);
}
/**
* Set the function to be called
* when the control receives a change event.
*
* @param fn a function
*/
registerOnChange(fn: any): void {
this.onChange = fn;
}
/**
* Set the function to be called
* when the control receives a touch event.
*
* @param fn a function
*/
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
/**
* refresh view/HTML of the editor
*
* @param value html string from the editor
*/
refreshView(value: string): void {
const normalizedValue = value == null ? '' : value;
this._renderer.setProperty(this.textArea.nativeElement, 'innerHTML', normalizedValue);
return;
}
/**
* return a json containing input params
*/
getCollectiveParams(): any {
return {
editable: this.editable,
spellcheck: this.spellcheck,
placeholder: this.placeholder,
translate: this.translate,
height: this.height,
minHeight: this.minHeight,
width: this.width,
minWidth: this.minWidth,
toolbar: this.toolbar
};
}
ngOnInit() {
/**
* set configuartion
*/
this.config = this.Utils.getEditorConfiguration(this.config, ngxEditorConfig, this.getCollectiveParams());
this.height = this.height || this.textArea.nativeElement.offsetHeight;
this.executeCommand('enableObjectResizing');
}
}
<div class="ngx-editor" id="ngxEditor" [style.width]="config['width']" [style.minWidth]="config['minWidth']">
<app-ngx-editor-toolbar [config]="config" [enableToolbar]="enableToolbar" [showToolbar]="showToolbar" (execute)="executeCommand($event)"></app-ngx-editor-toolbar>
<!-- text area -->
<div class="ngx-editor-textarea" [attr.contenteditable]="config['editable']" [attr.placeholder]="config['placeholder']" (input)="onContentChange($event.target.innerHTML)"
[attr.translate]="config['translate']" [attr.spellcheck]="config['spellcheck']" [style.height]="config['height']" [style.minHeight]="config['minHeight']"
[style.resize]="Utils?.canResize(resizer)" (focus)="onFocus()" (blur)="onBlur()" #ngxTextArea></div>
<app-ngx-editor-message></app-ngx-editor-message>
<app-ngx-grippie *ngIf="resizer === 'stack'"></app-ngx-grippie>
</div>