TinyMCE gulp配置

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配置，然後從我安裝的所有依賴中返回一個包含所有主要JS文件的流。它看起來像這樣：

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

不幸的是，這並沒有拿起任何TinyMCE的文件，這些文件安裝在我的bower_components目錄的，因爲通過鮑爾安裝了「TinyMCE的」不來了的package.json文件。我認爲這是因爲你可以選擇使用TinyMCE的常規版本和jQuery版本，它們都在包中。

我不得不從上面更改我的Gulp任務，讓它拿起我想要的TinyMCE源代碼（jQuery版本）。該版本是這樣的：

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相關的JS文件，並將它們添加到「主涼亭文件」列表中。

這只是一個部分的解決方案，但因爲你也必須拿起TinyMCE CSS和字體文件。然後，如果你的構建完全不同，或者你沒有使用main-bower-files插件，這可能也無濟於事。

Answer 2

我對main-bower-files作者有一個開放性問題，他不願意將它與TinyMCE一起使用，可能是由於必須包含大量額外文件（？）。請參閱Github上的以下issue。

我最終通過一個簡單的吞嚥任務，將tinymce文件夾複製到我的dist/。我可能使用鮑爾和不同的路徑，但你有想法

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

});