tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

add assets selector in tinyMCE rich text editor

pull/159/head
sowobm 8 years ago
parent
a7f0a8b336
commit
02ad5bab05
4 changed files with 49 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/Squidex/Squidex.csproj
  2. 76
      src/Squidex/app/shared/components/declarations.ts
  3. 21
      src/Squidex/app/shared/components/rich-editor.component.html
  4. 44
      src/Squidex/app/shared/components/rich-editor.component.ts

8
src/Squidex/Squidex.csproj
View File

@ -22,10 +22,6 @@
<None Remove="Assets\**" />
</ItemGroup>
<ItemGroup>
<None Remove="app\shell\pages\media\media-page.ts" />
</ItemGroup>
<ItemGroup>
<None Update="dockerfile">
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
@ -85,10 +81,6 @@
<PackageReference Include="System.ValueTuple" Version="4.4.0" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="app\shell\pages\media\media-page.ts" />
</ItemGroup>
<Target Name="IncludeDocFile" BeforeTargets="PrepareForPublish">
<ItemGroup Condition=" '$(DocumentationFile)' != '' ">
<_DocumentationFile Include="$(DocumentationFile)" />

76
src/Squidex/app/shared/components/declarations.ts
View File

@ -1,76 +0,0 @@
/*
* Squidex Headless CMS
*
* @license
* Copyright (c) Sebastian Stehle. All rights reserved
*/
export * from './angular/animations';
export * from './angular/autocomplete.component';
export * from './angular/can-deactivate.guard';
export * from './angular/confirm-click.directive';
export * from './angular/control-errors.component';
export * from './angular/copy.directive';
export * from './angular/date-time-editor.component';
export * from './angular/date-time.pipes';
export * from './angular/dialog-renderer.component';
export * from './angular/dropdown.component';
export * from './angular/file-drop.directive';
export * from './angular/focus-on-init.directive';
export * from './angular/geolocation-editor.component';
export * from './angular/http-extensions-impl';
export * from './angular/image-source.directive';
export * from './angular/indeterminate-value.directive';
export * from './angular/jscript-editor.component';
export * from './angular/json-editor.component';
export * from './angular/lowercase-input.directive';
export * from './angular/markdown-editor.component';
export * from './angular/modal-target.directive';
export * from './angular/modal-view.directive';
export * from './angular/money.pipe';
export * from './angular/name.pipe';
export * from './angular/numbers.pipes';
export * from './angular/onboarding-tooltip.component';
export * from './angular/panel.component';
export * from './angular/panel-container.directive';
export * from './angular/parent-link.directive';
export * from './angular/popup-link.directive';
export * from './angular/progress-bar.component';
export * from './angular/rich-editor.component';
export * from './angular/root-view.directive';
export * from './angular/router-utils';
export * from './angular/scroll-active.directive';
export * from './angular/shortcut.component';
export * from './angular/slider.component';
export * from './angular/sorted.directive';
export * from './angular/stars.component';
export * from './angular/tag-editor.component';
export * from './angular/template-wrapper.directive';
export * from './angular/title.component';
export * from './angular/toggle.component';
export * from './angular/user-report.component';
export * from './angular/validators';
export * from './configurations';
export * from './services/analytics.service';
export * from './services/clipboard.service';
export * from './services/dialog.service';
export * from './services/local-store.service';
export * from './services/local-cache.service';
export * from './services/message-bus.service';
export * from './services/onboarding.service';
export * from './services/resource-loader.service';
export * from './services/root-view.service';
export * from './services/shortcut.service';
export * from './services/title.service';
export * from './utils/date-helper';
export * from './utils/date-time';
export * from './utils/duration';
export * from './utils/immutable-array';
export * from './utils/math-helper';
export * from './utils/modal-view';
export * from './utils/pager';
export * from './utils/string-helper';
export * from './utils/types';
export * from './utils/version';

21
src/Squidex/app/shared/components/rich-editor.component.html
View File

