mirror of https://github.com/Squidex/squidex.git
Browse Source
- show only image mime types (jpeg, png and gif)
- hide edit, download and delete icons on asset listing
- use absolute urls for inserted images
pull/159/head
sowobm
8 years ago
7 changed files with 11 additions and 221 deletions
@ -1,37 +0,0 @@ |
|||
<div class="editor" #editor></div> |
|||
|
|||
<div class="modal asset-selector" *sqxModalView="assetsDialog;onRoot:true"> |
|||
<div class="modal-backdrop"></div> |
|||
<div class="modal-dialog"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h4 class="modal-title mce-title">Select an asset</h4> |
|||
|
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="cancelSelectAsset()"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="modal-body"> |
|||
<form [formGroup]="assetsForm" (ngSubmit)="selecteAsset()"> |
|||
<div class="form-group"> |
|||
<label for="asset-name">Name</label> |
|||
|
|||
<sqx-control-errors for="name" [submitted]="selecteAsset"></sqx-control-errors> |
|||
|
|||
<input type="text" class="form-control" id="asset-name" formControlName="name" autocomplete="off" sqxFocusOnInit /> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<sqx-asset class="col-3" *ngFor="let asset of assetsItems" [asset]="asset"></sqx-asset> |
|||
</div> |
|||
|
|||
<div class="form-group clearfix text-right"> |
|||
<button type="submit" class="btn btn-sm btn-success">Select</button> |
|||
<button type="reset" class="btn btn-sm btn-secondary" (click)="cancelSelectAsset()">Cancel</button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,36 +0,0 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.editor { |
|||
background: $color-dark-foreground; |
|||
border: 1px solid $color-input; |
|||
height: 30rem; |
|||
} |
|||
.asset-selector { |
|||
z-index: 65560; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
|
|||
.modal-content { |
|||
width: 100%; |
|||
border-radius: 0; |
|||
-webkit-border-radius: 0; |
|||
} |
|||
.modal-dialog { |
|||
max-width: 900px; |
|||
} |
|||
|
|||
.btn { |
|||
border-radius: 0; |
|||
} |
|||
} |
|||
@ -1,141 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms'; |
|||
|
|||
import { Types } from './../utils/types'; |
|||
|
|||
import { ResourceLoaderService } from './../services/resource-loader.service'; |
|||
|
|||
import { AppComponentBase } from './../../shared/components/app.component-base'; |
|||
import { ModalView, AppsStoreService, AssetDto, AssetsService, ImmutableArray, DialogService, AuthService, Pager } from './../../shared/declarations-base'; |
|||
|
|||
declare var tinymce: any; |
|||
|
|||
export const SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichEditorComponent), multi: true |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-rich-editor', |
|||
styleUrls: ['./rich-editor.component.scss'], |
|||
templateUrl: './rich-editor.component.html', |
|||
providers: [SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR] |
|||
}) |
|||
export class RichEditorComponent extends AppComponentBase implements ControlValueAccessor, AfterViewInit, OnDestroy, OnInit { |
|||
private callChange = (v: any) => { /* NOOP */ }; |
|||
private callTouched = () => { /* NOOP */ }; |
|||
private tinyEditor: any; |
|||
private tinyInitTimer: any; |
|||
private value: string; |
|||
private isDisabled = false; |
|||
public assetsItems: ImmutableArray<AssetDto>; |
|||
public assetsPager = new Pager(0, 0, 12); |
|||
|
|||
@ViewChild('editor') |
|||
public editor: ElementRef; |
|||
|
|||
public assetsDialog = new ModalView(); |
|||
public assetsForm = this.formBuilder.group({ |
|||
name: [''] |
|||
}); |
|||
|
|||
constructor(dialogs: DialogService, apps: AppsStoreService, authService: AuthService, |
|||
private readonly resourceLoader: ResourceLoaderService, |
|||
private readonly formBuilder: FormBuilder, |
|||
private readonly assetsService: AssetsService |
|||
) { |
|||
super(dialogs, apps, authService); |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
|
|||
this.appNameOnce() |
|||
.switchMap(app => this.assetsService.getAssets(app, this.assetsPager.pageSize, this.assetsPager.skip)) |
|||
.subscribe(dtos => { |
|||
this.assetsItems = ImmutableArray.of(dtos.items); |
|||
this.assetsPager = this.assetsPager.setCount(dtos.total); |
|||
}, error => { |
|||
this.notifyError(error); |
|||
}); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
clearTimeout(this.tinyInitTimer); |
|||
|
|||
tinymce.remove(this.editor); |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
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', file_picker_callback: (cb: any, value: any, meta: any) => { |
|||
self.assetsDialog.show(); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
public writeValue(value: string) { |
|||
this.value = Types.isString(value) ? value : ''; |
|||
|
|||
if (this.tinyEditor) { |
|||
this.tinyEditor.setContent(this.value); |
|||
} |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.isDisabled = isDisabled; |
|||
|
|||
if (this.tinyEditor) { |
|||
this.tinyEditor.setMode(isDisabled ? 'readonly' : 'design'); |
|||
} |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.callChange = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.callTouched = fn; |
|||
} |
|||
|
|||
public selecteAsset() { |
|||
console.log('Selecting asset ' + this.assetsForm.controls['name'].value); |
|||
} |
|||
|
|||
public cancelSelectAsset() { |
|||
console.log('asset selection canceled'); |
|||
this.assetsDialog.hide(); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue