From bf68035f8a474e759bf53625575b0330b29c39b0 Mon Sep 17 00:00:00 2001 From: sowobm Date: Wed, 8 Nov 2017 11:44:11 +0200 Subject: [PATCH] rich text editor assets drag and drop --- src/Squidex/Squidex.csproj | 8 ++ .../content/content-field.component.html | 2 +- .../pages/content/content-field.component.ts | 27 ++++- .../pages/content/content-page.component.html | 2 +- .../shared/components/asset-drop.handler.ts | 37 ++++++ .../shared/components/asset.component.html | 2 +- .../app/shared/components/asset.component.ts | 3 - .../components/rich-editor.component.html | 14 ++- .../components/rich-editor.component.scss | 40 ++++--- .../components/rich-editor.component.ts | 107 ++++++++++++------ 10 files changed, 177 insertions(+), 65 deletions(-) create mode 100644 src/Squidex/app/shared/components/asset-drop.handler.ts diff --git a/src/Squidex/Squidex.csproj b/src/Squidex/Squidex.csproj index a7ffd5aa4..0f90c7e1c 100644 --- a/src/Squidex/Squidex.csproj +++ b/src/Squidex/Squidex.csproj @@ -22,6 +22,10 @@ + + + + PreserveNewest @@ -81,6 +85,10 @@ + + + + <_DocumentationFile Include="$(DocumentationFile)" /> 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 113649272..281671073 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 4625524d7..acefa3803 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 @@ -5,7 +5,7 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, ViewChild, ElementRef } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { AppLanguageDto, FieldDto } from 'shared'; @@ -32,6 +32,30 @@ export class ContentFieldComponent implements OnInit { public fieldPartitions: string[]; public fieldPartition: string; + public richTextEditorOptions: any; + + @ViewChild('assets') + public assetLink: ElementRef; + + 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: () => { + console.log(this.assetLink); + } + }); + } + }; + } public selectLanguage(language: AppLanguageDto) { this.fieldPartition = language.iso2Code; @@ -39,6 +63,7 @@ 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(); diff --git a/src/Squidex/app/features/content/pages/content/content-page.component.html b/src/Squidex/app/features/content/pages/content/content-page.component.html index eaf689467..ba454af4a 100644 --- a/src/Squidex/app/features/content/pages/content/content-page.component.html +++ b/src/Squidex/app/features/content/pages/content/content-page.component.html @@ -49,7 +49,7 @@ - + diff --git a/src/Squidex/app/shared/components/asset-drop.handler.ts b/src/Squidex/app/shared/components/asset-drop.handler.ts new file mode 100644 index 000000000..69d846068 --- /dev/null +++ b/src/Squidex/app/shared/components/asset-drop.handler.ts @@ -0,0 +1,37 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Sebastian Stehle. All rights reserved + */ + +import { AssetUrlPipe } from './pipes'; +import { ApiUrlConfig, AssetDto } from './../declarations-base'; + +export class AssetDropHandler { + + private assetUrlGenerator: AssetUrlPipe; + + constructor(private readonly apiUrlConfig: ApiUrlConfig) { + this.assetUrlGenerator = new AssetUrlPipe(this.apiUrlConfig); + } + + public buildDroppedAssetData(asset: AssetDto, dragEvent: DragEvent) { + switch (asset.mimeType) { + + case 'image/jpeg': + case 'image/jpg': + case 'image/png': + case 'image/gif': + return this.handleImageAsset(asset, dragEvent); + default: + return ''; + } + } + + private handleImageAsset(asset: AssetDto, dragEvent: DragEvent) { + let res = ''; + return res; + } +} \ No newline at end of file diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html index af8ff345b..95fd99dd7 100644 --- a/src/Squidex/app/shared/components/asset.component.html +++ b/src/Squidex/app/shared/components/asset.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/Squidex/app/shared/components/asset.component.ts b/src/Squidex/app/shared/components/asset.component.ts index 1a78c7dc4..94b6415c1 100644 --- a/src/Squidex/app/shared/components/asset.component.ts +++ b/src/Squidex/app/shared/components/asset.component.ts @@ -59,9 +59,6 @@ export class AssetComponent extends AppComponentBase implements OnInit { @Output() public deleting = new EventEmitter(); - @Output() - public clicked = new EventEmitter(); - @Output() public failed = new EventEmitter(); diff --git a/src/Squidex/app/shared/components/rich-editor.component.html b/src/Squidex/app/shared/components/rich-editor.component.html index 69a0991e9..b9efa5ec6 100644 --- a/src/Squidex/app/shared/components/rich-editor.component.html +++ b/src/Squidex/app/shared/components/rich-editor.component.html @@ -1,6 +1,14 @@ -
+
+
+

Drop asset in this zone to insert into content

+
+
+
-
+ \ No newline at end of file diff --git a/src/Squidex/app/shared/components/rich-editor.component.scss b/src/Squidex/app/shared/components/rich-editor.component.scss index 33c03a1e5..24e175db7 100644 --- a/src/Squidex/app/shared/components/rich-editor.component.scss +++ b/src/Squidex/app/shared/components/rich-editor.component.scss @@ -6,31 +6,29 @@ border: 1px solid $color-input; height: 30rem; } -.asset-selector { - z-index: 65560; +.editor-container { + position: relative; - .modal-header { - background: transparent; - border-bottom: 1px solid #c5c5c5; - - .modal-title { - text-decoration: none; - color: #333; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - text-shadow: none; - } + .drop-zone { + background: rgba(238, 241, 244, 0.89); + z-index: 5000; + position: absolute; + top: 92px; + left: 20px; + right: 30px; + border-color: #c8d2db; + border-style: dashed; + opacity: 0; + display: none; } - .modal-content { - width: 100%; - border-radius: 0; - -webkit-border-radius: 0; - } - .modal-dialog { - max-width: 900px; + h3 { + text-align: center; + padding-top: 35%; } - .btn { - border-radius: 0; + .drop-zone.active { + opacity: 1; + display:block; } } \ No newline at end of file diff --git a/src/Squidex/app/shared/components/rich-editor.component.ts b/src/Squidex/app/shared/components/rich-editor.component.ts index f95670a4d..0ea70500a 100644 --- a/src/Squidex/app/shared/components/rich-editor.component.ts +++ b/src/Squidex/app/shared/components/rich-editor.component.ts @@ -5,12 +5,13 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, ViewChild, Input } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms'; import { AppComponentBase } from './app.component-base'; import { AssetUrlPipe } from './pipes'; import { ApiUrlConfig, ModalView, AppsStoreService, AssetDto, AssetsService, ImmutableArray, DialogService, AuthService, Pager, Types, ResourceLoaderService } from './../declarations-base'; +import { AssetDropHandler } from './asset-drop.handler'; declare var tinymce: any; @@ -36,9 +37,13 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu public assetsPager = new Pager(0, 0, 12); private assetUrlGenerator: AssetUrlPipe; private assetsMimeTypes: Array = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif']; + private assetDropHandler: AssetDropHandler; + public draggedOver = false; @ViewChild('editor') public editor: ElementRef; + @Input() + public editorOptions: any; public assetsDialog = new ModalView(); public assetsForm = this.formBuilder.group({ @@ -53,6 +58,7 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu ) { super(dialogs, apps, authService); this.assetUrlGenerator = new AssetUrlPipe(this.apiUrlConfig); + this.assetDropHandler = new AssetDropHandler(this.apiUrlConfig); } private load() { @@ -66,6 +72,61 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu }); } + private editorDefaultOptions() { + const self = this; + return { + setup: (editor: any) => { + self.tinyEditor = editor; + self.tinyEditor.setMode(this.isDisabled ? 'readonly' : 'design'); + + self.tinyEditor.on('change', () => { + const value = editor.getContent(); + + if (this.value !== value) { + this.value = value; + + self.callChange(value); + } + }); + + self.tinyEditor.on('blur', () => { + self.callTouched(); + }); + + self.tinyEditor.on('init', () => { + let editorDoc = self.tinyEditor.iframeElement; + let dragTarget: any = null; + + editorDoc.ondragenter = (event: any) => { + console.log('dragenter'); + self.draggedOver = true; + dragTarget = event.target; + }; + + editorDoc.ondragleave = (event: any) => { + if (event.target === dragTarget) { + self.draggedOver = false; + console.log('dragleave'); + } else { + self.draggedOver = true; + } + }; + }); + + // TODO: expose an observable to which we can subscribe to + if (Types.isFunction(self.editorOptions.onSetup)) { + self.editorOptions.onSetup(editor); + } + + this.tinyInitTimer = + setTimeout(() => { + self.tinyEditor.setContent(this.value || ''); + }, 500); + }, + removed_menuitems: 'newdocument', target: this.editor.nativeElement + }; + } + public goNext() { this.assetsPager = this.assetsPager.goNext(); @@ -88,39 +149,9 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu const self = this; this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.4/tinymce.min.js').then(() => { - tinymce.init({ - setup: (editor: any) => { - self.tinyEditor = editor; - self.tinyEditor.setMode(this.isDisabled ? 'readonly' : 'design'); - - self.tinyEditor.on('change', () => { - const value = editor.getContent(); - - if (this.value !== value) { - this.value = value; - - self.callChange(value); - } - }); - - self.tinyEditor.on('blur', () => { - self.callTouched(); - }); - - this.tinyInitTimer = - setTimeout(() => { - self.tinyEditor.setContent(this.value || ''); - }, 500); - }, - removed_menuitems: 'newdocument', plugins: 'code,image', target: this.editor.nativeElement, file_picker_types: 'image', convert_urls: false, file_picker_callback: (cb: any, value: any, meta: any) => { - self.load(); - self.assetsDialog.show(); - self.assetSelectorClickHandler = { - cb: cb, - meta: meta - }; - } - }); + let editorOptions = { ...self.editorDefaultOptions(), ...self.editorOptions }; + console.log(editorOptions); + tinymce.init(editorOptions); }); } @@ -163,4 +194,12 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu this.closeAssetDialog(); } } + + public onItemDropped(event: any) { + this.draggedOver = false; + let content = this.assetDropHandler.buildDroppedAssetData(event.dragData, event.mouseEvent); + if (content) { + this.tinyEditor.execCommand('mceInsertContent', false, content); + } + } } \ No newline at end of file