TinyMCE gulp configuration

Question

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.

Answer 1

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.

Answer 2

I had an open issue with the main-bower-files author who discouraged the use of it together with TinyMCE, probably due to the large number of extra files that must be included (?). See the following issue on Github.

I ended up just copying the tinymce folder to my dist/ through a simple gulp task. I use Bower and different paths probably, but you get the idea

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

});