From 241983f819c8637def4d261870d16f6b4f9f9085 Mon Sep 17 00:00:00 2001 From: Joe Date: Wed, 16 Jul 2025 00:47:21 +0800 Subject: [PATCH] up --- .../TinyMCEEditor/AdvancedEditor.tsx | 5 ++-- .../TinyMCEEditor/SimpleImagePasteEditor.tsx | 14 +++++----- src/components/TinyMCEEditor/config.ts | 6 ++--- .../TinyMCEEditor/usage-example.tsx | 2 +- src/components/WangEditor/index.tsx | 27 ++++++++----------- .../ContentList/components/UpdateForm.tsx | 13 ++++----- .../FashionTrend/components/UpdateForm.tsx | 9 +++++-- .../components/UpdateForm.tsx | 8 +++++- .../components/OperateInstructionForm.tsx | 8 +++++- 9 files changed, 51 insertions(+), 41 deletions(-) diff --git a/src/components/TinyMCEEditor/AdvancedEditor.tsx b/src/components/TinyMCEEditor/AdvancedEditor.tsx index 1d136b7..35a712d 100644 --- a/src/components/TinyMCEEditor/AdvancedEditor.tsx +++ b/src/components/TinyMCEEditor/AdvancedEditor.tsx @@ -147,8 +147,9 @@ const AdvancedEditor: React.FC = ({ const initConfig = { height, - language: customConfig.language || 'zh_CN', - language_url: customConfig.languageUrl || '/tinymce/langs/zh_CN.js', + language: 'zh_CN', + onboarding: false, + languageUrl: '/tinymce/langs/zh_CN.js', plugins: customConfig.plugins || [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', diff --git a/src/components/TinyMCEEditor/SimpleImagePasteEditor.tsx b/src/components/TinyMCEEditor/SimpleImagePasteEditor.tsx index 6ac5461..bb2001a 100644 --- a/src/components/TinyMCEEditor/SimpleImagePasteEditor.tsx +++ b/src/components/TinyMCEEditor/SimpleImagePasteEditor.tsx @@ -111,13 +111,13 @@ const SimpleImagePasteEditor: React.FC = ({ e.content = wordPasteProcessor(e.content); if (!enableImagePaste) return; // 检查并移除本地图片链接 - const localImgRegex = /]*(src|data-image-src)=["']file:\/\/\/[^"']+["'][^>]*>/gi; - if (localImgRegex.test(e.content)) { - e.content = e.content.replace(localImgRegex, ''); - setTimeout(() => { - message.warning('检测到本地图片链接，网页无法读取本地图片。请直接复制图片文件或截图粘贴。'); - }, 0); - } + // const localImgRegex = /]*(src|data-image-src)=["']file:\/\/\/[^"']+["'][^>]*>/gi; + // if (localImgRegex.test(e.content)) { + // e.content = e.content.replace(localImgRegex, ''); + // setTimeout(() => { + // message.warning('检测到本地图片链接，网页无法读取本地图片。请直接复制图片文件或截图粘贴。'); + // }, 0); + // } // 检查base64图片并上传（原有逻辑） const imgRegex = /]*src="data:image\/[^"]*"[^>]*>/gi; const hasDataImages = imgRegex.test(e.content); diff --git a/src/components/TinyMCEEditor/config.ts b/src/components/TinyMCEEditor/config.ts index 0b8a705..617e863 100644 --- a/src/components/TinyMCEEditor/config.ts +++ b/src/components/TinyMCEEditor/config.ts @@ -52,7 +52,7 @@ export const defaultConfig: TinyMCEConfig = { plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', - 'insertdatetime', 'media', 'table', 'help', 'wordcount', 'pastefromword', 'powerpaste' + 'insertdatetime', 'media', 'table', 'help', 'wordcount', 'pastefromword' ], toolbar: 'undo redo | formatselect | ' + 'bold italic backcolor | alignleft aligncenter ' + @@ -104,7 +104,7 @@ export const fullConfig: TinyMCEConfig = { plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', - 'insertdatetime', 'media', 'table', 'help', 'wordcount', 'pastefromword', 'powerpaste', + 'insertdatetime', 'media', 'table', 'help', 'wordcount', 'pastefromword', 'codesample', 'emoticons', 'template', 'paste', 'textcolor', 'colorpicker' ], toolbar: 'undo redo | formatselect | bold italic underline strikethrough | ' + @@ -112,7 +112,7 @@ export const fullConfig: TinyMCEConfig = { 'bullist numlist outdent indent | link image media table | ' + 'removeformat | fullscreen preview | help', menubar: 'file edit view insert format tools table help', - branding: true, + // branding: true, elementpath: true, statusbar: true, resize: true, diff --git a/src/components/TinyMCEEditor/usage-example.tsx b/src/components/TinyMCEEditor/usage-example.tsx index 7ddcf00..a6181cc 100644 --- a/src/components/TinyMCEEditor/usage-example.tsx +++ b/src/components/TinyMCEEditor/usage-example.tsx @@ -75,7 +75,7 @@ export const AdvancedUsageExample: React.FC = () => { value={content} onChange={setContent} height={500} - placeholder="支持更多功能的编辑器..." + placeholder="请输入内容" customConfig={fullConfig} /> diff --git a/src/components/WangEditor/index.tsx b/src/components/WangEditor/index.tsx index f44c32a..754c97e 100644 --- a/src/components/WangEditor/index.tsx +++ b/src/components/WangEditor/index.tsx @@ -3,7 +3,7 @@ import '@wangeditor-next/editor/dist/css/style.css'; // 引入wangEditor样式 import { IDomEditor, IEditorConfig, IToolbarConfig, Boot } from '@wangeditor-next/editor'; import { Editor, Toolbar } from '@wangeditor-next/editor-for-react'; -import wordModule from 'wang-editor-plugin-import-from-word'; +// import wordModule from 'wang-editor-plugin-import-from-word'; interface WangEditorProps { value?: string; @@ -22,33 +22,28 @@ const WangEditor: React.FC = ({ value, onChange }) => { }, [value]); // 工具栏配置 - const toolbarConfig: Partial = { - insertKeys: { - index: 0, // 自定义插入的位置 - keys: ['importFromWord'], // “从Word导入”菜单 - }, - }; + const toolbarConfig: Partial = {}; // 编辑器配置 const editorConfig: Partial = { placeholder: '请输入内容...', MENU_CONF: { //@ts-ignore - importFromWord: { - server: process.env.BASE_URL + '/oss/imgUpload', //一个文件地址 - timeout: 5 * 1000, // 5s + // importFromWord: { + // server: process.env.BASE_URL + '/oss/imgUpload', //一个文件地址 + // timeout: 5 * 1000, // 5s - fieldName: 'file', - headers: { Accept: 'text/x-json' }, - maxFileSize: 20 * 1024 * 1024, // 10M - maxNumberOfFiles: 1, - } + // fieldName: 'file', + // headers: { Accept: 'text/x-json' }, + // maxFileSize: 20 * 1024 * 1024, // 10M + // maxNumberOfFiles: 1, + // } } }; // 组件卸载时销毁editor实例 useEffect(() => { - Boot.registerModule(wordModule); + // Boot.registerModule(wordModule); return () => { if (editor == null) return; editor.destroy(); diff --git a/src/pages/ContentList/components/UpdateForm.tsx b/src/pages/ContentList/components/UpdateForm.tsx index def43be..f60ba70 100644 --- a/src/pages/ContentList/components/UpdateForm.tsx +++ b/src/pages/ContentList/components/UpdateForm.tsx @@ -4,7 +4,7 @@ import { Alert, Form, message, Progress } from 'antd'; import { Editor } from '@/components/Editor'; import TinyMCEEditor from '@/components/TinyMCEEditor'; import AdvancedEditor from '@/components/TinyMCEEditor/AdvancedEditor'; -import { fullConfig } from '@/components/TinyMCEEditor/config'; +import { fullConfig, simpleConfig } from '@/components/TinyMCEEditor/config'; import SimpleImagePasteEditor from '@/components/TinyMCEEditor/SimpleImagePasteEditor'; export type FormValueType = { target?: string; @@ -112,13 +112,10 @@ const UpdateForm: React.FC = (props) => { }, ]} > - diff --git a/src/pages/FashionTrend/components/UpdateForm.tsx b/src/pages/FashionTrend/components/UpdateForm.tsx index e498c30..9b540fa 100644 --- a/src/pages/FashionTrend/components/UpdateForm.tsx +++ b/src/pages/FashionTrend/components/UpdateForm.tsx @@ -2,7 +2,8 @@ import React, { useEffect, useRef, useState } from 'react'; import { DrawerForm, ProFormInstance, ProFormText, ProFormUploadButton, ProFormRadio, ProForm } from '@ant-design/pro-components'; import { message } from 'antd'; import Upload, { RcFile } from 'antd/es/upload'; -import WangEditor from '@/components/WangEditor'; +import AdvancedEditor from '@/components/TinyMCEEditor/AdvancedEditor'; +import { fullConfig } from '@/components/TinyMCEEditor/config'; export type FormValueType = { target?: string; @@ -348,7 +349,11 @@ const UpdateForm: React.FC = (props) => { }, ]} > - + :null} ); diff --git a/src/pages/InnovativeService/components/UpdateForm.tsx b/src/pages/InnovativeService/components/UpdateForm.tsx index 6e951fc..527c606 100644 --- a/src/pages/InnovativeService/components/UpdateForm.tsx +++ b/src/pages/InnovativeService/components/UpdateForm.tsx @@ -3,6 +3,8 @@ import { DrawerForm, ProFormInstance, ProFormText, ProFormUploadButton, ProFormR import { message } from 'antd'; import Upload, { RcFile } from 'antd/es/upload'; import { Editor } from '@/components/Editor'; +import { fullConfig } from '@/components/TinyMCEEditor/config'; +import AdvancedEditor from '@/components/TinyMCEEditor/AdvancedEditor'; export type FormValueType = { target?: string; @@ -349,7 +351,11 @@ const UpdateForm: React.FC = (props) => { }, ]} > - + : null} ); diff --git a/src/pages/OperatingInstructions/components/OperateInstructionForm.tsx b/src/pages/OperatingInstructions/components/OperateInstructionForm.tsx index f4f653c..0e81137 100644 --- a/src/pages/OperatingInstructions/components/OperateInstructionForm.tsx +++ b/src/pages/OperatingInstructions/components/OperateInstructionForm.tsx @@ -1,4 +1,6 @@ import { Editor } from '@/components/Editor'; +import AdvancedEditor from '@/components/TinyMCEEditor/AdvancedEditor'; +import { fullConfig } from '@/components/TinyMCEEditor/config'; import { DrawerForm, ProForm, ProFormText } from '@ant-design/pro-components'; import React from 'react'; @@ -39,7 +41,11 @@ const OperateInstructionForm: React.FC = (props) => }, ]} > - + );