Rails 6+Webpacker+Stimulus环境下TinyMCE图标加载404求助

Yep, that 404 error is definitely because Webpacker isn't bundling TinyMCE's default icon resources, so it's trying to load them from an incorrect path. You've got two straightforward fixes here—I'd recommend the first one for simplicity:

Method 1: Directly Import the Default Icons Module #

This is the cleanest approach, since TinyMCE's default icons are packaged as a standalone module. Just add one line to your Stimulus controller's imports:

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/icons/default'; // Add this line to import default icons
// Your other plugin imports go here...

Once you add this import, Webpack will automatically bundle the icon module into your pack files, and TinyMCE will load the icons without any extra path configuration. No need to tweak your tinymce.init() settings beyond what you already have (like skin: false).

Method 2: Use require.context for Icon Resources #

If the first method doesn't work for some reason (e.g., a specific version quirk), you can explicitly tell Webpack to bundle the icon files using require.context, similar to how you handled the skin resources. Add this to your controller's connect method:

connect() {
  // Existing skin context code
  const skinContext = require.context(
    '!file-loader?name=[path][name].[ext]&context=node_modules/tinymce/skins',
    true,
    /\.(png|jpg|jpeg|gif|svg|css|js)$/
  );
  skinContext.keys().forEach(skinContext);

  // New icon context code
  const iconsContext = require.context(
    '!file-loader?name=[path][name].[ext]&context=node_modules/tinymce/icons',
    true,
    /icons\.js$/
  );
  iconsContext.keys().forEach(iconsContext);

  // Initialize TinyMCE as before
  tinymce.init({
    selector: `#${this.element.id}`,
    skin: false,
    // Your other config options...
  });
}

This uses file-loader to copy the icon JS files into your packs directory, so TinyMCE can find them at the correct path when it tries to load them.

Just double-check that you aren't overriding the icons option in your tinymce.init() config—by default, icons: 'default' will work once the module is bundled correctly.

内容的提问来源于stack exchange，提问作者phil