TinyMCE gulp 配置答案

【问题标题】：TinyMCE gulp configurationTinyMCE gulp 配置
【发布时间】：2015-09-08 21:59:46
【问题描述】：

我正在构建一个 Web 应用程序，我想使用 TinyMCE。我正在使用 gulp 和 browserify。我已经通过 npm 下载了 TinyMCE，并且在我的 app.js 文件中需要它并运行 gulp 命令，但我收到此错误 Failed to load: root/js/themes/modern/theme.js。我认为这是因为 TinyMCE 需要其文件夹中的其他文件。我的问题是如何配置 TinyMCE 以在 node_modules/tinymce 文件夹中搜索这些文件。

【问题讨论】：

什么时候出现这个错误？是什么时候尝试在浏览器中加载？
concat 和 uglify 后出现一些错误。所以，我添加了theme.js fail to concat，然后在theme.js中重写了css路径。

标签： javascript node.js tinymce gulp browserify

【解决方案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 文件。我认为这是因为您可以选择使用常规版本和 jQuery 版本的 TinyMCE，它们都在包中。

我必须从上面更改我的 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 插件，这也可能无济于事。

【讨论】：

【解决方案2】：

我与 main-bower-files 作者有一个未解决的问题，他不鼓励将它与 TinyMCE 一起使用，可能是由于必须包含大量额外文件 (?)。请参阅 Github 上的以下 issue。

我最终只是通过一个简单的 gulp 任务将 tinymce 文件夹复制到我的dist/。我可能使用 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'));

});

【讨论】：