NextJs- React - Self hosted TinyMCE

tinymce-react-nextjs.md

1. Install (TinyMCE 5.x)

npm install --save tinymce @tinymce/tinymce-react copy-webpack-plugin

2. Copy static files(tinymce skins) to public folder. Edit file next.config.js

const path = require('path');
const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.plugins.push(new CopyPlugin([
            { from: path.join(__dirname, 'node_modules/tinymce/skins'), to: path.join(__dirname, 'public/assets/libs/tinymce/skins') }, /// Copy to public folder
        ]));
        return config
    },
    webpackDevMiddleware: config => {
        return config
    },
}

3. React components file

if(typeof window !== 'undefined'){
    require ('tinymce/tinymce');
    require ('tinymce/themes/silver');
    require ('tinymce/plugins/advlist');
    require ('tinymce/plugins/autolink');
    require ('tinymce/plugins/lists');
    require ('tinymce/plugins/link');
    require ('tinymce/plugins/image');
    require ('tinymce/plugins/charmap');
    require ('tinymce/plugins/print');
    require ('tinymce/plugins/preview');
    require ('tinymce/plugins/anchor');
    require ('tinymce/plugins/searchreplace');
    require ('tinymce/plugins/visualblocks');
    require ('tinymce/plugins/code');
    require ('tinymce/plugins/fullscreen');
    require ('tinymce/plugins/insertdatetime');
    require ('tinymce/plugins/media');
    require ('tinymce/plugins/table');
    require ('tinymce/plugins/paste');
    require ('tinymce/plugins/code');
    require ('tinymce/plugins/help');
    require ('tinymce/plugins/wordcount');
}

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

function AReactComponent(props) {
    return (
        <Editor 
            value={props.content}
            init={{
                height: 500,
                menubar: false,
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount'
                ],
                toolbar:
                    'undo redo | formatselect | bold italic backcolor | \
                    alignleft aligncenter alignright alignjustify | \
                    bullist numlist outdent indent | removeformat | \
                    table | help',
                skin_url: '/assets/libs/tinymce/skins/ui/oxide', // Static files path(step 2)
                content_css: '/assets/libs/tinymce/skins/content/default/content.min.css'  // Static files path(step 2)
            }}
            onEditorChange={props.handleOnEditorChange}      
        />
    );
}

thank you

Hi, thanks for the nice solution. I have faced some issues using the latest version of copy-webpack-plugin.

Using the latest versions of copy-webpack-plugin (^7.0.0), you need to enable webpack 5 and modify the use of CopyPlugin. Edit your next.config.js like below. I have also added tinymce themes and icons to the copy. You can add them to Editor the same way you added skin_url with theme_url and icons_url

In next.config.js :

const path = require("path");
const webpack = require("webpack");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.plugins.push(
      new CopyPlugin({
        patterns: [
          {
            from: path.join(__dirname, "node_modules/tinymce/skins"),
            to: path.join(__dirname, "public/assets/libs/tinymce/skins"),
          },
          {
            from: path.join(__dirname, "node_modules/tinymce/themes"),
            to: path.join(__dirname, "public/assets/libs/tinymce/themes"),
          },
          {
            from: path.join(__dirname, "node_modules/tinymce/icons"),
            to: path.join(__dirname, "public/assets/libs/tinymce/icons"),
          },
        ],
      })
    );
    return config;
  },
  webpackDevMiddleware: (config) => {
    return config;
  },
};

If you need to stick to webpack 4, you'll only need to downgrade copy-webpack-plugin

@CPoncet Also had same issue, thanks for the solution