diff --git a/src/Squidex/app/features/content/pages/content/content-field.component.html b/src/Squidex/app/features/content/pages/content/content-field.component.html index 281671073..226c6d008 100644 --- a/src/Squidex/app/features/content/pages/content/content-field.component.html +++ b/src/Squidex/app/features/content/pages/content/content-field.component.html @@ -53,7 +53,7 @@
- +
diff --git a/src/Squidex/app/features/content/pages/content/content-field.component.ts b/src/Squidex/app/features/content/pages/content/content-field.component.ts index 5e4e9a826..97b8a6bf0 100644 --- a/src/Squidex/app/features/content/pages/content/content-field.component.ts +++ b/src/Squidex/app/features/content/pages/content/content-field.component.ts @@ -35,27 +35,6 @@ export class ContentFieldComponent implements OnInit { public fieldPartitions: string[]; public fieldPartition: string; - public richTextEditorOptions: any; - - private buildRichTextEditorOptions() { - const self = this; - return { - toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image assets', - plugins: 'code,image', - file_picker_types: 'image', - convert_urls: false, - onSetup: (editor: any) => { - editor.addButton('assets', { - text: '', - icon: 'browse', - tooltip: 'Insert Assets', - onclick: () => { - self.router.navigate(['assets'], { relativeTo: self.route }) - } - }); - } - }; - } public selectLanguage(language: AppLanguageDto) { this.fieldPartition = language.iso2Code; @@ -63,8 +42,6 @@ export class ContentFieldComponent implements OnInit { public ngOnInit() { this.masterLanguageCode = this.languages.find(l => l.isMaster).iso2Code; - this.richTextEditorOptions = this.buildRichTextEditorOptions(); - if (this.field.isDisabled) { this.fieldForm.disable(); } @@ -78,6 +55,10 @@ export class ContentFieldComponent implements OnInit { } } + public richTextEditorAssetPluginClicked(event: any) { + this.router.navigate(['assets'], { relativeTo: this.route }); + } + public selectFieldLanguage(partition: string) { return partition === 'iv' ? this.masterLanguageCode : partition; } diff --git a/src/Squidex/app/shared/components/asset.component.ts b/src/Squidex/app/shared/components/asset.component.ts index 2b4014544..6b7b82430 100644 --- a/src/Squidex/app/shared/components/asset.component.ts +++ b/src/Squidex/app/shared/components/asset.component.ts @@ -45,7 +45,7 @@ export class AssetComponent implements OnInit { @Input() public closeMode = false; - + @Output() public loaded = new EventEmitter(); diff --git a/src/Squidex/app/shared/components/rich-editor.component.ts b/src/Squidex/app/shared/components/rich-editor.component.ts index 86f6fd8a6..3104b0c84 100644 --- a/src/Squidex/app/shared/components/rich-editor.component.ts +++ b/src/Squidex/app/shared/components/rich-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, ViewChild, Input } from '@angular/core'; +import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms'; import { MessageBus, AssetDragged, AssetsService, Types, ResourceLoaderService } from './../declarations-base'; @@ -35,8 +35,9 @@ export class RichEditorComponent implements ControlValueAccessor, AfterViewInit, @ViewChild('editor') public editor: ElementRef; - @Input() - public editorOptions: any; + + @Output() + public assetPluginClicked = new EventEmitter(); public assetsForm = this.formBuilder.group({ name: [''] @@ -59,9 +60,13 @@ export class RichEditorComponent implements ControlValueAccessor, AfterViewInit, }); } - private editorDefaultOptions() { + private getEditorOptions() { const self = this; return { + toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media assets', + plugins: 'code,image,media', + file_picker_types: 'image', + convert_urls: false, setup: (editor: any) => { self.tinyEditor = editor; self.tinyEditor.setMode(this.isDisabled ? 'readonly' : 'design'); @@ -80,12 +85,16 @@ export class RichEditorComponent implements ControlValueAccessor, AfterViewInit, self.callTouched(); }); - // TODO: expose an observable to which we can subscribe to - if (Types.isFunction(self.editorOptions.onSetup)) { - self.editorOptions.onSetup(editor); - } + editor.addButton('assets', { + text: '', + icon: 'browse', + tooltip: 'Insert Assets', + onclick: (event: any) => { + self.assetPluginClicked.emit(event); + } + }); - this.tinyInitTimer = + self.tinyInitTimer = setTimeout(() => { self.tinyEditor.setContent(this.value || ''); }, 500); @@ -103,10 +112,8 @@ export class RichEditorComponent implements ControlValueAccessor, AfterViewInit, public ngAfterViewInit() { const self = this; - this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.4/tinymce.min.js').then(() => { - let editorOptions = { ...self.editorDefaultOptions(), ...self.editorOptions }; - tinymce.init(editorOptions); + tinymce.init(self.getEditorOptions()); }); }