NextJS setup
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.