46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import { CKEditor } from '@ckeditor/ckeditor5-react';
|
|
import { ClassicEditor } from 'ckeditor5';
|
|
|
|
// Dynamically import CKEditor to avoid SSR issues
|
|
const DynamicCKEditor = dynamic(() => Promise.resolve(CKEditor), {
|
|
ssr: false,
|
|
loading: () => <div>Loading editor...</div>
|
|
});
|
|
|
|
interface EditorProps {
|
|
data?: string;
|
|
onChange?: (data: string) => void;
|
|
config?: any;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function Editor({ data = '', onChange, config = {}, disabled = false }: EditorProps) {
|
|
return (
|
|
<div className="ckeditor-wrapper">
|
|
<DynamicCKEditor
|
|
editor={ClassicEditor}
|
|
data={data}
|
|
onChange={(event, editor) => {
|
|
const data = editor.getData();
|
|
onChange?.(data);
|
|
}}
|
|
config={{
|
|
toolbar: [
|
|
'heading', '|',
|
|
'bold', 'italic', 'link', '|',
|
|
'bulletedList', 'numberedList', '|',
|
|
'outdent', 'indent', '|',
|
|
'blockQuote', 'insertTable', '|',
|
|
'undo', 'redo'
|
|
],
|
|
...config
|
|
}}
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|