dev-v2
Joe 3 months ago
parent 64ef2e6dae
commit 241983f819

@ -147,8 +147,9 @@ const AdvancedEditor: React.FC<AdvancedEditorProps> = ({
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',

@ -111,13 +111,13 @@ const SimpleImagePasteEditor: React.FC<SimpleImagePasteEditorProps> = ({
e.content = wordPasteProcessor(e.content);
if (!enableImagePaste) return;
// 检查并移除本地图片链接
const localImgRegex = /<img[^>]*(src|data-image-src)=["']file:\/\/\/[^"']+["'][^>]*>/gi;
if (localImgRegex.test(e.content)) {
e.content = e.content.replace(localImgRegex, '');
setTimeout(() => {
message.warning('检测到本地图片链接,网页无法读取本地图片。请直接复制图片文件或截图粘贴。');
}, 0);
}
// const localImgRegex = /<img[^>]*(src|data-image-src)=["']file:\/\/\/[^"']+["'][^>]*>/gi;
// if (localImgRegex.test(e.content)) {
// e.content = e.content.replace(localImgRegex, '');
// setTimeout(() => {
// message.warning('检测到本地图片链接,网页无法读取本地图片。请直接复制图片文件或截图粘贴。');
// }, 0);
// }
// 检查base64图片并上传原有逻辑
const imgRegex = /<img[^>]*src="data:image\/[^"]*"[^>]*>/gi;
const hasDataImages = imgRegex.test(e.content);

@ -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,

@ -75,7 +75,7 @@ export const AdvancedUsageExample: React.FC = () => {
value={content}
onChange={setContent}
height={500}
placeholder="支持更多功能的编辑器..."
placeholder="请输入内容"
customConfig={fullConfig}
/>
</Card>

@ -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<WangEditorProps> = ({ value, onChange }) => {
}, [value]);
// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
insertKeys: {
index: 0, // 自定义插入的位置
keys: ['importFromWord'], // “从Word导入”菜单
},
};
const toolbarConfig: Partial<IToolbarConfig> = {};
// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
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();

@ -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<UpdateFormProps> = (props) => {
},
]}
>
<SimpleImagePasteEditor
height={400}
placeholder="请在此粘贴带图片的内容,图片会自动上传..."
enableImagePaste={true}
onImageUploadProgress={handleImageUploadProgress}
onImageUploadComplete={handleImageUploadComplete}
onImageUploadError={handleImageUploadError}
<AdvancedEditor
height={500}
placeholder="请输入内容"
customConfig={fullConfig}
/>
</Form.Item>
</DrawerForm>

@ -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<UpdateFormProps> = (props) => {
},
]}
>
<WangEditor />
<AdvancedEditor
height={500}
placeholder="请输入内容"
customConfig={fullConfig}
/>
</ProForm.Item>:null}
</DrawerForm>
);

@ -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<UpdateFormProps> = (props) => {
},
]}
>
<Editor />
<AdvancedEditor
height={500}
placeholder="请输入内容"
customConfig={fullConfig}
/>
</ProForm.Item> : null}
</DrawerForm>
);

@ -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<OperateInstructionFormProps> = (props) =>
},
]}
>
<Editor />
<AdvancedEditor
height={500}
placeholder="请输入内容"
customConfig={fullConfig}
/>
</ProForm.Item>
</DrawerForm>
);

Loading…
Cancel
Save