TinyMCE Angular 5 找不到 themes/modern/theme.js

Question

所以我试图将 TinyMCE 用于应用程序中的编辑器。我已经正确安装了 npm 模块，将皮肤复制到我的资产文件夹中，并将脚本正确添加到我的 angular-cli.json 中。这是我对我所做的EditorComponent：

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

import 'tinymce';

declare var tinymce: any;

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

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

  editor: any;

  constructor() { }

  ngOnInit() {
  }

  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);
  }

}

这是 的标记EditorComponent：

<textarea id="{{elementId}}"></textarea>

现在正在父组件中使用：

<app-editor [elementId]="'editor'" (onEditorKeyup)="keyupHandlerFunction($event)"></app-editor>

我从他们的网站上点击了这个链接：https : //www.tinymce.com/docs/integrations/angular2/

除了一些其他帖子显示如何tinymce在组件中声明。

这里也是 angular-cli.json app[0].scripts：

"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"
      ]

我似乎在我的控制台中收到了这个由 tinymce.js 抛出的错误：

但是我在任何地方都找不到复制的问题，并且控制台日志没有提供我的代码中出现此问题的任何线索。我的编辑器组件在父组件中也完全显示为空白。我感谢任何和所有的帮助。提前致谢。

Answer 1

我有一个非常相似的问题，我发现 TinyMCE 以某种方式改变了它从哪里寻找资产档案的位置

"/tinymce/skins/",
"/tinymce/themes/",
"/tinymce/plugins/",

到

"/skins/",
"/themes/",
"/plugins/",

因此，Angular.json 文件中资产配置的输出是错误的，我必须从以下位置修复它：

{ "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/tinymce/skins/" },
{ "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/tinymce/themes/" },
{ "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/tinymce/plugins/" }

到：

{ "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/skins/" },
{ "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/themes/" },
{ "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/plugins/" }

不幸的是，我还没有找到导致行为改变的原因，但我相信这是一个比手动导入脚本或将它们复制到应用程序文件夹中更好的答案。

Answer 2

我遇到了同样的错误，并在 Angular 5 中运行了它：

将“node_modules/tinymce”文件夹中的 3 个文件夹“plugins”、“skins”、“themes”复制到您的应用程序“assets”文件夹中。

之后还将 tinymce 的 baseURL 设置为您的资产文件夹

  ngAfterViewInit() {
    tinymce.baseURL = 'assets';
    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);
        });
      },
    });
  }