projects/tl-elements/src/lib/tl-wysiwyg/tl-wysiwyg.component.ts
| selector | tl-wysiwyg-component |
| styleUrls | ./tl-wysiwyg.component.scss |
| templateUrl | ./tl-wysiwyg.component.html |
Properties |
Inputs |
HostBindings |
constructor(injector: Injector)
|
||||||
|
Parameters :
|
| emitEvent | |
Type : string
|
|
Default value : ''
|
|
| height | |
Type : string
|
|
Default value : '500'
|
|
|
Provide custom height. |
|
| initialValue | |
Type : string
|
|
Default value : ''
|
|
| inheritFontStyle | |
Type : "true" | "false"
|
|
|
Inherited from
TamuAbstractBaseComponent
|
|
|
Defined in
TamuAbstractBaseComponent:14
|
|
| style.--tl-font-family-sans-serif |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:12
|
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
| style.--tl-font-size |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:9
|
|
Allows for the override of the --tl-default-font-size css variable. |
| skin |
Type : string
|
Default value : 'oxide'
|
|
Provide customization of WYSIWYG skin theme. |
| toolbar |
Type : string
|
Default value : 'undo redo | bold italic removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | help cancel save'
|
|
Provide customization of WYSIWYG toolbar buttons. |
| _fontFamily |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
Decorators :
@HostBinding('style.--tl-font-family-sans-serif')
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:12
|
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
| _fontSize |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
Decorators :
@HostBinding('style.--tl-font-size')
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:9
|
|
Allows for the override of the --tl-default-font-size css variable. |
import { Component, Injector, Input } from '@angular/core';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
@Component({
selector: 'tl-wysiwyg-component',
templateUrl: './tl-wysiwyg.component.html',
styleUrls: ['./tl-wysiwyg.component.scss']
})
export class TlWysiwygComponent extends TamuAbstractBaseComponent {
@Input() initialValue = '';
@Input() emitEvent = '';
/** Provide customization of WYSIWYG skin theme. */
skin = 'oxide';
/** Provide customization of WYSIWYG toolbar buttons. */
toolbar = 'undo redo | bold italic removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | help cancel save';
/** Provide custom height. */
@Input() height = '500';
// tslint:disable-next-line:unnecessary-constructor
constructor(injector: Injector) {
super(injector);
}
}
<tl-wysiwyg-wrapper #animationRoot>
<wvr-wysiwyg-component [skin]="skin" [initialValue]="initialValue" [emitSaveEvent]="emitEvent" [toolbar]="toolbar" [height]="height"></wvr-wysiwyg-component>
</tl-wysiwyg-wrapper>
./tl-wysiwyg.component.scss
@import "../shared/styles/tl-variables.scss";
:host {
wvr-editor-component {
font-family: var(--tl-font-family-sans-serif);
::ng-deep {
.wvr-editor {
font-family: var(--tl-font-family-sans-serif);
}
}
}
}