Skip to content

C
center-book
提交 ee43c2c1 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

refactor(admin): extract editor shell config

上级 964ca990
显示空白字符变更
内嵌 并排
正在显示 包含 44 行增加 和 159 行删除
apps/admin/src/common/wangeditor-customer/shell/WangEditorCustomer.jsx
浏览文件 @ ee43c2c1
......@@ -15,7 +15,6 @@ import { editorFeatureRegistry } from "../features";
import { DomEditor, SlateTransforms } from "@wangeditor/editor";
import { Editor } from "@wangeditor/editor-for-react";
import { fontFamilyList, lineHeightList } from "../utils/setting";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import timesave from "@/assets/images/timesave.png";
......@@ -29,7 +28,7 @@ import { EditorHeader } from './EditorHeader'
import { EditorSidebar } from './EditorSidebar'
import { useEditorLifecycle } from './useEditorLifecycle'
import { useToolbarPresentation } from './useToolbarPresentation'
import { useEditorFeatureEvents } from '../core/useEditorFeatureEvents'
import { createEditorConfig, defaultEditorContent, toolbarConfig } from './editor-config'
import "../index.less";
......@@ -70,163 +69,13 @@ const WangEditorCustomer = (props, ref) => {
};
});
// 工具栏配置
const toolbarConfig = {
toolbarKeys: [
"redo",
"undo",
"|",
"fontFamily",
"fontSize",
"lineHeight",
"color",
"bold",
"italic",
"through",
"underline",
"bgColor",
"bulletedList",
"numberedList",
"indent",
"delIndent",
"sub",
"sup",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyJustify",
"divider",
"|",
"ImageAuto",
"AIImage",
// 'ImageAutoOnline',
"GalleryAuto",
// 'GalleryAutoOnline',
"VideoAuto",
"AIVideo",
"AudioAuto",
"insertTable",
"Icon",
"|",
"codeBlock", // 代码块
"blockquote", // 引用
"CustomerLink",
"FormulaAuto",
"ChapterTitle",
"ChapterItem",
"Practice",
"TooltipAuto",
"ExpandRead",
"RemoveSpaces",
"ConvertTooltipType",
"|",
"AIRewrite",
"AIExpand",
"AISummary",
"AIPolishing",
"AIPunctuation",
"AIContentInspect",
"|",
"AIQuestionSingle",
"AIQuestionMultiple",
"AIQuestionJudge",
"AIQuestionGapFill",
"AIQuestionOpenEnded",
"|",
"AIDigitalHuman",
"AITranslate",
"AISearch",
// 'AIWrite',
// 'AIBaiduSearch',
],
};
const jsonContent = [
{
type: "paragraph",
lineHeight: "1.5",
children: [{ text: "", fontFamily: "黑体", fontSize: "18px" }],
},
];
// 编辑器配置
let editorConfig = {
placeholder: "请输入内容...",
hoverbarKeys: {
text: {
menuKeys: [
"CustomerLink",
"bulletedList",
"numberedList",
"|",
"bold",
"italic",
"through",
"underline",
"sub",
"sup",
"|",
"color",
"bgColor",
"clearStyle",
"AIChat",
],
},
image: {
menuKeys: ["imageWidth30", "imageWidth50", "imageWidth100", "ImageEditor", "deleteImage"],
},
ImageAuto: {
menuKeys: [
"imageWidthChpater100",
"imageWidthChpater50",
"imageWidthChpater30",
"convertToLinkCard",
],
},
const editorConfig = createEditorConfig({
onFocus: () => clearTimeout(saveRef.current),
onContentChange: editor => {
setHtml(editor.getHtml())
setContent(editor.getHtml())
},
MENU_CONF: {
fontSize: {
fontSizeList: [
{ name: "初号", value: "56px" },
{ name: "小初", value: "48px" },
{ name: "一号", value: "34px" },
{ name: "小一", value: "32px" },
{ name: "二号", value: "29px" },
{ name: "小二", value: "24px" },
{ name: "三号", value: "21px" },
{ name: "小三", value: "20px" },
{ name: "四号", value: "18px" },
{ name: "小四", value: "16px" },
{ name: "五号", value: "14px" },
{ name: "小五", value: "12px" },
{ name: "六号", value: "10px" },
{ name: "小六", value: "8px" },
{ name: "七号", value: "7px" },
{ name: "八号", value: "6px" },
],
},
fontFamily: { fontFamilyList },
lineHeight: { lineHeightList },
},
};
editorConfig.onFocus = () => {
clearTimeout(saveRef.current);
};
editorConfig.onBlur = (editor) => {
// 失焦保存
setHtml(editor.getHtml());
setContent(editor.getHtml());
};
editorConfig.onChange = (editor) => {
setHtml(editor.getHtml());
setContent(editor.getHtml());
};
const featureRuntime = {
}
useEditorFeatureEvents({ editor, registry: editorFeatureRegistry, runtime: featureRuntime })
})
// 及时销毁 editor ，重要！
useEffect(() => {
......@@ -301,7 +150,7 @@ const WangEditorCustomer = (props, ref) => {
<Divider style={{ margin: 0 }} />
<Editor
defaultConfig={editorConfig}
defaultContent={jsonContent}
defaultContent={defaultEditorContent}
value={content}
onCreated={setEditor}
mode="default"
......
apps/admin/src/common/wangeditor-customer/shell/editor-config.js 0 → 100644
浏览文件 @ ee43c2c1
import { fontFamilyList, lineHeightList } from '../utils/setting'
export const toolbarConfig = {
toolbarKeys: [
'redo', 'undo', '|', 'fontFamily', 'fontSize', 'lineHeight', 'color', 'bold', 'italic', 'through', 'underline', 'bgColor', 'bulletedList', 'numberedList', 'indent', 'delIndent', 'sub', 'sup', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyJustify', 'divider', '|',
'ImageAuto', 'AIImage', 'GalleryAuto', 'VideoAuto', 'AIVideo', 'AudioAuto', 'insertTable', 'Icon', '|',
'codeBlock', 'blockquote', 'CustomerLink', 'FormulaAuto', 'ChapterTitle', 'ChapterItem', 'Practice', 'TooltipAuto', 'ExpandRead', 'RemoveSpaces', 'ConvertTooltipType', '|',
'AIRewrite', 'AIExpand', 'AISummary', 'AIPolishing', 'AIPunctuation', 'AIContentInspect', '|',
'AIQuestionSingle', 'AIQuestionMultiple', 'AIQuestionJudge', 'AIQuestionGapFill', 'AIQuestionOpenEnded', '|', 'AIDigitalHuman', 'AITranslate', 'AISearch',
],
}
export const defaultEditorContent = [{
type: 'paragraph',
lineHeight: '1.5',
children: [{ text: '', fontFamily: '黑体', fontSize: '18px' }],
}]
export const createEditorConfig = ({ onFocus, onContentChange }) => ({
placeholder: '请输入内容...',
hoverbarKeys: {
text: { menuKeys: ['CustomerLink', 'bulletedList', 'numberedList', '|', 'bold', 'italic', 'through', 'underline', 'sub', 'sup', '|', 'color', 'bgColor', 'clearStyle', 'AIChat'] },
image: { menuKeys: ['imageWidth30', 'imageWidth50', 'imageWidth100', 'ImageEditor', 'deleteImage'] },
ImageAuto: { menuKeys: ['imageWidthChpater100', 'imageWidthChpater50', 'imageWidthChpater30', 'convertToLinkCard'] },
},
MENU_CONF: {
fontSize: { fontSizeList: [
{ name: '初号', value: '56px' }, { name: '小初', value: '48px' }, { name: '一号', value: '34px' }, { name: '小一', value: '32px' }, { name: '二号', value: '29px' }, { name: '小二', value: '24px' }, { name: '三号', value: '21px' }, { name: '小三', value: '20px' }, { name: '四号', value: '18px' }, { name: '小四', value: '16px' }, { name: '五号', value: '14px' }, { name: '小五', value: '12px' }, { name: '六号', value: '10px' }, { name: '小六', value: '8px' }, { name: '七号', value: '7px' }, { name: '八号', value: '6px' },
] },
fontFamily: { fontFamilyList },
lineHeight: { lineHeightList },
},
onFocus,
onBlur: onContentChange,
onChange: onContentChange,
})
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论