@ -7,20 +7,31 @@
<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()">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="closeAssetDialog()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="assetsForm" (ngSubmit)="selecteAsset()">
<form [formGroup]="assetsForm" (ngSubmit)="closeAssetDialog()">
<div class="row">
<sqx-asset class="col-3" *ngFor="let asset of assetsItems" [asset]="asset" (updated)="onAssetClicked($event)" ></sqx-asset>
<sqx-asset class="col-3" *ngFor="let asset of assetsItems" [asset]="asset" (clicked)="onAssetClicked($event)" ></sqx-asset>
</div>
<div class="clearfix" *ngIf="assetsPager.numberOfItems > 0">
<div class="float-right pagination">
<span class="pagination-text">{{assetsPager.itemFirst}}-{{assetsPager.itemLast}} of {{assetsPager.numberOfItems}}</span>
<button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()">
<i class="icon-angle-left"></i>
</button>
<button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()">
<i class="icon-angle-right"></i>
</button>
</div>
</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>
<button type="submit" class="btn btn-sm btn-secondary" (click)="closeAssetDialog()">Cancel</button>
</div>
</form>
</div>

44
src/Squidex/app/shared/components/rich-editor.component.ts
View File

@ -8,9 +8,9 @@
import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms';
import { Types, ResourceLoaderService } from 'framework';
import { AppComponentBase } from './app.component-base';
import { ModalView, AppsStoreService, AssetDto, AssetsService, ImmutableArray, DialogService, AuthService, Pager } from './../declarations-base';
import { AssetUrlPipe } from './pipes';
import { ApiUrlConfig, ModalView, AppsStoreService, AssetDto, AssetsService, ImmutableArray, DialogService, AuthService, Pager, Types, ResourceLoaderService } from './../declarations-base';
declare var tinymce: any;
@ -31,8 +31,10 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu
private tinyInitTimer: any;
private value: string;
private isDisabled = false;
private assetSelectorClickHandler: any = null;
public assetsItems: ImmutableArray<AssetDto>;
public assetsPager = new Pager(0, 0, 12);
private assetUrlGenerator: AssetUrlPipe;
@ViewChild('editor')
public editor: ElementRef;
@ -45,9 +47,11 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu
constructor(dialogs: DialogService, apps: AppsStoreService, authService: AuthService,
private readonly resourceLoader: ResourceLoaderService,
private readonly formBuilder: FormBuilder,
private readonly assetsService: AssetsService
private readonly assetsService: AssetsService,
private readonly apiUrlConfig: ApiUrlConfig
) {
super(dialogs, apps, authService);
this.assetUrlGenerator = new AssetUrlPipe(this.apiUrlConfig);
}
private load() {
@ -61,6 +65,18 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu
});
}
public goNext() {
this.assetsPager = this.assetsPager.goNext();
this.load();
}
public goPrev() {
this.assetsPager = this.assetsPager.goPrev();
this.load();
}
public ngOnDestroy() {
clearTimeout(this.tinyInitTimer);
@ -98,6 +114,10 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu
removed_menuitems: 'newdocument', plugins: 'code,image', target: this.editor.nativeElement, file_picker_types: 'image', file_picker_callback: (cb: any, value: any, meta: any) => {
self.load();
self.assetsDialog.show();
self.assetSelectorClickHandler = {
cb: cb,
meta: meta
};
}
});
});
@ -127,17 +147,19 @@ export class RichEditorComponent extends AppComponentBase implements ControlValu
this.callTouched = fn;
}
public selecteAsset() {
console.log('Selecting asset ' + this.assetsForm.controls['name'].value);
}
public cancelSelectAsset() {
console.log('asset selection canceled');
public closeAssetDialog() {
this.assetsDialog.hide();
this.assetSelectorClickHandler = null;
}
public onAssetClicked(asset: AssetDto) {
console.log('Asset clicked on');
console.log(asset);
if (this.assetSelectorClickHandler != null) {
this.assetSelectorClickHandler.cb(this.assetUrlGenerator.transform(asset), {
description: asset.fileName,
width: asset.pixelWidth,
height: asset.pixelHeight
});
this.closeAssetDialog();
}
}
}
Write Preview
Loading…
Cancel
Save