Using the local files with Webpack

[akowi-sknobloch]

I deploy the client of my Webapp using Webpack.

I would like to switch to the local files instead of the cloud so the app works without internet (only runs in the local network). After adding the import for the base tinymce module it seems not to use the cloud anymore but the editor is not rendering anymore.

After looking at the errors in the browser console it seems like tiny tries to load additional files with a path like this: localhost:3000/js/<different plugins, themes etc>

The required files are not at this path therefore the editor does not load. Tried adding the missing parts via imports, wich seems to work except for: http://localhost:3000/js/langs/de.js http://localhost:3000/js/plugins/emoticons/js/emojis.js

My import statements look like this:

import 'tinymce';
import 'tinymce/plugins/link';
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/codesample';
import '@tinymce/tinymce-webcomponent';

I don't know what imports to add to make it work. The emoji one is not that important as i was thinking replacing it with a custom one. But the language would be obviously really important.

UPDATE:

Seems like i got the language working by downloading the lang js file and adding it locally. Removed the emoticons plugin and now it seems like the js files are ok. The editor still does not show up seems like the same problem applies to the Stylesheet files. The same workaround does not quite work for the Stylesheets, will try importing them via SASS und update again if it works.

[exalate-issue-sync[bot]]

Ref: INT-2600

[jscasca]

Hi @akowi-sknobloch if you want to self-host I would recommend putting the tinymce folder in a public place and use the src property of the component to point to that path since that will be easier than importing each individual component of the editor

[akowi-sknobloch]

Thanks for the answer.

I have the package installed via npm. Putting the static files in my Project would likely work. But that way i cannot update/manage the version via npm and the git repository gets blown up. Would really prefer to use it via the node_modules.

I have an idea to move the files from the node_modules into my assets output folder via a bit of Webpack magic. Will try this later and write back if it works.

[akowi-sknobloch]

Ok the Webpack magic did the trick. Using the copy-webpack-plugin i can copy the static files from the node_modules into my assets directory.

Just added this small snippet to my Webpack plugin config:

new CopyPlugin({
  patterns: [
    {
      from: 'node_modules/tinymce',
      to: path.resolve(__dirname, 'assets/tinymce'),
    },
    {
      from: 'tiny-mce-langs',
      to: path.resolve(__dirname, 'assets/tinymce/langs'),
    },
  ],
})

Set the src prop like @jscasca said and it works like a charm. For the lang package I added the tiny-mce-langs folder to my projects root directory. My server is configured to static serve everything in the assetsdirectory.