mirror of https://github.com/Squidex/squidex.git
Sebastian
10 years ago
30 changed files with 326 additions and 83 deletions
@ -0,0 +1 @@ |
|||||
|
<textarea class="form-control" #editor></textarea> |
||||
@ -0,0 +1,6 @@ |
|||||
|
@import '_mixins'; |
||||
|
@import '_vars'; |
||||
|
|
||||
|
.editor { |
||||
|
height: 30rem; |
||||
|
} |
||||
@ -0,0 +1,80 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { AfterViewInit, Component, forwardRef, ElementRef, ViewChild } from '@angular/core'; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
|
||||
|
import { ResourceLoaderService } from './../services/resource-loader.service'; |
||||
|
|
||||
|
declare var SimpleMDE: any; |
||||
|
|
||||
|
/* tslint:disable:no-empty */ |
||||
|
const NOOP = () => { }; |
||||
|
|
||||
|
export const SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
||||
|
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MarkdownEditorComponent), multi: true |
||||
|
}; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-markdown-editor', |
||||
|
styleUrls: ['./markdown-editor.component.scss'], |
||||
|
templateUrl: './markdown-editor.component.html', |
||||
|
providers: [SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR] |
||||
|
}) |
||||
|
export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewInit { |
||||
|
private changeCallback: (value: any) => void = NOOP; |
||||
|
private touchedCallback: () => void = NOOP; |
||||
|
private simplemde: any; |
||||
|
private value: any; |
||||
|
private isDisabled = false; |
||||
|
|
||||
|
@ViewChild('editor') |
||||
|
public editor: ElementRef; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly resourceLoader: ResourceLoaderService |
||||
|
) { |
||||
|
this.resourceLoader.loadStyle('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css'); |
||||
|
} |
||||
|
|
||||
|
public writeValue(value: any) { |
||||
|
this.value = value; |
||||
|
|
||||
|
if (this.simplemde) { |
||||
|
this.simplemde.value(this.value || ''); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public setDisabledState(isDisabled: boolean): void { |
||||
|
this.isDisabled = isDisabled; |
||||
|
|
||||
|
if (this.simplemde) { |
||||
|
this.simplemde.setOption('readOnly', isDisabled); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public registerOnChange(fn: any) { |
||||
|
this.changeCallback = fn; |
||||
|
} |
||||
|
|
||||
|
public registerOnTouched(fn: any) { |
||||
|
this.touchedCallback = fn; |
||||
|
} |
||||
|
|
||||
|
public ngAfterViewInit() { |
||||
|
this.resourceLoader.loadScript('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js').then(() => { |
||||
|
this.simplemde = new SimpleMDE({ element: this.editor.nativeElement }); |
||||
|
this.simplemde.value(this.value || ''); |
||||
|
|
||||
|
this.simplemde.codemirror.on('blur', () => { |
||||
|
const value = this.simplemde.value(); |
||||
|
|
||||
|
this.changeCallback(value); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
<div class="editor" #editor></div> |
||||
@ -0,0 +1,8 @@ |
|||||
|
@import '_mixins'; |
||||
|
@import '_vars'; |
||||
|
|
||||
|
.editor { |
||||
|
background: $color-accent-dark; |
||||
|
border: 1px solid $color-input; |
||||
|
height: 30rem; |
||||
|
} |
||||
@ -0,0 +1,93 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, ViewChild } from '@angular/core'; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
|
||||
|
import { ResourceLoaderService } from './../services/resource-loader.service'; |
||||
|
|
||||
|
declare var tinymce: any; |
||||
|
|
||||
|
/* tslint:disable:no-empty */ |
||||
|
const NOOP = () => { }; |
||||
|
|
||||
|
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 implements ControlValueAccessor, AfterViewInit, OnDestroy { |
||||
|
private changeCallback: (value: any) => void = NOOP; |
||||
|
private touchedCallback: () => void = NOOP; |
||||
|
private tinyEditor: any; |
||||
|
private value: any; |
||||
|
private isDisabled = false; |
||||
|
|
||||
|
@ViewChild('editor') |
||||
|
public editor: ElementRef; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly resourceLoader: ResourceLoaderService |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public writeValue(value: any) { |
||||
|
this.value = value; |
||||
|
|
||||
|
if (this.tinyEditor) { |
||||
|
this.tinyEditor.setContent(value); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public setDisabledState(isDisabled: boolean): void { |
||||
|
this.isDisabled = isDisabled; |
||||
|
|
||||
|
if (this.tinyEditor) { |
||||
|
this.tinyEditor.setMode(isDisabled ? 'readonly' : 'design'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public registerOnChange(fn: any) { |
||||
|
this.changeCallback = fn; |
||||
|
} |
||||
|
|
||||
|
public registerOnTouched(fn: any) { |
||||
|
this.touchedCallback = fn; |
||||
|
} |
||||
|
|
||||
|
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.on('blur', () => { |
||||
|
const value = editor.getContent(); |
||||
|
|
||||
|
self.changeCallback(value); |
||||
|
}); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
self.tinyEditor.setContent(this.value || ''); |
||||
|
}, 500); |
||||
|
}, |
||||
|
target: this.editor.nativeElement |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
tinymce.remove(this.editor); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,63 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
export class ResourceLoaderService { |
||||
|
private cache: { [path: string]: Promise<any> } = {}; |
||||
|
|
||||
|
public loadStyle(url: string): Promise<any> { |
||||
|
const key = url.toUpperCase(); |
||||
|
|
||||
|
let result = this.cache[key]; |
||||
|
|
||||
|
if (!result) { |
||||
|
result = new Promise((resolve, reject) => { |
||||
|
const style = document.createElement('link'); |
||||
|
style.rel = 'stylesheet'; |
||||
|
style.href = url; |
||||
|
style.type = 'text/css'; |
||||
|
|
||||
|
style.onload = () => { |
||||
|
resolve(); |
||||
|
}; |
||||
|
|
||||
|
const head = document.getElementsByTagName('head')[0]; |
||||
|
|
||||
|
head.appendChild(style); |
||||
|
}); |
||||
|
|
||||
|
this.cache[key] = result; |
||||
|
} |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
public loadScript(url: string): Promise<any> { |
||||
|
const key = url.toUpperCase(); |
||||
|
|
||||
|
let result = this.cache[key]; |
||||
|
|
||||
|
if (!result) { |
||||
|
result = new Promise((resolve, reject) => { |
||||
|
const script = document.createElement('script'); |
||||
|
script.src = url; |
||||
|
script.async = true; |
||||
|
|
||||
|
script.onload = () => { |
||||
|
resolve(); |
||||
|
}; |
||||
|
|
||||
|
const node = document.getElementsByTagName('script')[0]; |
||||
|
|
||||
|
node.parentNode.insertBefore(script, node); |
||||
|
}); |
||||
|
|
||||
|
this.cache[key] = result; |
||||
|
} |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
} |
||||
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue