TinyMCE Angular 5找不到主题/现代/主题.js

Question

因此，我尝试在应用程序中使用TinyMCE作为编辑器。我已经正确地安装了npm模块，将皮肤复制到了我的assets文件夹中，并正确地将脚本添加到了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.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“文件夹中的"plugins”、"skins“、"themes”三个文件夹复制到应用程序的"assets“文件夹中。

之后还要将tinymce的baseURL设置为您的assets文件夹

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

Answer 3

其实我也有同样的问题，但是在我和webpack的Syfomny 4项目中。我在许多地方进行了搜索，最终得出了我自己的想法--至少目前是可行的。

首先，在js文件中，它将包含tinymce逻辑：

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';

现在这篇文章：https://medium.freecodecamp.org/how-to-setup-tinymce-in-your-rails-app-using-webpack-edf030915332说你可以使用这个：

import ‘tinymce/skins/lightgray/skin.min.css’;

但是它不会工作，因为没有skin.min.css这样的文件。

解决方案是导入每个文件，如下所示：

import 'tinymce/skins/content/default/content.css';
import 'tinymce/skins/content/document/content.css';
import 'tinymce/skins/content/writer/content.css';
import 'tinymce/skins/ui/oxide-dark/content.css';

但这会破坏页面主题。

因此，最终的解决方案是为表单添加包装器，该包装器将具有微型mce：

<section id="tiny-mce-wrapper">
    <form>
        <textarea class="tiny-mce"></textarea>
    </form>
</section>

然后：

将所有css从节点/

• move /tinymce/ #tiny-mce

更改到存储css的位置。

• 将所有文件的扩展名从css更改为scss每个文件中的

• 添加更改，以便当tinmce文本区域位于#tiny-mce

中时，样式将仅对tinmce文本区域应用