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 mand 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.

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 mand 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.

• javascript
• node.js
• tinymce
• gulp
• browserify

• When do you have this error? Is when you attempt to load in browser? – mqueirozcorreia Commented Jan 29, 2016 at 0:17
• I have some error after concat and uglify. So, I added theme.js fail to concat and then rewrite css paths in theme.js. – Dmitresky Commented Mar 24, 2016 at 14:11

2 Answers 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_ponents/tinymce-dist/**/*').pipe(gulp.dest('src/main/resources/static/dist/tinymce'));

});

The answer here depends pletely 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_ponents directory, because the 'tinymce' installed through Bower does not e 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 pletely different or you're not using the main-bower-files plugin, this might not help either.