web-dev-qa-db-ja.com

TinyMCE Angular 5はthemes / modern /theme.jsを見つけることができません

そのため、アプリケーション内のエディターに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.jsonapp [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によってスローされるコンソールでこのエラーが発生しているようです。

enter image description here

しかし、複製された問題はどこにも見つかりません。コンソールログには、コードのどこでこの問題が発生しているかがわかりません。私のエディタコンポーネントも、親コンポーネントで完全に空白で表示されます。私はありとあらゆる助けに感謝します。前もって感謝します。

angulartinymce
6
Nicholas Pesa

同じエラーが発生し、Angular 5：

3つのフォルダー「plugins」、「skins」、「themes」を「node_modules/tinymce」フォルダーからアプリの「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);
        });
      },
    });
  }
5
Alessandro Santamaria

私は非常によく似た問題を抱えていましたが、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/" }

残念ながら、動作の変化の原因はわかりませんが、スクリプトを手動でインポートしたり、アプリケーションフォルダー内にコピーしたりするよりも、これが良い答えだと思います。

4
Rafael Bronzatti

実際、同じ問題が発生しましたが、Webpackを使用したSyfomny4プロジェクトで発生しました。私は多くの場所で検索し、うまくいく自分のアイデアに行き着きました-少なくとも現時点では。

まず第一に、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';

しかし、これはページのテーマを破壊します...

したがって、最終的な解決策は、tiny-mceを持つフォームのラッパーを追加することです。

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

その後：

  • すべてのcssesをnode/modules/tinymce/skinからcssを保存する場所に移動します。
  • すべてのファイルの拡張子をcssからscssに変更します
  • 各ファイルに変更を追加して、スタイルが＃tiny-mce内にあるときにtinmce textareaにonlyを適用するようにします
1
Volmarg Reiso

tinymceディレクトリにバンドルされているテーマフォルダを失う可能性があります。 themeフォルダーがない場合は、modernフォルダーを調べて、次の場所に移動します。 https://www.tiny.cloud/get-tiny/self-hosted/ =、好みのバージョンをダウンロードして、プロジェクトに手動で構成します。

これがお役に立てば幸いです。 :)

0
Kiry Meas

遅刻してすみません。ここで私はGitHubで問題を見つけました：

https://github.com/tinymce/tinymce/issues/4164

一時的な解決策は、次のようにスクリプトをインポートすることです。

    "../node_modules/tinymce/tinymce.min.js",
    "../node_modules/tinymce/themes/modern/theme.min.js"

または、次のバージョンまで待ちます。

英語が下手でごめんなさい、良い一日を。

0
Manuel Chichi