Using self hosted with module loader

[sseppo]

Hi, the example works fine as that, without self-hosting.

However, when I tried selfhosting, the editor did not appear, though it seems to take same space.

What I did:
Installed with
npm install --save @tinymce/tinymce-react
Installed also with
npm install tinymce --save

I have following imports:

// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// Default icons are required for TinyMCE 5.3 or above
import 'tinymce/icons/default';

// A theme is also required
import 'tinymce/themes/silver';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';

import { Editor } from '@tinymce/tinymce-react';

I also copied skins directory from node_modules to root (with src and also to src folder) from node_modules/tinymce/skins

However, the editor does not appear. I did not find a way to tell your Editor-component that tinyMCE is selfhosted, and not cloud version. Maybe that affects somehow, or I did something wrong there?

Thanks in advance!

[GendelfLugansk]

I guess base_url initialization option should work (try to add it to init property)

[KrzysztofWidackiPracuj]

I have similiar problem and from what I know editor looks for global variable tinymce, so maybe try to window.tinymce = tinymce ?

[CAM603]

I tried just about everything and this ended up working for me:

// Import TinyMce
import "tinymce";

// Default Icons
import "tinymce/icons/default";

// Theme
import "tinymce/themes/silver";

// Plugins
import "tinymce/plugins/image";

// CSS
import "tinymce/skins/ui/oxide/skin.min.css";

import { Editor } from '@tinymce/tinymce-react';

I installed tinymce and @tinymce/tinymce-react and did not copy the skins directory anywhere.

Hope this helps you and others!

[GendelfLugansk]

@CAM603 check networking tab in dev tools. There is a possibility that tinymce still tries to load css files. In particular, it needs two content.css files. Self-hosting is a best approach so far.

[CAM603]

@GendelfLugansk okay, I do see a get request for skin.min.css, content.min.css and content.css. Are you suggesting I do something different? Thank you

[GendelfLugansk]

@CAM603

First of all, you will need to copy tinymce folder from node_modules to public. To automate this, I personally use ncp package. Here how it looks in package.json:

"scripts": {
  "start": "yarn build:tinymce && react-scripts start",
  "build": "yarn build:tinymce && react-scripts build",
  "build:tinymce": "ncp './node_modules/tinymce' './public/tinymce'"
},
"devDependencies": {
  "ncp": "2.0.0",
}

Then you have two options:

1. Import anything (like you did) except css and use base_url option

2. Instead of importing tinymce files, add this line to index.html: <script src="%PUBLIC_URL%/tinymce/tinymce.min.js"></script> (I use this method). TinyMCE will load needed files on its own.

[CAM603]

@GendelfLugansk That worked, thank you so much!

[tiny-james]

You can turn off the CSS requests in the config if you wish though generally if you can I'd advise loading from the public URL like GendelfLugansk says.

If you wish to turn off the CSS requests and do everything with webpack you need something like this (this won't work with the more complex plugins):

import { Editor } from '@tinymce/tinymce-react';

// TinyMCE so the global var exists
// eslint-disable-next-line no-unused-vars
import tinymce from 'tinymce/tinymce';

// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// importing the plugin js. Note that most of the premium plugins can't be imported this way because they have extra resources that have to be loaded asynchronously at runtime
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/spellchecker';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/code';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/media';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/table';
import 'tinymce/plugins/template';
import 'tinymce/plugins/help';

// Content styles, including inline UI like fake cursors
/* eslint import/no-webpack-loader-syntax: off */
import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';

export default function TinyEditorComponent(props) {
  return (
    <Editor
    init={{
      skin: false, // skin is loaded manually above as an import
      content_css: false, // loaded manually directly below
      content_style: [contentCss, contentUiCss].join('\n'),
  />
  );
}

[joelm10]

@tiny-james are you able to put a snippet in for the appropriate/required webpack rule to support the above- which will bundle the CSS in with the artifact?

[tiny-james]

Well if you're using raw-loader as above then you'll need to make a rule that only effects the two CSS files that need to be in the content.

Working from the example on this page:
https://webpack.js.org/loaders/raw-loader/
I suppose that you could set the test to match content.min.css:

      {
        test: /content\.min\.css$/,
        use: 'raw-loader',
      },

Though doing some googling it seems that the preferred method would be using css-loader combined with to-string-loader:
https://webpack.js.org/loaders/css-loader/

So maybe something like:

module.exports = {
  module: {
    rules: [
      {
        test: /content\.min\.css$/i,
        use: ["to-string-loader", "css-loader"],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

[tiny-james]

I'm going to convert this to a discussion as while it's useful it's not really an issue we can act on (except maybe to improve our docs).