TinyMCE吞咽配置 [英] TinyMCE gulp configuration

问题描述

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

解决方案

这里的答案完全取决于你正在打包你的Gulp版本中的文件。我现在仍然在处理同样的问题，但是这里有一个提示可能会有所帮助。

在我的情况中，我使用 main-bower-files 插件来读取我的Bower配置，然后返回所有主要JS文件的流我已经与Bower一起安装了所有的依赖项。它看起来像这样：

  var mainBowerFiles = require（'main-bower-files'）; 
 $ b $ 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'通过Bower安装的软件不包含package.json文件，我认为这是因为您可以选择使用TinyMCE的常规版本和jQuery版本，它们都在包装中。

我必须从上面更改我的Gulp任务，才能获取我想要的TinyMCE源代码（jQuery版本）。该版本如下所示：

  var mainBowerFiles = require（'main-bower-files'）; 
 
 gulp.task（'vendor-src'，function（）{
 return gulp.src（
 mainBowerFiles（'** / *。js'，{
覆盖：{
 tinymce：{
main：[tinymce.jquery.js，plugins / ** / *。js，themes / ** / *。js] 
} $ （'main.min.js'））
 .pipe（gulp.dest（'dist /'）
 .pipe（uglify（））
 .pipe ）
}）; 
  

这将包括与TinyMCE相关的所有JS文件，并将它们添加到主要文件文件名单。

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

I am building a web application and I want to use TinyMCE. I am using gulp and browserify. I have downloaded TinyMCE through npm and than I have required it in my app.js file and run the gulp command but I got this error Failed to load: root/js/themes/modern/theme.js. I think this is because TinyMCE needs additional files from its folder. My question is how to configurate TinyMCE to search those files in the node_modules/tinymce folder.

解决方案

The answer here depends completely on how you are packaging up files in your Gulp build. I'm still working through the same problem right now, but here's a tip that might help.

In my case, I'm using the main-bower-files plugin to read my Bower config and then return a stream of all the main JS files from all of my dependencies I've installed with Bower. It looks like this:

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

Unfortunately, this does not pick up any of the TinyMCE files, which are installed in my bower_components directory, because the 'tinymce' installed through Bower does not come with a package.json file. I think this is because you have the choice between using the regular and jQuery versions of TinyMCE, which are both in the package.

I had to change my Gulp task from above to get it to pick up the TinyMCE source code that I want (the jQuery version). That version looks like this:

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

That will include all of the JS files associated with TinyMCE and add them to the "main bower files" list.

This is only a partial solution though because you also have to pick up the TinyMCE CSS and font files. And then if you're build is completely different or you're not using the main-bower-files plugin, this might not help either.

这篇关于TinyMCE吞咽配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！