Self hosted TinyMCE 6.x in NextJS 12.x - Javascript version

Self hosted TinyMCE 6.x in NextJS 12.x - Javascript version

Create NextJS Project

1
yarn create next-app

Install TinyMCE latest version

1
yarn add tinymce @tinymce/tinymce-react copy-webpack-plugin

Copy TinyMCE files to public folder as self hosted

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/** @type {import('next').NextConfig} */
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");

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

module.exports = nextConfig;

Create the editor component

Create the file components/editor/CustomEditor.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { Editor } from "@tinymce/tinymce-react";
import React, { useRef } from "react";

export function CustomEditor(props) {
const editorRef = useRef(null);
const log = () => {
if (editorRef.current) {
console.log(editorRef.current.getContent());
}
};
return (
<Editor
tinymceScriptSrc={"/assets/libs/tinymce/tinymce.min.js"}
onInit={(evt, editor) => (editorRef.current = editor)}
value={props.content}
init={{
height: 500,
menubar: true,
plugins: [
"advlist",
"autolink",
"lists",
"link",
"image",
"charmap",
"preview",
"anchor",
"searchreplace",
"visualblocks",
"code",
"fullscreen",
"insertdatetime",
"media",
"table",
"code",
"help",
"wordcount",
],
toolbar:
"undo redo | blocks | " +
"bold italic forecolor | alignleft aligncenter " +
"alignright alignjustify | bullist numlist outdent indent | " +
"removeformat | help",
content_style:
"body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
}}
onEditorChange={props.handleOnEditorChange}
/>
);
}

Done

Demo

Referrals

Photo by Aryan Dhiman on Unsplash

NextJs- React - Self hosted TinyMCE

Hosting the TinyMCE package with the React framework

Self hosted TinyMCE 6.x in NextJS 12.x - Javascript version

https://iiiyu.com/2022/08/28/Self-hosted-TinyMCE-6-x-in-NextJS-12-x-Javascript-version/

Author

Ewan Xiao

Posted on

August 28th 2022

Updated on

May 17th 2024

Licensed under

Comments