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 配置，然后从使用 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/'))
});

不幸的是，这不会获取安装在我的 Bower_components 目录中的任何 TinyMCE 文件，因为通过 Bower 安装的“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 文件，并将它们添加到“主 Bower 文件”列表中。

但这只是部分解决方案，因为您还必须选择 TinyMCE CSS 和字体文件。然后，如果您的构建完全不同或者您没有使用 main-bower-files 插件，这可能也没有帮助。