TinyMCEグループ設定

Question

私はWebアプリケーションを構築しています。私はTinyMCEを使いたいと思います。私はgulpを使用してbrowserifyしています。私はnpmを通してTinyMCEをダウンロードしましたが、私のapp.jsファイルでそれを要求してgulpコマンドを実行しましたが、このエラーはFailed to load: root/js/themes/modern/theme.jsです。これはTinyMCEがそのフォルダから追加のファイルを必要とするためだと私は思う。私の質問は、TinyMCEをnode_modules/tinymceフォルダ内のファイルを検索するように設定する方法です。

Answer 1

ここでの答えは、Gulpビルドでどのようにファイルをパッケージ化するかによって異なります。私はまだ同じ問題を今でもやっていますが、ここでは助けになるかもしれないヒントがあります。

私の場合、main-bower-filesプラグインを使用して私のBower設定を読み込んで、Bowerと一緒にインストールしたすべての依存関係のすべてのメインJSファイルのストリームを返します。それは次のようになります。バウアーを使用してインストール「のTinyMCE」はpackage.jsonファイルが付属していないので、

var mainBowerFiles = require('main-bower-files'); 

gulp.task('vendor-src', function() { 
    return gulp.src(mainBowerFiles('**/*.js') 
    .pipe(uglify()) 
    .pipe(concat('main.min.js')) 
    .pipe(gulp.dest('dist/')) 
}); 

残念ながら、これは、私のbower_componentsディレクトリにインストールされているTinyMCEのファイルのいずれかをピックアップしていません。これは、パッケージに入っているTinyMCEの正規版とjQuery版を使用するかどうかの選択肢があるからです。

Gulpタスクを上から変更して、必要なTinyMCEソースコード（jQueryバージョン）を手に入れなければなりませんでした。このバージョンは、次のようになりますTinyMCEのに関連したJSファイルのすべてが含まれ、「メイン亭ファイル」リストに追加されます

var mainBowerFiles = require('main-bower-files'); 

gulp.task('vendor-src', function() { 
    return gulp.src(
    mainBowerFiles('**/*.js', { 
     "overrides": { 
      "tinymce": { 
      "main": ["tinymce.jquery.js", "plugins/**/*.js", "themes/**/*.js"] 
      } 
     }) 
    .pipe(uglify()) 
    .pipe(concat('main.min.js')) 
    .pipe(gulp.dest('dist/')) 
});  

。

これは部分的な解決策にすぎませんが、TinyMCEのCSSとフォントファイルも手に入れなければならないためです。そして、あなたがビルドがまったく異なっている、あるいはmain-bower-filesプラグインを使用していないのであれば、これは役に立たないかもしれません。

Answer 2

main-bower-filesの著者はTinyMCEとの併用を推奨していませんでしたが、おそらく多数の余分なファイル（？）が含まれている可能性があります。 Githubのissueを参照してください。

私はちょうど私のdist/にtinymceフォルダをコピーするだけで、簡単なgulpタスクを終了しました。私はBowerと異なるパスを使用しているかもしれませんが、あなたはアイディアを得ます。

gulp.task('bower-tinymce', function() { 

    //Copy resources from tinymce-dist that didn't make it in the bower-files 
    return gulp.src('src/main/resources/static/bower_components/tinymce-dist/**/*').pipe(gulp.dest('src/main/resources/static/dist/tinymce')); 

});