93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
'use client';
|
||
|
||
import dynamic from 'next/dynamic';
|
||
import { useMemo } from 'react';
|
||
import { cn } from '@/lib/utils';
|
||
|
||
// quill 主题样式（client 组件可直接 import）
|
||
import 'react-quill/dist/quill.snow.css';
|
||
|
||
// react-quill 仅支持客户端渲染
|
||
const ReactQuill = dynamic(() => import('react-quill'), {
|
||
ssr: false,
|
||
loading: () => (
|
||
<div className="flex h-64 items-center justify-center rounded bg-gray-50 text-xs text-gray-400">
|
||
编辑器加载中…
|
||
</div>
|
||
),
|
||
});
|
||
|
||
export interface RichEditorProps {
|
||
value?: string;
|
||
onChange: (html: string) => void;
|
||
placeholder?: string;
|
||
className?: string;
|
||
}
|
||
|
||
const TOOLBAR = [
|
||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||
['bold', 'italic', 'underline', 'strike'],
|
||
[{ color: [] }, { background: [] }],
|
||
[{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
|
||
['blockquote', 'code-block'],
|
||
['link', 'image'],
|
||
['clean'],
|
||
];
|
||
|
||
// 图片插入：转 base64 内联（如需对接后端上传，可在此处替换实现）
|
||
// quill 的 toolbar handler this 指向 toolbar 实例，需要 any
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
function imageHandler(this: any): void {
|
||
const quill = this?.quill;
|
||
if (!quill) return;
|
||
const input = document.createElement('input');
|
||
input.setAttribute('type', 'file');
|
||
input.setAttribute('accept', 'image/*');
|
||
input.addEventListener('change', () => {
|
||
const file = input.files?.[0];
|
||
if (!file) return;
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
const range = quill.getSelection();
|
||
const idx = range ? range.index : 0;
|
||
quill.insertEmbed(idx, 'image', String(reader.result));
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
input.click();
|
||
}
|
||
|
||
export function RichEditor({
|
||
value,
|
||
onChange,
|
||
placeholder = '请输入内容…',
|
||
className,
|
||
}: RichEditorProps) {
|
||
const modules = useMemo(
|
||
() => ({
|
||
toolbar: {
|
||
container: TOOLBAR,
|
||
handlers: { image: imageHandler },
|
||
},
|
||
}),
|
||
[],
|
||
);
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
'overflow-hidden rounded-md border border-gray-300 bg-white',
|
||
className,
|
||
)}
|
||
>
|
||
<ReactQuill
|
||
theme="snow"
|
||
value={value ?? ''}
|
||
onChange={onChange}
|
||
modules={modules}
|
||
placeholder={placeholder}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|