Rails / Webpack：TinyMCE 无法加载皮肤（404（未找到））

Question

I am working on a Rails project that has been using assets pipeline but we are currently trying to transition to webpack. I encountered a problem when attempting to get TinyMCE to work after pulling it through yarn - the text editor simply won't load.

Before the transition to webpack

Originally I used a CDN in the application.html.haml and things were working fine:

%script{src: 'https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=gexncjni90zx3qf0m5rr7kl8l40wd5yuly2xjza0g3kwrljt'}`

---

After the transition

I installed the package through yarn: $ yarn add tinymce

I also have my tinyMce.js file (the function itself has not been changed):

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';

function tinyMce() {
    $(document).on('turbolinks:load', function () {
        tinyMCE.remove();
        tinyMCE.init({
            selector: 'textarea.tinymce',
            plugins: [
                'table', 'lists'
            ],
        });
    });
}

export { tinyMce };

---

And in my application.js:

import { tinyMce } from "../vendor/tinyMCE/tinyMce";

Since TinyMCE will not work without a skin, I followed the documentation and ran

$ cp -r node_modules/tinymce/skins skins

But the error in the console does not get resolved:

I tried putting the skins folder directly in the root directory, in a packs folder placed in the root and in the javascript/packs but the error stays the same, even when I try specifying the skin_url.

General notes

• Webpack itself is working fine, both with custom scripts and imported packs (tested with typed.js).
• tinymce seems to be loading as well - previously I had more errors in the console, regarding the table and lists plugins, but these went away after adding the 2 import lines to tinyMce.js.

Any tips on what I might be missing?

Answer 1

通过将这两行添加到我的tinyMce.js文件中，我设法让它工作：

import 'tinymce/skins/lightgray/content.min.css';
import 'tinymce/skins/lightgray/skin.min.css';

那时文本编辑器按预期工作，但是我在控制台中收到以下错误：

这是通过添加skin: false到我的tinymce.init设置解决的。