"use client";
import { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";
interface WysiwygProps {
onContentChange: (text: string, cleanedText: string) => void;
initialValue?: string;
}
const Wysiwyg: React.FC<WysiwygProps> = ({ onContentChange }) => {
const editorRef = useRef<any>(null);
const handleEditorInit = (editor: any) => {
editorRef.current = editor;
};
const handleEditorChange = (content: string) => {
const cleanedText = content
.replace(/style=".*?"/g, "")
.replace(/\s*<\s*span\s*>\s*/g, "")
.replace(/\s*<\s*\/\s*span\s*>\s*/g, "");
onContentChange(content, cleanedText);
};
return (
<div>
<Editor
onInit={handleEditorInit}
apiKey="rkhc3vrewrubakia2w6rucqx4eg50zme8rnp6ob9nilsv63f" // TinyMCE API key
init={{
height: 400,
menubar: true,
plugins: [
"advlist",
"lists",
"link",
"image",
"charmap",
"print",
"preview",
"anchor",
"searchplace",
"visualblocks",
"code",
"fullscreen",
"insertdatetime",
"media",
"table",
"paste",
"code",
"help",
"wordcount",
"imagetools",
"codesample",
"emoticons",
"hr",
],
toolbar:
"undo redo | blocks | " +
"bold italic forecolor backcolor | fontsize | fontfamily | alignleft aligncenter alignright alignjustify | " +
"bullist numlist outdent indent | removeformat | custom-button custom-menu-item | codesample emoticons | lineheight",
}}
onEditorChange={handleEditorChange}
/>
</div>
);
};
export default Wysiwyg;