Question

我试图在功能强大的Angular2项目中实现tinyMce编辑器。这是我添加/更新的（ sub ）文件集。请注意，编译器不会抱怨，但在运行时期间错误输出：“'tinymce'未定义”。我现在已经挣扎了一段时间 - 看着整个anglular-cli并且无法理解它...任何帮助都有所帮助。

home.component.html：

<h1>Welcome to {{pageTitle}}!</h1>

<form *ngIf="displayUploadSection">
    <cra-upload></cra-upload> 
    <simple-tiny [elementId]="'my-editor-id'"
                 (onEditorKeyup)="keyupHandlerFunction($event)">
    </simple-tiny>
</form>

tinyEditor.component.ts：

import { Component, OnDestroy, AfterViewInit, 
    EventEmitter, Input, Output } from '@angular/core';

    @Component({
    selector: 'simple-tiny',
    template: `<textarea id="{{elementId}}"></textarea>`
})

export class SimpleTinyComponent implements AfterViewInit, OnDestroy {
    @Input() elementId: string;
    @Output() onEditorKeyup = new EventEmitter<any>();

    editor;

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

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

typings.d.ts：

declare var tinymce: any;

的package.json：

    {
  "apps": [
    {
      "scripts": [
        "~/node_modules/tinymce/tinymce.js",
        "~/node_modules/tinymce/themes/modern/theme.js",
        "~/node_modules/tinymce/plugins/link/plugin.js",
        "~/node_modules/tinymce/plugins/paste/plugin.js",
        "~/node_modules/tinymce/plugins/table/plugin.js"
      ]
    }
  ],
  "name": "compensation-report",
  "version": "1.0.0",
  "description": "Compensation Report app for xxxxxx Finance",
  "main": "app/main",
  "scripts": {
    "watch": "tsc -w",
    "clean": "del-cli ./app/**/*js ./app/**/*map",
    "build": "npm run clean && tsc",
    "build_prod": "npm run build && webpack --config ./webpack.config.js"
  },
  "author": "xxx zzz",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.2.3",
    "@angular/compiler": "2.2.3",
    "@angular/core": "2.2.3",
    "@angular/forms": "2.2.3",
    "@angular/http": "2.2.3",
    "@angular/platform-browser": "2.2.3",
    "@angular/platform-browser-dynamic": "2.2.3",
    "@angular/router": "3.2.3",
    "@angular/upgrade": "2.2.3",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.14",
    "bootstrap": "4.0.0-alpha.5",
    "core-js": "2.4.1",
    "file-loader": "^0.9.0",
    "font-awesome": "^4.7.0",
    "rxjs": "5.0.0-beta.12",
    "tinymce": "^4.5.2",
    "url-loader": "^0.5.7",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/jasmine": "^2.5.38",
    "@types/node": "0.0.1",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.8",
    "babel-preset-latest": "^6.16.0",
    "css-loader": "^0.26.1",
    "del-cli": "^0.2.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "node-sass": "^4.1.0",
    "path": "^0.12.7",
    "reflect-metadata": "0.1.8",
    "replace-webpack-plugin": "^0.1.2",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "systemjs": "^0.19.41",
    "systemjs-plugin-css": "^0.1.32",
    "typescript": "2.1.4",
    "webpack": "^2.1.0-beta.27"
  },
  "peerDependencies": { },
  "repository": { },
  "-vs-binding": {
    "ProjectOpened": [
      "watch"
    ]
  }
}

Answer 1

以下是一些提示/建议：

您的package.json文件不清楚，您的apps数组应该具有每个元素的root和outDir属性。尝试将依赖关系问题与“编译”问题分开。将依赖项保存在package.json中，并在另一个名为angular-cli.json的东西中编译。同时尝试在后者内部为您的应用程序设置root属性，然后再次编译“
直接在组件文件的顶部尝试declare var tinymce: any;（使用tinymce.init({...})的组件，看看会发生什么

这些只是提示，我可能错了，但在我看来，你的路径已经搞砸了。

'tinymce'未定义 - Angular2中的tinyMce编辑器

1 个答案: