omsharp · May 19, 2022 22:45 · Apr 30, 2020 · Apr 30, 2020 · Apr 30, 2020 · Apr 30, 2020
diff --git a/tinymce-react-nextjs.md b/tinymce-react-nextjs.md
@@ -1,4 +1,4 @@
-1. Install
+1. Install (TinyMCE 5.x)
 ```shell script
 npm install --save tinymce @tinymce/tinymce-react copy-webpack-plugin
 ```

diff --git a/tinymce-react-nextjs.md b/tinymce-react-nextjs.md
@@ -3,7 +3,7 @@
 npm install --save tinymce @tinymce/tinymce-react copy-webpack-plugin
 ```
 
-2. Copy static files(tinymce skins) to `public` folder. next.config.js
+2. Copy static files(tinymce skins) to `public` folder. Edit file `next.config.js`
 ```javascript
 const path = require('path');
 const webpack = require('webpack');

diff --git a/tinymce-react-nextjs.md b/tinymce-react-nextjs.md
@@ -1,9 +1,9 @@
-- Install
+1. Install
 ```shell script
 npm install --save tinymce @tinymce/tinymce-react copy-webpack-plugin
 ```
 
-- Copy static files(tinymce skins) to `public` folder. next.config.js
+2. Copy static files(tinymce skins) to `public` folder. next.config.js
 ```javascript
 const path = require('path');
 const webpack = require('webpack');
@@ -21,7 +21,7 @@ module.exports = {
     },
 }
 ```
-- React components file
+3. React components file
 ```javascript
 if(typeof window !== 'undefined'){
     require ('tinymce/tinymce');
@@ -67,8 +67,8 @@ function AReactComponent(props) {
                     alignleft aligncenter alignright alignjustify | \
                     bullist numlist outdent indent | removeformat | \
                     table | help',
-                skin_url: '/assets/libs/tinymce/skins/ui/oxide',
-                content_css: '/assets/libs/tinymce/skins/content/default/content.min.css'  
+                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}      
         />

diff --git a/tinymce-react-nextjs.md b/tinymce-react-nextjs.md
@@ -0,0 +1,77 @@
+- Install
+```shell script
+npm install --save tinymce @tinymce/tinymce-react copy-webpack-plugin
+```
+
+- Copy static files(tinymce skins) to `public` folder. next.config.js
+```javascript
+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
+```javascript
+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',
+                content_css: '/assets/libs/tinymce/skins/content/default/content.min.css'  
+            }}
+            onEditorChange={props.handleOnEditorChange}      
+        />
+    );
+}
+```