Question

我正在尝试将tinymce与我的angular2应用程序集成。我按照以下步骤操作：https://www.tinymce.com/docs/integrations/angular2/以及此视频https://www.youtube.com/watch?v=0IXelrVEoWI以及来自github的相应代码：https://github.com/tabvn/angular-blog

我已经安装了npm包并创建了文件。我没有typings.d.ts文件，所以我创建了一个并放了

声明var tinymce：any;

在其中。

我怀疑错误在哪里，但我不确定。

我创建了编辑器组件：

import {Component, OnDestroy, AfterViewInit, EventEmitter, Input, Output, OnInit, OnChanges} from '@angular/core';
import {isNullOrUndefined} from "util";


@Component({
    selector: 'text-editor',
    templateUrl: './editor.component.html',
    styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {


    @Input() elementId: string;
    @Input() value: any = "";
    @Output() onEditorKeyup: EventEmitter<any> = new EventEmitter<any>();

    baseURL: string = '/';

    constructor() {
    }


    ngOnInit() {


    }


    editor;

    ngAfterViewInit() {
        tinymce.init({
            selector: '#' + this.elementId,
            plugins: ['link', 'paste', 'table'],
            skin_url: this.baseURL + 'assets/skins/lightgray',
            setup: editor => {
                this.editor = editor;
                editor.on('keyup', () => {
                    const content = editor.getContent();
                    this.onEditorKeyup.emit(content);
                });
            },
        });
    }

    ngOnDestroy() {
        tinymce.remove(this.editor);
    }


    didSetValue: boolean = false;


    ngOnChanges(){

        console.log(this.value);

        if(!isNullOrUndefined(this.editor) && this.value !== "" && !this.didSetValue){

            console.log(this.value);
            this.didSetValue = true;
            this.editor.setContent(this.value);


        }
    }

}

并在此处使用：

<div class="form-group col-lg-10">
  <label for="description">Description:</label>
  <text-editor [value]="defaultBodyValue" [elementId]="'description'" (onEditorKeyup)="onBodyTextEditorKeyUp($event)"></text-editor>
</div>

更新：

发现我错过了我的模块中的include，而不是组件中的。现在这段代码：

<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

引发此错误：

获取http://192.168.4.13:3007/util 404（未找到）scheduleTask @ zone.js：1382ZoneDelegate.scheduleTask @ zone.js：245Zone.scheduleMacroTask @ zone.js：171（匿名函数）@ zone.js：1405send @ VM1084： 3fetchTextFromURL @system.src.js：1051（匿名函数）@system.src.js:1781ZoneAwarePromise @ zone.js：518（匿名函数）@system.src.js:1780leadingCommentAndMetaRegEx @system.src.js:2809load.metadata。 deps @ system.src.js：3387loader @system.src.js:3701loader @system.src.js:4093loader @system.src.js:4556constructor.meta @system.src.js:4825(anonymous function）@ system。 src.js：407ZoneDelegate.invoke @ zone.js：232Zone.run @ zone.js：114（匿名函数）@ zone.js：502ZoneDelegate.invokeTask @ zone.js：265Zone.runTask @ zone.js：154drainMicroTaskQueue @ zone。 js：401cancelFn.invoke @ zone.js：339 （索引）：20错误：（SystemJS）XHR错误（404 Not Found）loading http://192.168.4.13:3007/util（...）

我没有/ util的任何路由，所以我不确定它试图加载什么以及从哪里开始...

Tinymce in angular2

0 个答案: