在Angular2项目中使用Tinymce [英] Using Tinymce in Angular2 project

问题描述

我正在尝试将 tinymce 嵌入我的使用Angular2构建的网站中. 以下是我的组件:

I'm trying to embed tinymce into my website which is built using Angular2. Following is my component:

export class myComponent implements OnInit {
    //some code

    constructor(private af: AngularFire) {
    // some code
    }

    ngOnInit():any {
    tinymce.init(
        {
            selector: ".tinymce",
        });
    }
}

在我的html旁边，有:

And in side my html, there is:

<textarea class="tinymce" rows="15"></textarea>

但是出现错误消息"Cannot find name 'tinymce'"，但是我已经包含了

But there is error saying "Cannot find name 'tinymce'" but I have already include

<script src='//cdn.tinymce.com/4/tinymce.min.js'></script>

在html头内. 我做错什么了吗?我的初始化不正确吗?

inside the head of html. Did I do something wrong? Is my initialization incorrect?

推荐答案

这是我在RC6上为自己使用的内容.首先，我将展示用法:

Here's what I've used for myself, on RC6. First I'll show the usage:

<h1>The Editor</h1>
<textarea htmlEditor [(ngModel)]="txt"></textarea>
<h1>The HTML Source</h1>
<textarea [(ngModel)]="txt"></textarea>
<h1>The Rendered HTML</h1>
<div [innerHTML]="txt"></div>

因此用法非常简单明了，将编辑器的HTML结果移至textarea的值(我触发了blur事件的更新)

So the usage is pretty simple and straightforward, the HTML result of the editor is moved to the value of the textarea (I trigger the update on blur event)

这是指令定义(Typescript):

And here's the directive definition (Typescript):

import {
    Directive,
    OnDestroy,
    AfterViewInit,
    Provider,
    forwardRef,
    HostBinding
} from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';

declare var tinymce: any;

export const TinyMceValueAccessor: Provider = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TinyMceDirective2),
    multi: true
};

// Tinymce directive
@Directive({
    selector: '[htmlEditor]',
    providers: [TinyMceValueAccessor]
})

export class TinyMceDirective2 implements OnDestroy, AfterViewInit, ControlValueAccessor {
    static nextUniqueId = 0;
    @HostBinding('attr.data-tinymce-uniqueid') uniqueId;

    onTouchedCallback: () => void = () => { };
    onChangeCallback: (_: any) => void = () => { };
    innerValue;
    init = false;

    constructor(private sanitizer: DomSanitizer) {
        this.uniqueId = `tinymce-host-${TinyMceDirective2.nextUniqueId++}`;
    }

    //get accessor
    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

    ngAfterViewInit(): void {
        console.log('tinymce');
        tinymce.init({
            selector: `[data-tinymce-uniqueid=${this.uniqueId}]`,
            schema: 'html5',
            setup: ed => {
                ed.on('init', ed2 => {
                    if (this.innerValue) ed2.target.setContent(this.innerValue);
                    this.init = true;
                });
            }
        });

        // I chose to send an update on blur, you may choose otherwise
        tinymce.activeEditor.on('blur', () => this.updateValue());
    }

    updateValue() {
        const content = tinymce.activeEditor.getContent();
        this.value = this.sanitizer.bypassSecurityTrustHtml(content);
    }

    writeValue(value): void {
        if (value !== this.innerValue) {
            this.innerValue = value;
            if (this.init && value) tinymce.activeEditor.setContent(value);
        }
    }

    registerOnChange(fn): void {
        this.onChangeCallback = fn;
    }

    registerOnTouched(fn): void {
        this.onTouchedCallback = fn;
    }

    ngOnDestroy(): void {
        if (this.init) tinymce.remove(`[data-tinymce-uniqueid=${this.uniqueId}]`);
    }
}

一些亮点:

• 我正在使用NG_VALUE_ACCESSOR使用ngModel
提供双向绑定
• 我要为host元素上的自定义属性分配一个唯一的id，以便tinymce仅初始化该特定元素，而不会初始化其他元素.
• 我仅在blur个事件上发送值更新，但是您可以使用其他策略，例如使用去抖动时间.
• 我正在使用DomSanitizer绕过消毒，因为tinymce有时会输出触发Angular 2消毒的html.

• I'm using NG_VALUE_ACCESSOR to provide for two way binding using ngModel
• I'm assigning a unique id to a custom attribute on the host element so that tinymce only initializes that specific element and no others.
• I'm sending value updates only on blur events, but you may use a different strategy, for example using debounce time.
• I'm using DomSanitizer to bypass sanitization, since tinymce sometimes outputs html which triggers Angular 2 sanitization.

这篇关于在Angular2项目中使用Tinymce的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！