zhangshine/tinymce-react-nextjs.md

## tinymce-react-nextjs.md

      
    Raw
  

              tinymce-react-nextjs.md
            
          
Install (TinyMCE 5.x)

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

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
    },
}

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}      
        />
    );
}