CODEWITHSUNDEEP
ruby-on-railstinymce
phil
phil

Reputation: 4908

TinyMCE w/Rails 6 and webpacker - no icons, turbolinks

We are trying to upgrade our app to Rails 6 with Webpacker (and Stimulus). Things are going fine except for TinyMCE. We have 2 problems, I will ask them in separate SO questions.

We installed TinyMCE using 

yarn add tinymce

and have version 5.3.0

In our stimulus controller header we have:

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/skins/ui/oxide/skin.min';
import 'tinymce/skins/ui/oxide/content.min';

import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';

And then in the controller connect block we have:

  connect() {
    console.log('gonna reload');
    require.context(
      '!file-loader?name=[path][name].[ext]&context=node_modules/tinymce&outputPath=js!tinymce/skins',
      true,
      /.*/
    );
    tinymce.init({
      selector: '.tinymce',
      plugins: ['paste', 'link'],
      skin: false
    });
  }

This is code that essentially works, except that in the console I see:

VM40 application-68201fac0dcbbcb543e0.js:213771 GET https://xxx.ngrok.io/packs/js/icons/default/icons.js net::ERR_ABORTED 404 (Not Found)
VM40 application-68201fac0dcbbcb543e0.js:224775 Failed to load icons: default from url https://xxx.ngrok.io/packs/js/icons/default/icons.js

Do we need another require.context to handle the loading of those?

Upvotes: 1

Views: 971

Answers (1)

philipk
philipk

Reputation: 51

It looks like TinyMCE no longer loads the icons dynamically, so Webpack must be instructed to include them in the bundle manually. Adding the icons import after the tinymce import worked for me:

import 'tinymce/icons/default';

Upvotes: 5

Related Questions