692 lines
18 KiB
TypeScript
692 lines
18 KiB
TypeScript
// components/RichEditor/index.tsx
|
|
|
|
import { Editor } from '@tinymce/tinymce-react';
|
|
import { message } from 'antd';
|
|
import React, { useCallback, useEffect, useState } from 'react';
|
|
import type { Editor as TinyMCEEditor } from 'tinymce';
|
|
import './index.less';
|
|
|
|
export interface RichEditorProps {
|
|
value?: string;
|
|
onChange?: (content: string) => void;
|
|
height?: number;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
uploadConfig?: {
|
|
action: string;
|
|
headers?: Record<string, string>;
|
|
maxSize?: number;
|
|
acceptTypes?: string[];
|
|
data?: Record<string, any>;
|
|
};
|
|
showWordCount?: boolean;
|
|
maxWords?: number;
|
|
}
|
|
|
|
const RichEditor: React.FC<RichEditorProps> = ({
|
|
value = '',
|
|
onChange,
|
|
height = 400,
|
|
placeholder = '请输入内容...',
|
|
disabled = false,
|
|
showWordCount = true,
|
|
maxWords,
|
|
uploadConfig = {
|
|
action: '/api/upload/image',
|
|
maxSize: 5,
|
|
acceptTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
|
|
},
|
|
}) => {
|
|
const [uploading, setUploading] = useState(false);
|
|
const [wordCount, setWordCount] = useState(0);
|
|
const [charCount, setCharCount] = useState(0);
|
|
|
|
// 自定义字数统计函数
|
|
const countWords = (text: string) => {
|
|
const plainText = text.replace(/<[^>]*>/g, '');
|
|
const cleanText = plainText.replace(/\s+/g, ' ').trim();
|
|
|
|
if (!cleanText) return { words: 0, characters: 0 };
|
|
|
|
const chineseChars = cleanText.match(/[\u4e00-\u9fa5]/g) || [];
|
|
const englishWords = cleanText.match(/[a-zA-Z]+/g) || [];
|
|
const numbers = cleanText.match(/\d+/g) || [];
|
|
|
|
const words = chineseChars.length + englishWords.length + numbers.length;
|
|
const characters = cleanText.length;
|
|
|
|
return { words, characters };
|
|
};
|
|
|
|
const handleEditorChange = (content: string) => {
|
|
onChange?.(content);
|
|
|
|
if (showWordCount) {
|
|
const { words, characters } = countWords(content);
|
|
setWordCount(words);
|
|
setCharCount(characters);
|
|
|
|
if (maxWords && words > maxWords) {
|
|
message.warning(
|
|
`内容超出字数限制，当前 ${words} 字，限制 ${maxWords} 字`,
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (showWordCount && value) {
|
|
const { words, characters } = countWords(value);
|
|
setWordCount(words);
|
|
setCharCount(characters);
|
|
}
|
|
}, [value, showWordCount]);
|
|
|
|
const uploadFile = useCallback(
|
|
async (file: File): Promise<string> => {
|
|
return new Promise((resolve, reject) => {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
if (uploadConfig.data) {
|
|
Object.keys(uploadConfig.data).forEach((key) => {
|
|
if (uploadConfig.data) formData.append(key, uploadConfig.data[key]);
|
|
});
|
|
}
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
xhr.upload.addEventListener('progress', (e) => {
|
|
if (e.lengthComputable) {
|
|
const percent = Math.round((e.loaded / e.total) * 100);
|
|
console.log(`上传进度: ${percent}%`);
|
|
}
|
|
});
|
|
|
|
xhr.addEventListener('load', () => {
|
|
if (xhr.status === 200) {
|
|
try {
|
|
const response = JSON.parse(xhr.responseText);
|
|
if (response.code === 200 && response.data?.url) {
|
|
resolve(response.data.url);
|
|
} else {
|
|
reject(response.message || '上传失败');
|
|
}
|
|
} catch (_error) {
|
|
reject('响应解析失败');
|
|
}
|
|
} else {
|
|
reject(`上传失败: ${xhr.status}`);
|
|
}
|
|
});
|
|
|
|
xhr.addEventListener('error', () => {
|
|
reject('网络错误');
|
|
});
|
|
|
|
if (uploadConfig.headers) {
|
|
Object.keys(uploadConfig.headers).forEach((key) => {
|
|
if (uploadConfig.headers)
|
|
xhr.setRequestHeader(key, uploadConfig.headers[key]);
|
|
});
|
|
}
|
|
|
|
xhr.open('POST', uploadConfig.action);
|
|
xhr.send(formData);
|
|
});
|
|
},
|
|
[uploadConfig],
|
|
);
|
|
|
|
const handleImageUpload = useCallback(
|
|
(blobInfo: any, _: (percent: number) => void): Promise<string> => {
|
|
return new Promise((resolve, reject) => {
|
|
try {
|
|
setUploading(true);
|
|
const file = blobInfo.blob();
|
|
uploadFile(file).then((url) => {
|
|
resolve(url);
|
|
message.success('图片上传成功');
|
|
});
|
|
} catch (error) {
|
|
reject(error);
|
|
message.error(typeof error === 'string' ? error : '上传失败');
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
});
|
|
},
|
|
[uploadFile],
|
|
);
|
|
|
|
const handleCustomUpload = useCallback(
|
|
(editor: TinyMCEEditor) => {
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
|
|
input.multiple = true;
|
|
|
|
const handleFileChange = async (event: Event) => {
|
|
const target = event.target as HTMLInputElement;
|
|
const files = Array.from(target.files || []);
|
|
|
|
if (files.length === 0) return;
|
|
|
|
setUploading(true);
|
|
|
|
try {
|
|
for (const file of files) {
|
|
const isValidType = uploadConfig.acceptTypes?.includes(file.type);
|
|
if (!isValidType) {
|
|
message.error(`文件 ${file.name} 类型不支持`);
|
|
continue;
|
|
}
|
|
|
|
const isValidSize =
|
|
file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
|
|
if (!isValidSize) {
|
|
message.error(
|
|
`文件 ${file.name} 大小超过 ${uploadConfig.maxSize || 5}MB`,
|
|
);
|
|
continue;
|
|
}
|
|
|
|
try {
|
|
const url = await uploadFile(file);
|
|
const imgHtml = `<img src="${url}" alt="${file.name}" style="max-width: 100%; height: auto;" />`;
|
|
editor.insertContent(imgHtml);
|
|
message.success(`${file.name} 上传成功`);
|
|
} catch (error) {
|
|
message.error(`${file.name} 上传失败: ${error}`);
|
|
}
|
|
}
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
input.addEventListener('change', handleFileChange);
|
|
input.click();
|
|
},
|
|
[uploadConfig, uploadFile],
|
|
);
|
|
|
|
// 全展开的工具栏配置
|
|
const editorConfig = {
|
|
height,
|
|
menubar: 'file edit view insert format tools table help',
|
|
plugins: [
|
|
'advlist',
|
|
'autolink',
|
|
'lists',
|
|
'link',
|
|
'image',
|
|
'charmap',
|
|
'preview',
|
|
'anchor',
|
|
'searchreplace',
|
|
'visualblocks',
|
|
'code',
|
|
'fullscreen',
|
|
'insertdatetime',
|
|
'media',
|
|
'table',
|
|
'help',
|
|
'wordcount',
|
|
'emoticons',
|
|
'template',
|
|
'codesample',
|
|
'hr',
|
|
'pagebreak',
|
|
'nonbreaking',
|
|
'toc',
|
|
'imagetools',
|
|
'textpattern',
|
|
'noneditable',
|
|
'quickbars',
|
|
'accordion',
|
|
],
|
|
|
|
// 修改为全展开的工具栏配置
|
|
toolbar: [
|
|
// 第一行：撤销重做 + 格式选择 + 字体
|
|
'undo redo | blocks fontfamily fontsize',
|
|
|
|
// 第二行：文本格式
|
|
'bold italic underline strikethrough subscript superscript | forecolor backcolor',
|
|
|
|
// 第三行：对齐和列表
|
|
'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
|
|
|
|
// 第四行：插入功能
|
|
'link customupload image media table emoticons charmap insertdatetime hr pagebreak',
|
|
|
|
// 第五行：高级功能
|
|
'codesample accordion blockquote | searchreplace visualblocks code',
|
|
|
|
// 第六行：其他工具
|
|
'removeformat | fullscreen preview help',
|
|
].join(' | '),
|
|
|
|
// 设置工具栏模式为换行显示，而不是滑动
|
|
toolbar_mode: 'wrap' as const, // 改为 wrap 模式，全部展开
|
|
|
|
// 工具栏分组，每组之间有分隔符
|
|
toolbar_groups: {
|
|
history: { icon: 'undo', tooltip: '历史操作' },
|
|
formatting: { icon: 'bold', tooltip: '文本格式' },
|
|
alignment: { icon: 'align-left', tooltip: '对齐方式' },
|
|
indentation: { icon: 'indent', tooltip: '缩进' },
|
|
insert: { icon: 'plus', tooltip: '插入' },
|
|
tools: { icon: 'preferences', tooltip: '工具' },
|
|
},
|
|
|
|
font_family_formats: [
|
|
'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif',
|
|
'苹方=PingFang SC,Microsoft YaHei,sans-serif',
|
|
'宋体=SimSun,serif',
|
|
'黑体=SimHei,sans-serif',
|
|
'楷体=KaiTi,serif',
|
|
'Arial=arial,helvetica,sans-serif',
|
|
'Times New Roman=times new roman,times,serif',
|
|
'Courier New=courier new,courier,monospace',
|
|
].join(';'),
|
|
|
|
fontsize_formats:
|
|
'8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 36px 48px 72px',
|
|
|
|
block_formats: [
|
|
'段落=p',
|
|
'标题1=h1',
|
|
'标题2=h2',
|
|
'标题3=h3',
|
|
'标题4=h4',
|
|
'标题5=h5',
|
|
'标题6=h6',
|
|
'预格式化=pre',
|
|
'地址=address',
|
|
'代码=code',
|
|
].join(';'),
|
|
|
|
// 字数统计配置
|
|
wordcount_countregex: /[\w\u2019\u4e00-\u9fa5]+/g,
|
|
wordcount_cleanregex: /[0-9.(),;:!?%#$?\x27\x22_+=\\/-]*/g,
|
|
|
|
// 颜色配置
|
|
color_map: [
|
|
'000000',
|
|
'黑色',
|
|
'993300',
|
|
'深红色',
|
|
'333300',
|
|
'深黄色',
|
|
'003300',
|
|
'深绿色',
|
|
'003366',
|
|
'深青色',
|
|
'000080',
|
|
'深蓝色',
|
|
'333399',
|
|
'蓝色',
|
|
'333333',
|
|
'深灰色',
|
|
'800000',
|
|
'栗色',
|
|
'FF6600',
|
|
'橙色',
|
|
'808000',
|
|
'橄榄色',
|
|
'008000',
|
|
'绿色',
|
|
'008080',
|
|
'青色',
|
|
'0000FF',
|
|
'蓝色',
|
|
'666699',
|
|
'灰蓝色',
|
|
'808080',
|
|
'灰色',
|
|
'FF0000',
|
|
'红色',
|
|
'FF9900',
|
|
'琥珀色',
|
|
'99CC00',
|
|
'黄绿色',
|
|
'339966',
|
|
'海绿色',
|
|
'33CCCC',
|
|
'青绿色',
|
|
'3366FF',
|
|
'蓝色',
|
|
'800080',
|
|
'紫色',
|
|
'999999',
|
|
'中灰色',
|
|
'FF00FF',
|
|
'洋红色',
|
|
'FFCC00',
|
|
'金色',
|
|
'FFFF00',
|
|
'黄色',
|
|
'00FF00',
|
|
'酸橙色',
|
|
'00FFFF',
|
|
'水蓝色',
|
|
'00CCFF',
|
|
'天蓝色',
|
|
'993366',
|
|
'红紫色',
|
|
'FFFFFF',
|
|
'白色',
|
|
],
|
|
|
|
// 代码高亮配置
|
|
codesample_languages: [
|
|
{ text: 'HTML/XML', value: 'markup' },
|
|
{ text: 'JavaScript', value: 'javascript' },
|
|
{ text: 'TypeScript', value: 'typescript' },
|
|
{ text: 'CSS', value: 'css' },
|
|
{ text: 'SCSS', value: 'scss' },
|
|
{ text: 'Python', value: 'python' },
|
|
{ text: 'Java', value: 'java' },
|
|
{ text: 'C++', value: 'cpp' },
|
|
{ text: 'C#', value: 'csharp' },
|
|
{ text: 'PHP', value: 'php' },
|
|
{ text: 'Ruby', value: 'ruby' },
|
|
{ text: 'Go', value: 'go' },
|
|
{ text: 'Rust', value: 'rust' },
|
|
{ text: 'SQL', value: 'sql' },
|
|
{ text: 'JSON', value: 'json' },
|
|
{ text: 'Bash', value: 'bash' },
|
|
],
|
|
|
|
// 表格配置
|
|
table_default_attributes: {
|
|
border: '1',
|
|
},
|
|
table_default_styles: {
|
|
'border-collapse': 'collapse',
|
|
width: '100%',
|
|
},
|
|
table_class_list: [
|
|
{ title: '无样式', value: '' },
|
|
{ title: '简单表格', value: 'simple-table' },
|
|
{ title: '条纹表格', value: 'striped-table' },
|
|
{ title: '边框表格', value: 'bordered-table' },
|
|
],
|
|
|
|
// 链接配置
|
|
link_default_target: '_blank',
|
|
link_assume_external_targets: true,
|
|
link_context_toolbar: true,
|
|
|
|
// 图片配置
|
|
image_advtab: true,
|
|
image_caption: true,
|
|
|
|
// 媒体配置
|
|
media_live_embeds: true,
|
|
media_filter_html: false,
|
|
|
|
content_style: `
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
margin: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 24px;
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
h1 { font-size: 2em; color: #1a1a1a; }
|
|
h2 { font-size: 1.5em; color: #2a2a2a; }
|
|
h3 { font-size: 1.25em; color: #3a3a3a; }
|
|
|
|
p { margin-bottom: 16px; }
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
margin: 8px 0;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 16px 0;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
table td, table th {
|
|
border: 1px solid #e8e8e8;
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 4px solid #1890ff;
|
|
margin: 16px 0;
|
|
padding: 8px 16px;
|
|
background-color: #f6f8fa;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
code {
|
|
background-color: #f1f3f4;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
color: #d73a49;
|
|
}
|
|
|
|
pre {
|
|
background-color: #f8f8f8;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
overflow-x: auto;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
pre code {
|
|
background: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
`,
|
|
|
|
placeholder,
|
|
branding: false,
|
|
elementpath: true,
|
|
resize: 'both' as const,
|
|
statusbar: showWordCount,
|
|
|
|
// 图片上传配置
|
|
images_upload_handler: handleImageUpload,
|
|
automatic_uploads: true,
|
|
images_reuse_filename: true,
|
|
images_upload_url: uploadConfig.action,
|
|
images_upload_base_path: '',
|
|
images_upload_credentials: true,
|
|
|
|
// 粘贴配置
|
|
paste_data_images: true,
|
|
paste_as_text: false,
|
|
paste_webkit_styles: 'none',
|
|
paste_merge_formats: true,
|
|
paste_remove_styles_if_webkit: true,
|
|
|
|
// 文件选择器配置
|
|
file_picker_types: 'image media',
|
|
file_picker_callback: (
|
|
callback: (url: string, meta?: any) => void,
|
|
// value: string,
|
|
meta: any,
|
|
) => {
|
|
if (meta.filetype === 'image') {
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
|
|
|
|
const handleChange = async (event: Event) => {
|
|
const target = event.target as HTMLInputElement;
|
|
const file = target.files?.[0];
|
|
|
|
if (!file) return;
|
|
|
|
const isValidType = uploadConfig.acceptTypes?.includes(file.type);
|
|
const isValidSize =
|
|
file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
|
|
|
|
if (!isValidType) {
|
|
message.error('文件类型不支持');
|
|
return;
|
|
}
|
|
|
|
if (!isValidSize) {
|
|
message.error(`文件大小不能超过 ${uploadConfig.maxSize || 5}MB`);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setUploading(true);
|
|
const url = await uploadFile(file);
|
|
callback(url, { alt: file.name });
|
|
message.success('图片上传成功');
|
|
} catch (error) {
|
|
message.error('上传失败');
|
|
console.error('Upload error:', error);
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
input.addEventListener('change', handleChange);
|
|
input.click();
|
|
}
|
|
},
|
|
|
|
// 快速工具栏
|
|
quickbars_selection_toolbar:
|
|
'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
|
|
quickbars_insert_toolbar: 'quickimage quicktable',
|
|
|
|
// 文本模式
|
|
textpattern_patterns: [
|
|
{ start: '*', end: '*', format: 'italic' },
|
|
{ start: '**', end: '**', format: 'bold' },
|
|
{ start: '#', format: 'h1' },
|
|
{ start: '##', format: 'h2' },
|
|
{ start: '###', format: 'h3' },
|
|
{ start: '####', format: 'h4' },
|
|
{ start: '#####', format: 'h5' },
|
|
{ start: '######', format: 'h6' },
|
|
{ start: '1. ', cmd: 'InsertOrderedList' },
|
|
{ start: '* ', cmd: 'InsertUnorderedList' },
|
|
{ start: '- ', cmd: 'InsertUnorderedList' },
|
|
],
|
|
|
|
// 初始化设置
|
|
setup: (editor: TinyMCEEditor) => {
|
|
// 注册自定义上传按钮
|
|
editor.ui.registry.addButton('customupload', {
|
|
text: uploading ? '上传中...' : '上传',
|
|
icon: 'upload',
|
|
tooltip: '上传图片（支持多选）',
|
|
enabled: !disabled && !uploading,
|
|
onAction: () => {
|
|
handleCustomUpload(editor);
|
|
},
|
|
});
|
|
|
|
// 监听内容变化，实时更新字数统计
|
|
editor.on('input change undo redo', () => {
|
|
if (showWordCount) {
|
|
const content = editor.getContent();
|
|
const { words, characters } = countWords(content);
|
|
setWordCount(words);
|
|
setCharCount(characters);
|
|
}
|
|
});
|
|
|
|
editor.on('init', () => {
|
|
console.log('编辑器初始化完成');
|
|
|
|
// 初始化字数统计
|
|
if (showWordCount && value) {
|
|
const { words, characters } = countWords(value);
|
|
setWordCount(words);
|
|
setCharCount(characters);
|
|
}
|
|
});
|
|
},
|
|
|
|
// 其他配置
|
|
convert_urls: false,
|
|
remove_script_host: false,
|
|
relative_urls: false,
|
|
language: 'zh_CN',
|
|
directionality: 'ltr' as const,
|
|
|
|
// 高级配置
|
|
extended_valid_elements: 'script[src|async|defer|type|charset]',
|
|
|
|
// 性能配置
|
|
browser_spellcheck: true,
|
|
contextmenu: 'link image table',
|
|
};
|
|
|
|
return (
|
|
<div className="rich-editor-wrapper">
|
|
<Editor
|
|
value={value}
|
|
onEditorChange={handleEditorChange}
|
|
init={editorConfig}
|
|
disabled={disabled}
|
|
/>
|
|
|
|
{/* 自定义字数统计显示 */}
|
|
{showWordCount && (
|
|
<div className="word-count-display">
|
|
<span className="word-count">
|
|
字数: {wordCount}
|
|
{maxWords && (
|
|
<span className={wordCount > maxWords ? 'over-limit' : ''}>
|
|
/{maxWords}
|
|
</span>
|
|
)}
|
|
</span>
|
|
<span className="char-count">字符: {charCount}</span>
|
|
</div>
|
|
)}
|
|
|
|
{uploading && (
|
|
<div className="upload-overlay">
|
|
<div className="upload-spinner">
|
|
<div className="spinner"></div>
|
|
<span>上传中...</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RichEditor;
|