Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 12x 1x 2x 7x 3x 1x 1x 1x 1x 15x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x | import { ChangeDetectionStrategy, Component, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { select } from '@ngrx/store';
import { EditorComponent } from '@tinymce/tinymce-angular';
import * as JSON5 from 'json5';
import { filter, map } from 'rxjs/operators';
import tinymce from 'tinymce';
import { selectWysiwygById } from '../core/store';
import * as WysiwygActions from '../core/wysiwyg/wysiwyg.actions';
import { WvrBaseComponent } from '../shared/wvr-base.component';
import * as wvrEditor from './wvr-wysiwyg.json';
@Component({
selector: 'wvr-wysiwyg-component',
templateUrl: './wvr-wysiwyg.component.html',
styleUrls: ['./wvr-wysiwyg.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class WvrWysiwygComponent extends WvrBaseComponent implements OnInit, OnDestroy {
content: string;
@ViewChild(EditorComponent) editor;
@Input() initialValue: string;
@Input() outputFormat: 'text' | 'html' = 'html';
@Input() set baseUrl(baseUrl: string) { this.config.base_url = baseUrl; }
get baseUrl(): string { return this.config.base_url; }
@Input() set skin(skin: string) { this.config.skin = skin; }
get skin(): string { return this.config.skin; }
@Input() set plugins(plugins: Array<string>) { this.config.plugins = plugins; }
get plugins(): Array<string> { return this.config.plugins; }
@Input() set toolbar(toolbar: string) { this.config.toolbar = toolbar; }
get toolbar(): string { return this.config.toolbar; }
@Input() set menu(editorMenu: any) { this.config.menu = JSON5.parse(editorMenu); }
get menu(): any { return this.config.menu; }
@Input() emitSaveEvent: string;
@Input() set height(height: string) { this.config.height = height; }
get height(): string { return this.config.height; }
config = {
base_url: 'tinymce',
skin: 'oxide',
plugins: [
"advlist", "autolink", "lists", "link", "image", "charmap", "print",
"preview", "anchor", "searchreplace", "visualblocks", "code",
"fullscreen", "insertdatetime", "media", "table", "paste",
"help", "wordcount", "print", "preview", "save"
],
toolbar: 'undo redo | print formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table pagebreak | charmap codesample image | removeformat | help | cancel save',
menu: (wvrEditor as any).default,
height: '300',
save_oncancelcallback: $event => {
this.onReset($event);
},
save_onsavecallback: $event => {
this.onSave($event);
},
promotion: false
};
htmlId = `wvr-wysiwyg-${this.id}`;
constructor(injector: Injector) {
super(injector);
this.config.base_url = `${this.appConfig.assetsUrl}/tinymce`;
}
ngOnInit(): void {
super.ngOnInit();
this.store.dispatch(WysiwygActions.addWysiwyg({
wysiwyg: {
id: `${this.id}`,
initialContent: `${this.initialValue}`,
content: this.initialValue
}
}));
this.subscriptions.push(this.store
.pipe(
select(selectWysiwygById(`${this.id}`)),
filter(wysiwyg => !!wysiwyg),
map(wysiwyg => wysiwyg.content)
)
.subscribe((content: string) => {
this.content = content;
}));
}
ngOnDestroy(): void {
super.ngOnDestroy();
Eif (!!this.editor) {
tinymce.remove(this.editor);
}
}
onReset($event): void {
this.store.dispatch(WysiwygActions.resetWysiwyg({
id: `${this.id}`
}));
}
onSave($event): void {
this.store.dispatch(WysiwygActions.saveWysiwyg({
content: this.content,
id: `${this.id}`
}));
if (this.emitSaveEvent) {
this.eRef.nativeElement.dispatchEvent(new CustomEvent(this.emitSaveEvent, {
bubbles: true,
detail: {
data: this.content,
wysiwyg: this
}
}));
}
}
}
|