javascript - TinyMCE gulp 配置

Question

我正在构建一个 Web 应用程序，我想使用 TinyMCE。我正在使用 gulp 和 browserify。我已经通过 npm 下载了 TinyMCE 并且我在我的 app.js 文件中需要它并运行 gulp 命令但是我得到了这个错误 Failed to load: root/js/themes/modern/主题.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 插件，这也可能无济于事。