Redactor can work in NextJS, just import the editor and make a React component:
// RedactorJS.js
import React, { useEffect, useRef } from 'react';
import './redactor.min.css';
import Redactor from './redactor.usm.min.js';
import './emoji.js';
const RedactorJS = ({ opts }) => {
const textAreaRef = useRef(null);
useEffect(() => {
let editor;
let opts = {
plugins: ['emoji'],
content: 'Hello World!'
};
if (textAreaRef.current) {
editor = Redactor(textAreaRef.current, opts);
}
return () => {
if (editor) {
editor.destroy();
}
};
}, [opts]);
return <textarea ref={textAreaRef}></textarea>;
};
export default RedactorJS;
Now you can import the component into the page like this:
// page.js
'use client'
import RedactorJS from '../components/RedactorJS.js';
export default () => (
<div>
<RedactorJS />
</div>
);
Please make sure that the path to the component is set correctly.
Redactor uses a window object because of this window detection error may occur when rendering NextJs on the server. In this case you can connect the editor dynamically with rendering only on the client side:
// page.js
'use client'
import dynamic from "next/dynamic";
const RedactorJS = dynamic(() => import("../components/RedactorJS"), {
ssr: false,
});
export default () => (
<div>
<RedactorJS />
</div>
);