Skip to content

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

chore: update

上级 9ee0bb8c
隐藏空白字符变更
内嵌 并排
正在显示 包含 802 行增加 和 660 行删除
package-lock.json
浏览文件 @ 536c8778
......@@ -17,6 +17,7 @@
"ali-oss": "^6.20.0",
"antd": "^5.18.0",
"axios": "^1.6.2",
"blueimp-md5": "^2.19.0",
"dayjs": "^1.11.11",
"easy-formula-editor": "^0.0.2-alpha.1",
"echarts": "^5.4.3",
......@@ -273,6 +274,76 @@
"integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
"dev": true
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
"@jridgewell/trace-mapping": "^0.3.24"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/resolve-uri": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"optional": true,
"peer": true,
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/set-array": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"dev": true,
"optional": true,
"peer": true,
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/source-map": {
"version": "0.3.6",
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
"dev": true,
"optional": true,
"peer": true
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
......@@ -1369,6 +1440,11 @@
"integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
"dev": true
},
"node_modules/blueimp-md5": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
},
"node_modules/bowser": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
......@@ -1396,6 +1472,14 @@
"node": ">=8"
}
},
"node_modules/buffer-from": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
"dev": true,
"optional": true,
"peer": true
},
"node_modules/builtin-status-codes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
......@@ -6101,6 +6185,18 @@
"node": ">=0.10.0"
}
},
"node_modules/source-map-support": {
"version": "0.5.21",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"buffer-from": "^1.0.0",
"source-map": "^0.6.0"
}
},
"node_modules/ssr-window": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz",
......@@ -6296,6 +6392,34 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/terser": {
"version": "5.31.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.31.1.tgz",
"integrity": "sha512-37upzU1+viGvuFtBo9NPufCb9dwM0+l9hMxYyWfBA+fbwrPqNJAhbZ6W47bBFnZHKHTUBnMvi87434qq+qnxOg==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@jridgewell/source-map": "^0.3.3",
"acorn": "^8.8.2",
"commander": "^2.20.0",
"source-map-support": "~0.5.20"
},
"bin": {
"terser": "bin/terser"
},
"engines": {
"node": ">=10"
}
},
"node_modules/terser/node_modules/commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true,
"optional": true,
"peer": true
},
"node_modules/text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
......
package.json
浏览文件 @ 536c8778
......@@ -28,6 +28,7 @@
"ali-oss": "^6.20.0",
"antd": "^5.18.0",
"axios": "^1.6.2",
"blueimp-md5": "^2.19.0",
"dayjs": "^1.11.11",
"easy-formula-editor": "^0.0.2-alpha.1",
"echarts": "^5.4.3",
......
src/common/wangeditor-customer/index.jsx
浏览文件 @ 536c8778
import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { Input, Spin, message, Button, Divider, Space, Modal, Row, Drawer } from 'antd';
import { EyeOutlined, SaveOutlined, CloseOutlined, HistoryOutlined } from '@ant-design/icons';
import AliOSS from 'ali-oss';
import dayjs from 'dayjs';
import './utils/iconfont';
import { useSelector, useDispatch } from 'react-redux';
import { setPracticeRandom } from '@/store/modules/editor';
import formulaEditor from 'easy-formula-editor';
import './utils/jax.less';
import { Boot } from '@wangeditor/editor';
import { SlateEditor, DomEditor, SlateElement, SlateTransforms } from '@wangeditor/editor';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { fontFamilyList } from './utils/setting';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import timesave from '@/assets/images/timesave.png';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
import { storageChange } from '@/utils/storage.js';
import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react'
import { Input, Spin, message, Button, Divider, Space, Modal, Row, Drawer } from 'antd'
import { EyeOutlined, SaveOutlined, CloseOutlined, HistoryOutlined } from '@ant-design/icons'
import AliOSS from 'ali-oss'
import dayjs from 'dayjs'
import './utils/iconfont'
import { useSelector, useDispatch } from 'react-redux'
import { setPracticeRandom } from '@/store/modules/editor'
import formulaEditor from 'easy-formula-editor'
import './utils/jax.less'
import { Boot } from '@wangeditor/editor'
import { SlateEditor, DomEditor, SlateElement, SlateTransforms } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { fontFamilyList } from './utils/setting'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import timesave from '@/assets/images/timesave.png'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)
import { storageChange } from '@/utils/storage.js'
// import PaddingSpace from './customer/padding';
import GalleryAutoConf from './customer/Gallery';
import VideoAutoConf from './customer/Video';
import AudioAutoConf from './customer/Audio';
import ChapterTitleAutoConf from './customer/ChapterTitle';
import ChapterItemAutoConf from './customer/ChapterItem';
import PracticeAutoConf from './customer/Practice';
import FormulaAutoConf from './customer/Formula';
import TooltipAutoConf from './customer/Tooltip';
import ImageEditorConf from './customer/ImageEditor';
import CustomerLinkConf from './customer/CustomerLink';
import ExpandReadConf from './customer/ExpandRead';
import PolishingConf from './ai/Polishing';
import ExpandArticleConf from './ai/ExpandArticle';
import RewriteConf from './ai/Rewrite';
import SummaryConf from './ai/Summary';
import AISelectTextRef from './ai/AI';
import ImageModal from './components/image';
import VideoModal from './components/video';
import GalleryModal from './components/gallery';
import AudioModal from './components/audio';
import ChapterTitleModal from './components/chapter-title';
import ChapterItemModal from './components/chapter-item';
import PracticeModal from './components/practice';
import FormulaModal from './components/formula';
import TooltipModal from './components/tooltip';
import LinkModal from './components/link';
import ExpandModal from './components/expand';
import AIDrawerComponent from './ai-drawer/index';
import AIWrite from './components/aiWrite';
import chapterSectionModule from './node/chapterItem';
import chapterHeaderModule from './node/chapterTitle';
import chapterImageModule from './node/image';
import chapterVideoModule from './node/video';
import chapterAudioModule from './node/audio';
import chapterGalleryModule from './node/gallery';
import chapterGalleryInlineModule from './node/galleryInline';
import chapterPracticeModule from './node/practice';
import formulaModule from './node/formula';
import tooltipModule from './node/tooltip';
import linkModule from './node/link';
import expandRead from './node/expandRead';
import expandReadSimple from './node/expandReadItem';
import PracticeSettingModal from './practice/index';
import PreviewModal from './components/preview';
import HistoryModal from './history/';
import $ from 'jquery';
import { getInfoByChapterId } from '@/pages/books/section/request';
import { getAliOSSSTSToken, getRecordInfo } from './utils/request';
import './index.less';
import GalleryAutoConf from './customer/Gallery'
import VideoAutoConf from './customer/Video'
import AudioAutoConf from './customer/Audio'
import ChapterTitleAutoConf from './customer/ChapterTitle'
import ChapterItemAutoConf from './customer/ChapterItem'
import PracticeAutoConf from './customer/Practice'
import FormulaAutoConf from './customer/Formula'
import TooltipAutoConf from './customer/Tooltip'
import ImageEditorConf from './customer/ImageEditor'
import CustomerLinkConf from './customer/CustomerLink'
import ExpandReadConf from './customer/ExpandRead'
import PolishingConf from './ai/Polishing'
import ExpandArticleConf from './ai/ExpandArticle'
import RewriteConf from './ai/Rewrite'
import SummaryConf from './ai/Summary'
import AISelectTextRef from './ai/AI'
import ImageModal from './components/image'
import VideoModal from './components/video'
import GalleryModal from './components/gallery'
import AudioModal from './components/audio'
import ChapterTitleModal from './components/chapter-title'
import ChapterItemModal from './components/chapter-item'
import PracticeModal from './components/practice'
import FormulaModal from './components/formula'
import TooltipModal from './components/tooltip'
import LinkModal from './components/link'
import ExpandModal from './components/expand'
import AIDrawerComponent from './ai-drawer/index'
import AIWrite from './components/aiWrite'
import chapterSectionModule from './node/chapterItem'
import chapterHeaderModule from './node/chapterTitle'
import chapterImageModule from './node/image'
import chapterVideoModule from './node/video'
import chapterAudioModule from './node/audio'
import chapterGalleryModule from './node/gallery'
import chapterGalleryInlineModule from './node/galleryInline'
import chapterPracticeModule from './node/practice'
import formulaModule from './node/formula'
import tooltipModule from './node/tooltip'
import linkModule from './node/link'
import expandRead from './node/expandRead'
import expandReadSimple from './node/expandReadItem'
import PracticeSettingModal from './practice/index'
import PreviewModal from './components/preview'
import HistoryModal from './history/'
import $ from 'jquery'
import { getInfoByChapterId } from '@/pages/books/section/request'
import { getAliOSSSTSToken, getRecordInfo } from './utils/request'
import './index.less'
const jsonContent = [
{
type: 'paragraph',
lineHeight: '1.5',
children: [{ text: '', fontFamily: '黑体', fontSize: '16px' }],
},
];
const menuArr0 = ['重做', '撤销'];
const menuArr1 = ['字体样式', '字号', '行高'];
const menuArr2 = ['图片', '画廊', '视频', '音频', '表格'];
const menuArr3 = ['代码块', '引用', '链接', '公式', '章头', '节头', '交互练习', '气泡', '扩展阅读'];
const menuArr4 = ['改写', '扩写', '缩写', '总结'];
const colorList = ['#ab1941', '#2970f6', '#2ad882', '#eb3351'];
const bookBucketName = 'zxts-book-file';
children: [{ text: '', fontFamily: '黑体', fontSize: '16px' }]
}
]
const menuArr0 = ['重做', '撤销']
const menuArr1 = ['字体样式', '字号', '行高']
const menuArr2 = ['图片', '画廊', '视频', '音频', '表格']
const menuArr3 = ['代码块', '引用', '链接', '公式', '章头', '节头', '交互练习', '气泡', '扩展阅读']
const menuArr4 = ['改写', '扩写', '缩写', '总结']
const colorList = ['#ab1941', '#2970f6', '#2ad882', '#eb3351']
const bookBucketName = 'zxts-book-file'
const module = {
menus: [
......@@ -113,201 +113,200 @@ const module = {
ExpandArticleConf,
RewriteConf,
SummaryConf,
AISelectTextRef,
],
};
Boot.registerModule(module);
AISelectTextRef
]
}
Boot.registerModule(module)
// 注册节头内容
Boot.registerModule(chapterSectionModule);
Boot.registerModule(chapterSectionModule)
// 注册章头内容
Boot.registerModule(chapterHeaderModule);
Boot.registerModule(chapterHeaderModule)
// 注册图片内容
Boot.registerModule(chapterImageModule);
Boot.registerModule(chapterImageModule)
// 注册视频内容
Boot.registerModule(chapterVideoModule);
Boot.registerModule(chapterVideoModule)
// 注册音频内容
Boot.registerModule(chapterAudioModule);
Boot.registerModule(chapterAudioModule)
// 注册画廊
Boot.registerModule(chapterGalleryModule);
Boot.registerModule(chapterGalleryInlineModule);
Boot.registerModule(chapterGalleryModule)
Boot.registerModule(chapterGalleryInlineModule)
// 注册公式
Boot.registerModule(formulaModule);
Boot.registerModule(formulaModule)
// 注册练习
Boot.registerModule(chapterPracticeModule);
Boot.registerModule(chapterPracticeModule)
// 注册气泡
Boot.registerModule(tooltipModule);
Boot.registerModule(tooltipModule)
// 注册链接
Boot.registerModule(linkModule);
Boot.registerModule(linkModule)
// 注册扩展阅读
Boot.registerModule(expandRead);
Boot.registerModule(expandReadSimple);
Boot.registerModule(expandRead)
Boot.registerModule(expandReadSimple)
const tabsMenu = [
{ key: 'text', title: '文本设置' },
{ key: 'style', title: '样式模版' },
];
{ key: 'style', title: '样式模版' }
]
storageChange();
storageChange()
const WangEditorCustomer = forwardRef((props, ref) => {
const { chapterId, bookId, contentId, html, setHtml, saveContent, gData, nowTitle, recordList } =
props;
const WangEditorCustomer = (props, ref) => {
const { chapterId, bookId, contentId, html, setHtml, saveContent, gData, nowTitle, recordList } = props
const dispatch = useDispatch();
const dispatch = useDispatch()
// 自动保存时间
const { autosaveTime } = useSelector((state) => state.editor);
const { autosaveTime } = useSelector(state => state.editor)
const toolbarRef = useRef();
const paddingSpaceRef = useRef();
const [cId, setCId] = useState(contentId);
const toolbarRef = useRef()
const paddingSpaceRef = useRef()
const [cId, setCId] = useState(contentId)
const [ossClient, setOssClient] = useState(null); // oss 操作
const [STSToken, setSTSToken] = useState(null); // oss 过期设置
const [ossClient, setOssClient] = useState(null) // oss 操作
const [STSToken, setSTSToken] = useState(null) // oss 过期设置
const [tabKey, setTabKey] = useState('text');
const [loading, setLoading] = useState(true);
const [tabKey, setTabKey] = useState('text')
const [loading, setLoading] = useState(true)
// editor 实例
const [editor, setEditor] = useState(null);
const [editorNodes, setEditorNodes] = useState(null);
const [content, setContent] = useState(html);
const saveRef = useRef();
const [selectText, setSelectText] = useState(''); //
const [titleVisible, setTitleVisible] = useState(false); // 章头
const [titleInfo, setTitleInfo] = useState({});
const [sectionVisible, setSectionVisible] = useState(false);
const [sectionInfo, setSectionInfo] = useState({}); // 节头
const [practiceOpenVisible, setPracticeOpenVisible] = useState(false); // 练习
const [practiceVisible, setPracticeVisible] = useState(false); // 练习答题设置
const [galleryVisible, setGalleryVisible] = useState(false); // 画廊
const [galleryInfo, setGalleryInfo] = useState({});
const [imageVisible, setImageVisible] = useState(false); // 插入图片
const [imageInfo, setImageInfo] = useState({});
const [tooltipVisible, setTooltipVisible] = useState(false); // 气泡框
const [tooltipInfo, setTooltipInfo] = useState({}); // 气泡框
const [linkVisible, setLinkVisible] = useState(false); // 气泡框
const [linkInfo, setLinkInfo] = useState({}); // 气泡框
const [expandVisible, setExpandVisible] = useState(false); // 扩展阅读
const [expandInfo, setExpandInfo] = useState({}); // 扩展阅读内容
const [aiVisible, setAIVisible] = useState(false); // ai对话弹窗
const [priviewVisible, setPriviewVisible] = useState(false);
const [historyVisible, setHistoryVisible] = useState(false); //点击历史
const [delMoadal, setDelModal] = useState(false);
const [selectedRecordName, setSelectedRecordName] = useState('');
const [selectionSize, setSelectionSize] = useState(16); // 当前字号大小
const [editor, setEditor] = useState(null)
const [editorNodes, setEditorNodes] = useState(null)
const [content, setContent] = useState(html)
const saveRef = useRef()
const [selectText, setSelectText] = useState('') //
const [titleVisible, setTitleVisible] = useState(false) // 章头
const [titleInfo, setTitleInfo] = useState({})
const [sectionVisible, setSectionVisible] = useState(false)
const [sectionInfo, setSectionInfo] = useState({}) // 节头
const [practiceOpenVisible, setPracticeOpenVisible] = useState(false) // 练习
const [practiceVisible, setPracticeVisible] = useState(false) // 练习答题设置
const [galleryVisible, setGalleryVisible] = useState(false) // 画廊
const [galleryInfo, setGalleryInfo] = useState({})
const [imageVisible, setImageVisible] = useState(false) // 插入图片
const [imageInfo, setImageInfo] = useState({})
const [tooltipVisible, setTooltipVisible] = useState(false) // 气泡框
const [tooltipInfo, setTooltipInfo] = useState({}) // 气泡框
const [linkVisible, setLinkVisible] = useState(false) // 气泡框
const [linkInfo, setLinkInfo] = useState({}) // 气泡框
const [expandVisible, setExpandVisible] = useState(false) // 扩展阅读
const [expandInfo, setExpandInfo] = useState({}) // 扩展阅读内容
const [aiVisible, setAIVisible] = useState(false) // ai对话弹窗
const [priviewVisible, setPriviewVisible] = useState(false)
const [historyVisible, setHistoryVisible] = useState(false) //点击历史
const [delMoadal, setDelModal] = useState(false)
const [selectedRecordName, setSelectedRecordName] = useState('')
const [selectionSize, setSelectionSize] = useState(16) // 当前字号大小
window.addEventListener('setItemEvent', function (e) {
if (e.key === 'chapterTitleNum') {
setTitleInfo(JSON.parse(e.newValue));
setTitleVisible(true);
setTitleInfo(JSON.parse(e.newValue))
setTitleVisible(true)
setTimeout(() => {
window.localStorage.removeItem('chapterTitleNum');
}, 100);
window.localStorage.removeItem('chapterTitleNum')
}, 100)
} else if (e.key === 'chapterItemNum') {
setSectionInfo(JSON.parse(e.newValue));
setSectionVisible(true);
setSectionInfo(JSON.parse(e.newValue))
setSectionVisible(true)
setTimeout(() => {
window.localStorage.removeItem('chapterItemNum');
}, 100);
window.localStorage.removeItem('chapterItemNum')
}, 100)
} else if (e.key === 'practiceNum') {
const { practiceNum, title, theme } = JSON.parse(e.newValue);
dispatch(setPracticeRandom({ practiceNum, practiceTitle: title, practiceTheme: theme }));
setPracticeVisible(true);
const { practiceNum, title, theme } = JSON.parse(e.newValue)
dispatch(setPracticeRandom({ practiceNum, practiceTitle: title, practiceTheme: theme }))
setPracticeVisible(true)
setTimeout(() => {
window.localStorage.removeItem('practiceNum');
}, 100);
window.localStorage.removeItem('practiceNum')
}, 100)
} else if (e.key === 'galleryNum') {
setGalleryInfo(JSON.parse(e.newValue));
setGalleryVisible(true);
setGalleryInfo(JSON.parse(e.newValue))
setGalleryVisible(true)
setTimeout(() => {
window.localStorage.removeItem('galleryNum');
}, 100);
window.localStorage.removeItem('galleryNum')
}, 100)
} else if (e.key === 'tooltipNum') {
setTooltipInfo(JSON.parse(e.newValue));
setTooltipVisible(true);
setTooltipInfo(JSON.parse(e.newValue))
setTooltipVisible(true)
setTimeout(() => {
window.localStorage.removeItem('tooltipNum');
}, 100);
window.localStorage.removeItem('tooltipNum')
}, 100)
} else if (e.key === 'linkNum') {
setLinkInfo(JSON.parse(e.newValue));
setLinkVisible(true);
setLinkInfo(JSON.parse(e.newValue))
setLinkVisible(true)
setTimeout(() => {
window.localStorage.removeItem('linkNum');
}, 100);
window.localStorage.removeItem('linkNum')
}, 100)
} else if (e.key === 'chapterExpand') {
setExpandInfo(JSON.parse(e.newValue));
setExpandVisible(true);
setExpandInfo(JSON.parse(e.newValue))
setExpandVisible(true)
setTimeout(() => {
window.localStorage.removeItem('chapterExpand');
}, 100);
window.localStorage.removeItem('chapterExpand')
}, 100)
}
});
})
const closePanel = () => {
dispatch(setPracticeRandom({ practiceNum: null, practiceTitle: null }));
setPracticeVisible(false);
};
dispatch(setPracticeRandom({ practiceNum: null, practiceTitle: null }))
setPracticeVisible(false)
}
useImperativeHandle(ref, () => {
return {
editor,
};
});
editor
}
})
const listenNodeStyle = (path) => {
const children = editor.children;
let node = null;
const listenNodeStyle = path => {
const children = editor.children
let node = null
if (path[1] === 0) {
node = children[path[0]];
node = children[path[0]]
if (node.children.length > 0) {
const elem = editor.toDOMNode(node); // 返回 HTMLElement
let fontSize = 18;
const elem = editor.toDOMNode(node) // 返回 HTMLElement
let fontSize = 18
if ($(elem).find("[data-slate-string='true']")) {
fontSize = $(elem).find("[data-slate-string='true']").css('fontSize');
fontSize = $(elem).find("[data-slate-string='true']").css('fontSize')
} else {
const parentNode = editor.getParentNode(node); // 返回 node 或者 null
const elemParent = editor.toDOMNode(parentNode); // 返回 HTMLElement
fontSize = $(elemParent).css('fontSize');
const parentNode = editor.getParentNode(node) // 返回 node 或者 null
const elemParent = editor.toDOMNode(parentNode) // 返回 HTMLElement
fontSize = $(elemParent).css('fontSize')
}
setSelectionSize(parseInt(fontSize));
setSelectionSize(parseInt(fontSize))
} else {
node = children[path[0]].children[0];
node = children[path[0]].children[0]
if (node.fontSize) {
setSelectionSize(parseInt(node.fontSize));
setSelectionSize(parseInt(node.fontSize))
} else {
const elem = editor.toDOMNode(node); // 返回 HTMLElement
let fontSize = 18;
const elem = editor.toDOMNode(node) // 返回 HTMLElement
let fontSize = 18
if ($(elem).find("[data-slate-string='true']")) {
fontSize = $(elem).find("[data-slate-string='true']").css('fontSize');
fontSize = $(elem).find("[data-slate-string='true']").css('fontSize')
} else {
const parentNode = editor.getParentNode(node); // 返回 node 或者 null
const elemParent = editor.toDOMNode(parentNode); // 返回 HTMLElement
fontSize = $(elemParent).css('fontSize');
const parentNode = editor.getParentNode(node) // 返回 node 或者 null
const elemParent = editor.toDOMNode(parentNode) // 返回 HTMLElement
fontSize = $(elemParent).css('fontSize')
}
setSelectionSize(parseInt(fontSize));
setSelectionSize(parseInt(fontSize))
}
}
} else {
node = children[path[0]].children[path[1]];
node = children[path[0]].children[path[1]]
if (node.fontSize) {
setSelectionSize(parseInt(node.fontSize));
setSelectionSize(parseInt(node.fontSize))
} else {
const elem = editor.toDOMNode(node); // 返回 HTMLElement
let fontSize = 18;
const elem = editor.toDOMNode(node) // 返回 HTMLElement
let fontSize = 18
if ($(elem).find("[data-slate-string='true']")) {
fontSize = $(elem).find("[data-slate-string='true']").css('fontSize');
fontSize = $(elem).find("[data-slate-string='true']").css('fontSize')
} else {
const parentNode = editor.getParentNode(node); // 返回 node 或者 null
const elemParent = editor.toDOMNode(parentNode); // 返回 HTMLElement
fontSize = $(elemParent).css('fontSize');
const parentNode = editor.getParentNode(node) // 返回 node 或者 null
const elemParent = editor.toDOMNode(parentNode) // 返回 HTMLElement
fontSize = $(elemParent).css('fontSize')
}
setSelectionSize(parseInt(fontSize));
setSelectionSize(parseInt(fontSize))
}
}
};
}
// 工具栏配置
const toolbarConfig = {
......@@ -355,31 +354,31 @@ const WangEditorCustomer = forwardRef((props, ref) => {
'codeBlock', // 代码块
// 'insertLink', // 链接
// 'insertFormula', // 公式
'blockquote', // 引用
'blockquote' // 引用
// 'code',
// 'clearStyle',
],
};
const imageRef = useRef();
const galleryRef = useRef();
const videoRef = useRef();
const audioRef = useRef();
const formulaRef = useRef();
const tooltipRef = useRef();
const chapterTitleRef = useRef();
const chapterItemRef = useRef();
const practiceRef = useRef();
const practiceSettingRef = useRef();
const previewRef = useRef();
]
}
const imageRef = useRef()
const galleryRef = useRef()
const videoRef = useRef()
const audioRef = useRef()
const formulaRef = useRef()
const tooltipRef = useRef()
const chapterTitleRef = useRef()
const chapterItemRef = useRef()
const practiceRef = useRef()
const practiceSettingRef = useRef()
const previewRef = useRef()
const jsonContent = [
{
type: 'paragraph',
lineHeight: '1.5',
children: [{ text: '', fontFamily: '黑体', fontSize: '18px' }],
},
];
children: [{ text: '', fontFamily: '黑体', fontSize: '18px' }]
}
]
toolbarConfig.insertKeys = {
index: 30,
......@@ -398,9 +397,9 @@ const WangEditorCustomer = forwardRef((props, ref) => {
'RewriteAuto',
'ExpandArticleAuto',
'PolishingAuto',
'SummaryAuto',
],
};
'SummaryAuto'
]
}
// 编辑器配置
let editorConfig = {
......@@ -434,8 +433,8 @@ const WangEditorCustomer = forwardRef((props, ref) => {
'color',
'bgColor',
'clearStyle',
'AISelectTextAuto',
],
'AISelectTextAuto'
]
},
image: {
menuKeys: [
......@@ -444,17 +443,12 @@ const WangEditorCustomer = forwardRef((props, ref) => {
'imageWidth100',
'ImageEditor',
// 'viewImageLink',
'deleteImage',
],
'deleteImage'
]
},
ImageAuto: {
menuKeys: [
'imageWidthChpater100',
'imageWidthChpater50',
'imageWidthChpater30',
'convertToLinkCard',
],
},
menuKeys: ['imageWidthChpater100', 'imageWidthChpater50', 'imageWidthChpater30', 'convertToLinkCard']
}
},
MENU_CONF: {
fontSize: {
......@@ -474,162 +468,162 @@ const WangEditorCustomer = forwardRef((props, ref) => {
{ name: '六号', value: '10px' },
{ name: '小六', value: '8px' },
{ name: '七号', value: '7px' },
{ name: '八号', value: '6px' },
],
{ name: '八号', value: '6px' }
]
},
fontFamily: {
fontFamilyList: fontFamilyList,
fontFamilyList: fontFamilyList
},
lineHeight: {
lineHeightList: ['1', '1.25', '1.5', '2', '2.5', '3'],
},
lineHeightList: ['1', '1.25', '1.5', '2', '2.5', '3']
}
// 其他...
},
};
}
}
// 编辑器按钮重排
const toolSetttingReplace = () => {
setTimeout(() => {
const toolbarElement = toolbarRef.current && toolbarRef.current.children[0].children[0];
const allChildren = toolbarElement.children;
const oHDiv_1 = document.createElement('div');
oHDiv_1.setAttribute('class', 'custom-bar-box two');
toolbarElement.insertBefore(oHDiv_1, allChildren[0]);
$(allChildren[0]).append($(allChildren[1]).detach());
$(allChildren[0]).append($(allChildren[1]).detach());
const oH6_1 = document.createElement('h4');
oH6_1.setAttribute('class', 'w-auto type-heading');
oH6_1.innerHTML = '常用格式';
toolbarElement.insertBefore(oH6_1, allChildren[2]);
const toolbarElement = toolbarRef.current && toolbarRef.current.children[0].children[0]
const allChildren = toolbarElement.children
const oHDiv_1 = document.createElement('div')
oHDiv_1.setAttribute('class', 'custom-bar-box two')
toolbarElement.insertBefore(oHDiv_1, allChildren[0])
$(allChildren[0]).append($(allChildren[1]).detach())
$(allChildren[0]).append($(allChildren[1]).detach())
const oH6_1 = document.createElement('h4')
oH6_1.setAttribute('class', 'w-auto type-heading')
oH6_1.innerHTML = '常用格式'
toolbarElement.insertBefore(oH6_1, allChildren[2])
// 行高字体字号设置
const itemBox = '<div class="custom-bar-box two"></div>';
$(itemBox).insertBefore($(allChildren[3]));
const itemBox = '<div class="custom-bar-box two"></div>'
$(itemBox).insertBefore($(allChildren[3]))
$(allChildren[3]).append($(allChildren[4]).detach());
$(allChildren[3]).append($(allChildren[4]).detach());
$(allChildren[3]).append($(allChildren[4]).detach());
$(allChildren[3]).append($(allChildren[4]).detach())
$(allChildren[3]).append($(allChildren[4]).detach())
$(allChildren[3]).append($(allChildren[4]).detach())
// 加粗之类的
const itemBox2 = '<div class="w-e-bar-boxitem you"></div>';
$(itemBox2).insertBefore($(allChildren[4]));
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
$(allChildren[4]).append($(allChildren[5]).detach());
const itemBox2 = '<div class="w-e-bar-boxitem you"></div>'
$(itemBox2).insertBefore($(allChildren[4]))
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
$(allChildren[4]).append($(allChildren[5]).detach())
// 对齐
const itemBox3 = '<div class="w-e-bar-boxitem you"></div>';
$(itemBox3).insertBefore($(allChildren[5]));
$(allChildren[5]).append($(allChildren[6]).detach());
$(allChildren[5]).append($(allChildren[6]).detach());
$(allChildren[5]).append($(allChildren[6]).detach());
$(allChildren[5]).append($(allChildren[6]).detach());
$(allChildren[5]).append($(allChildren[6]).detach());
const itemBox3 = '<div class="w-e-bar-boxitem you"></div>'
$(itemBox3).insertBefore($(allChildren[5]))
$(allChildren[5]).append($(allChildren[6]).detach())
$(allChildren[5]).append($(allChildren[6]).detach())
$(allChildren[5]).append($(allChildren[6]).detach())
$(allChildren[5]).append($(allChildren[6]).detach())
$(allChildren[5]).append($(allChildren[6]).detach())
// 媒体资源
const oH6_2 = document.createElement('h4');
oH6_2.setAttribute('class', 'w-auto type-heading');
oH6_2.innerHTML = '媒体资源';
toolbarElement.insertBefore(oH6_2, allChildren[7]);
const itemBox4 = document.createElement('div');
itemBox4.setAttribute('class', 'custom-bar-box media');
toolbarElement.insertBefore(itemBox4, allChildren[8]);
$(allChildren[8]).append($(allChildren[13]).detach());
$(allChildren[8]).append($(allChildren[13]).detach());
$(allChildren[8]).append($(allChildren[13]).detach());
$(allChildren[8]).append($(allChildren[13]).detach());
$(allChildren[8]).append($(allChildren[9]).detach());
const oH6_2 = document.createElement('h4')
oH6_2.setAttribute('class', 'w-auto type-heading')
oH6_2.innerHTML = '媒体资源'
toolbarElement.insertBefore(oH6_2, allChildren[7])
const itemBox4 = document.createElement('div')
itemBox4.setAttribute('class', 'custom-bar-box media')
toolbarElement.insertBefore(itemBox4, allChildren[8])
$(allChildren[8]).append($(allChildren[13]).detach())
$(allChildren[8]).append($(allChildren[13]).detach())
$(allChildren[8]).append($(allChildren[13]).detach())
$(allChildren[8]).append($(allChildren[13]).detach())
$(allChildren[8]).append($(allChildren[9]).detach())
// 高级模块
const oH6_3 = document.createElement('h4');
oH6_3.setAttribute('class', 'w-auto type-heading');
oH6_3.innerHTML = '高级模块';
toolbarElement.insertBefore(oH6_3, allChildren[10]);
const itemBox5 = document.createElement('div');
itemBox5.setAttribute('class', 'custom-bar-box hight');
toolbarElement.insertBefore(itemBox5, allChildren[11]);
$(allChildren[11]).append($(allChildren[12]).detach());
$(allChildren[11]).append($(allChildren[12]).detach());
$(allChildren[11]).append($(allChildren[12]).detach());
$(allChildren[11]).append($(allChildren[12]).detach());
$(allChildren[11]).append($(allChildren[12]).detach());
$(allChildren[11]).append($(allChildren[12]).detach());
$(allChildren[11]).append($(allChildren[12]).detach());
$(allChildren[11]).append($(allChildren[12]).detach());
$(allChildren[11]).append($(allChildren[12]).detach());
const oH6_3 = document.createElement('h4')
oH6_3.setAttribute('class', 'w-auto type-heading')
oH6_3.innerHTML = '高级模块'
toolbarElement.insertBefore(oH6_3, allChildren[10])
const itemBox5 = document.createElement('div')
itemBox5.setAttribute('class', 'custom-bar-box hight')
toolbarElement.insertBefore(itemBox5, allChildren[11])
$(allChildren[11]).append($(allChildren[12]).detach())
$(allChildren[11]).append($(allChildren[12]).detach())
$(allChildren[11]).append($(allChildren[12]).detach())
$(allChildren[11]).append($(allChildren[12]).detach())
$(allChildren[11]).append($(allChildren[12]).detach())
$(allChildren[11]).append($(allChildren[12]).detach())
$(allChildren[11]).append($(allChildren[12]).detach())
$(allChildren[11]).append($(allChildren[12]).detach())
$(allChildren[11]).append($(allChildren[12]).detach())
// ai
const dividerline = document.createElement('div');
dividerline.setAttribute('class', 'w-e-bar-divider');
toolbarElement.insertBefore(dividerline, allChildren[12]);
const oH6_4 = document.createElement('h4');
oH6_4.setAttribute('class', 'w-auto type-heading');
oH6_4.innerHTML = 'AI辅助';
toolbarElement.insertBefore(oH6_4, allChildren[13]);
const oHDiv_4 = document.createElement('div');
oHDiv_4.setAttribute('class', 'custom-bar-box hight');
toolbarElement.insertBefore(oHDiv_4, allChildren[14]);
$(allChildren[14]).append($(allChildren[15]).detach());
$(allChildren[14]).append($(allChildren[15]).detach());
$(allChildren[14]).append($(allChildren[15]).detach());
$(allChildren[14]).append($(allChildren[15]).detach());
const dividerline = document.createElement('div')
dividerline.setAttribute('class', 'w-e-bar-divider')
toolbarElement.insertBefore(dividerline, allChildren[12])
const oH6_4 = document.createElement('h4')
oH6_4.setAttribute('class', 'w-auto type-heading')
oH6_4.innerHTML = 'AI辅助'
toolbarElement.insertBefore(oH6_4, allChildren[13])
const oHDiv_4 = document.createElement('div')
oHDiv_4.setAttribute('class', 'custom-bar-box hight')
toolbarElement.insertBefore(oHDiv_4, allChildren[14])
$(allChildren[14]).append($(allChildren[15]).detach())
$(allChildren[14]).append($(allChildren[15]).detach())
$(allChildren[14]).append($(allChildren[15]).detach())
$(allChildren[14]).append($(allChildren[15]).detach())
$('.custom-bar-box').each((index, item) => {
$(item)
.find('.w-e-bar-item')
.each((cIndex, cItem) => {
const oP = document.createElement('p');
const oP = document.createElement('p')
if (index === 0) {
oP.innerHTML = menuArr0[cIndex];
$(oP).insertBefore($(cItem).find('button'));
oP.innerHTML = menuArr0[cIndex]
$(oP).insertBefore($(cItem).find('button'))
} else if (index === 1) {
oP.innerHTML = menuArr1[cIndex];
$(oP).insertBefore($(cItem).find('button'));
oP.innerHTML = menuArr1[cIndex]
$(oP).insertBefore($(cItem).find('button'))
} else if (index === 2) {
oP.innerHTML = menuArr2[cIndex];
oP.innerHTML = menuArr2[cIndex]
// $(cItem).append(oP);
$(cItem).find('button').append(oP);
$(cItem).find('button').append(oP)
} else if (index === 3) {
oP.innerHTML = menuArr3[cIndex];
oP.innerHTML = menuArr3[cIndex]
// $(cItem).append(oP);
$(cItem).find('button').append(oP);
$(cItem).find('button').append(oP)
} else if (index === 4) {
oP.innerHTML = menuArr4[cIndex];
oP.innerHTML = menuArr4[cIndex]
// $(cItem).append(oP);
$(cItem).find('button').append(oP);
$(cItem).find('button').append(oP)
}
});
});
setLoading(false);
}, 350);
};
editorConfig.onCreated = (editor) => {
setLoading(true);
};
editorConfig.onFocus = (editor) => {
clearTimeout(saveRef.current);
};
editorConfig.onBlur = (editor) => {
})
})
setLoading(false)
}, 350)
}
editorConfig.onCreated = editor => {
setLoading(true)
}
editorConfig.onFocus = editor => {
clearTimeout(saveRef.current)
}
editorConfig.onBlur = editor => {
// 失焦保存
setHtml(editor.getHtml());
setContent(editor.getHtml());
};
editorConfig.onChange = (editor) => {
setHtml(editor.getHtml());
setContent(editor.getHtml());
};
setHtml(editor.getHtml())
setContent(editor.getHtml())
}
editorConfig.onChange = editor => {
setHtml(editor.getHtml())
setContent(editor.getHtml())
}
// 及时销毁 editor ，重要！
useEffect(() => {
......@@ -637,198 +631,198 @@ const WangEditorCustomer = forwardRef((props, ref) => {
// console.log(editor.getConfig().hoverbarKeys.image);
// console.log(editor, editorConfig);
toolSetttingReplace();
toolSetttingReplace()
// 图片上传
editor.on('ImageMenuClick', () => {
console.log('ImageMenuClick', '----');
setImageVisible(true);
});
console.log('ImageMenuClick', '----')
setImageVisible(true)
})
// 画廊上传
editor.on('GalleryMenuClick', () => {
if (editor.selection) {
listenNodeStyle(editor.selection.anchor.path);
listenNodeStyle(editor.selection.anchor.path)
}
console.log('GalleryMenuClick', '----');
console.log('GalleryMenuClick', '----')
// galleryRef.current.setVisible(true);
setGalleryVisible(true);
});
setGalleryVisible(true)
})
// 视频上传
editor.on('VideoMenuClick', () => {
console.log('VideoMenuClick', '----');
videoRef.current.setVisible(true);
});
console.log('VideoMenuClick', '----')
videoRef.current.setVisible(true)
})
// 音频上传
editor.on('AudioMenuClick', () => {
console.log('AudioMenuClick', '----');
audioRef.current.setVisible(true);
});
console.log('AudioMenuClick', '----')
audioRef.current.setVisible(true)
})
// 章节
editor.on('ChapterItemMenuClick', () => {
console.log('ChapterItemMenuClick', '----');
setSectionVisible(true);
});
console.log('ChapterItemMenuClick', '----')
setSectionVisible(true)
})
// 章头
editor.on('ChapterTitleClick', () => {
console.log('ChapterTitleClick', '----');
setTitleVisible(true);
});
console.log('ChapterTitleClick', '----')
setTitleVisible(true)
})
// 交互练习
editor.on('PracticeMenuClick', () => {
console.log('PracticeMenuClick', '----');
setPracticeOpenVisible(true);
});
console.log('PracticeMenuClick', '----')
setPracticeOpenVisible(true)
})
// 公式
editor.on('FormulaMenuClick', () => {
console.log('FormulaMenuClick', '----');
formulaRef.current.setVisible(true);
});
console.log('FormulaMenuClick', '----')
formulaRef.current.setVisible(true)
})
// 插入图片
editor.on('ImageEditorClick', () => {
console.log('ImageEditorClick', '----');
console.log('ImageEditorClick', '----')
const nodeEntries = SlateEditor.nodes(editor, {
match: (node) => {
match: node => {
// JS syntax
if (SlateElement.isElement(node)) {
if (node.type === 'paragraph') {
return true; // 匹配 paragraph
return true // 匹配 paragraph
}
}
return false;
return false
},
universal: true,
});
universal: true
})
let info = {};
let info = {}
for (let nodeEntry of nodeEntries) {
const [node, path] = nodeEntry;
const [node, path] = nodeEntry
// console.log('选中了 paragraph 节点', node)
// console.log('节点 path 是', path)
node.children.forEach((item, index) => {
if (item.type === 'image') {
info.image = item;
info.image = item
}
});
info.node = node;
info.path = path;
})
info.node = node
info.path = path
}
setImageInfo(info);
setImageVisible(true);
});
setImageInfo(info)
setImageVisible(true)
})
// 气泡
editor.on('TooltipMenuClick', () => {
if (editor.selection) {
listenNodeStyle(editor.selection.anchor.path);
listenNodeStyle(editor.selection.anchor.path)
}
setTooltipVisible(true);
});
setTooltipVisible(true)
})
// 链接
editor.on('CustomerLinkClick', () => {
if (editor.selection) {
listenNodeStyle(editor.selection.anchor.path);
listenNodeStyle(editor.selection.anchor.path)
}
setLinkVisible(true);
});
setLinkVisible(true)
})
// 扩展
editor.on('ExpandReadClick', () => {
if (editor.selection) {
listenNodeStyle(editor.selection.anchor.path);
listenNodeStyle(editor.selection.anchor.path)
}
setExpandVisible(true);
});
setExpandVisible(true)
})
// 改写
editor.on('RewriteMenuClick', () => {
if (editor.selection) {
listenNodeStyle(editor.selection.anchor.path);
listenNodeStyle(editor.selection.anchor.path)
}
setAiWriteOpen(true);
setAiWriteAction('rewrite');
});
setAiWriteOpen(true)
setAiWriteAction('rewrite')
})
// 扩写
editor.on('ExpandArticleMenuClick', () => {
if (editor.selection) {
listenNodeStyle(editor.selection.anchor.path);
listenNodeStyle(editor.selection.anchor.path)
}
setAiWriteOpen(true);
setAiWriteAction('expand');
});
setAiWriteOpen(true)
setAiWriteAction('expand')
})
// 缩写
editor.on('PolishingMenuClick', () => {
if (editor.selection) {
listenNodeStyle(editor.selection.anchor.path);
listenNodeStyle(editor.selection.anchor.path)
}
setAiWriteOpen(true);
setAiWriteAction('abbreviate');
});
setAiWriteOpen(true)
setAiWriteAction('abbreviate')
})
// 总结
editor.on('SummaryMenuClick', () => {
if (editor.selection) {
listenNodeStyle(editor.selection.anchor.path);
listenNodeStyle(editor.selection.anchor.path)
}
setAiWriteOpen(true);
setAiWriteAction('summary');
});
setAiWriteOpen(true)
setAiWriteAction('summary')
})
// ai对话
editor.on('AISelectTextClick', () => {
setSelectText(editor.getSelectionText());
setAIVisible(true);
});
const oldHtml = editor.getHtml();
setSelectText(editor.getSelectionText())
setAIVisible(true)
})
const oldHtml = editor.getHtml()
editor.addMark('fontSize', '18px');
editor.addMark('fontFamily', '黑体');
editor.addMark('lineHeight', 1.5);
setContent(html);
editor.addMark('fontSize', '18px')
editor.addMark('fontFamily', '黑体')
editor.addMark('lineHeight', 1.5)
setContent(html)
if (gData.length > 0) {
editor.enable();
editor.focus();
editor.enable()
editor.focus()
} else {
editor.disable();
editor.disable()
}
}
return () => {
if (editor === null) return;
editor.destroy();
setEditor(null);
};
}, [editor]);
if (editor === null) return
editor.destroy()
setEditor(null)
}
}, [editor])
useEffect(() => {
if (editor) {
if (gData.length > 0) {
editor.enable();
editor.enable()
} else {
editor.disable();
editor.disable()
}
}
}, [gData, editor]);
}, [gData, editor])
const tabKeyChange = (key) => {
const tabKeyChange = key => {
if (key === 'text') {
toolSetttingReplace();
toolSetttingReplace()
}
setTabKey(key);
editor.focus();
};
setTabKey(key)
editor.focus()
}
// 预览
const previewIt = async () => {
await saveContent();
setPriviewVisible(true);
};
await saveContent()
setPriviewVisible(true)
}
// 历史
const historyIt = async () => {
setHistoryVisible(true);
};
setHistoryVisible(true)
}
const getStsAuthToken = async () => {
const data = await getAliOSSSTSToken();
const data = await getAliOSSSTSToken()
if (data) {
window.sessionStorage.setItem('sts', JSON.stringify(data));
setSTSToken(data);
window.sessionStorage.setItem('sts', JSON.stringify(data))
setSTSToken(data)
const ossClientTemp = await new AliOSS({
accessKeyId: data.AccessKeyId,
accessKeySecret: data.AccessKeySecret,
......@@ -839,27 +833,27 @@ const WangEditorCustomer = forwardRef((props, ref) => {
bucket: bookBucketName,
timeout: 60000,
refreshSTSToken: async () => {
const info = await getAliOSSSTSToken();
const info = await getAliOSSSTSToken()
return {
AccessKeyId: info.AccessKeyId,
AccessKeySecret: info.AccessKeySecret,
SecurityToken: info.SecurityToken,
};
SecurityToken: info.SecurityToken
}
},
refreshSTSTokenInterval: 14 * 60 * 1000,
});
setOssClient(ossClientTemp);
refreshSTSTokenInterval: 14 * 60 * 1000
})
setOssClient(ossClientTemp)
}
};
}
useEffect(() => {
(async () => {
const tempStsToken = window.sessionStorage ? window.sessionStorage.getItem('sts') : '';
;(async () => {
const tempStsToken = window.sessionStorage ? window.sessionStorage.getItem('sts') : ''
try {
const stsToken = JSON.parse(tempStsToken);
const stsToken = JSON.parse(tempStsToken)
// 15 分钟过期
if (dayjs(stsToken.Expiration).valueOf() - dayjs().valueOf() >= 14 * 60 * 1000) {
getStsAuthToken();
getStsAuthToken()
} else {
const ossClientTemp = await new AliOSS({
accessKeyId: data.AccessKeyId,
......@@ -871,92 +865,69 @@ const WangEditorCustomer = forwardRef((props, ref) => {
bucket: bookBucketName,
timeout: 180000,
refreshSTSToken: async () => {
const info = await getAliOSSSTSToken();
const info = await getAliOSSSTSToken()
return {
AccessKeyId: info.AccessKeyId,
AccessKeySecret: info.AccessKeySecret,
SecurityToken: info.SecurityToken,
};
SecurityToken: info.SecurityToken
}
},
refreshSTSTokenInterval: 14 * 60 * 1000,
});
setOssClient(ossClientTemp);
setSTSToken(stsToken);
refreshSTSTokenInterval: 14 * 60 * 1000
})
setOssClient(ossClientTemp)
setSTSToken(stsToken)
}
} catch (e) {
getStsAuthToken();
getStsAuthToken()
}
})();
}, []);
const setColor = (type) => {
const headers = document.querySelectorAll(`.w-e-scroll .chapter-item-header`);
const sections = document.querySelectorAll(`.w-e-scroll .chapter-item-section`);
headers.forEach((item) => {
const node = DomEditor.toSlateNode(editor, item);
const path = DomEditor.findPath(editor, node);
SlateTransforms.setNodes(
editor,
{ ...node, textColor: '#ffffff', bgColor: colorList[type - 1] },
{ at: path },
);
});
sections.forEach((item) => {
const node = DomEditor.toSlateNode(editor, item);
const path = DomEditor.findPath(editor, node);
SlateTransforms.setNodes(
editor,
{ ...node, textColor: '#ffffff', bgColor: colorList[type - 1] },
{ at: path },
);
});
};
const [aiWriteOpen, setAiWriteOpen] = useState(false);
const [aiWriteAction, setAiWriteAction] = useState('rewrite');
})()
}, [])
const setColor = type => {
const headers = document.querySelectorAll(`.w-e-scroll .chapter-item-header`)
const sections = document.querySelectorAll(`.w-e-scroll .chapter-item-section`)
headers.forEach(item => {
const node = DomEditor.toSlateNode(editor, item)
const path = DomEditor.findPath(editor, node)
SlateTransforms.setNodes(editor, { ...node, textColor: '#ffffff', bgColor: colorList[type - 1] }, { at: path })
})
sections.forEach(item => {
const node = DomEditor.toSlateNode(editor, item)
const path = DomEditor.findPath(editor, node)
SlateTransforms.setNodes(editor, { ...node, textColor: '#ffffff', bgColor: colorList[type - 1] }, { at: path })
})
}
const [aiWriteOpen, setAiWriteOpen] = useState(false)
const [aiWriteAction, setAiWriteAction] = useState('rewrite')
return (
<div className='wangeditor-customer-container'>
<div className='editor-content-container'>
<div className='title-head'>
<div className='left'>
<div className="wangeditor-customer-container">
<div className="editor-content-container">
<div className="title-head">
<div className="left">
<h4>{nowTitle}</h4>
</div>
<div className='right'>
<div className="right">
<Space>
<div className='save-time'>
<div className='img'>
<div className="save-time">
<div className="img">
<img src={timesave} /> <span>自动保存</span>
</div>
<span className='time'>
{autosaveTime > 0
? `上次保存发生在 ${dayjs(autosaveTime).format('YYYY-MM-DD HH:mm:ss')}`
: ''}
</span>
<span className="time">{autosaveTime > 0 ? `上次保存发生在 ${dayjs(autosaveTime).format('YYYY-MM-DD HH:mm:ss')}` : ''}</span>
</div>
<Button
type='primary'
type="primary"
icon={<SaveOutlined />}
className='view'
className="view"
onClick={saveContent}
style={{ color: '#fff' }}
disabled={bookId && contentId ? false : true}
>
disabled={bookId && contentId ? false : true}>
保存
</Button>
<Button
icon={<EyeOutlined />}
className='history'
onClick={previewIt}
disabled={bookId && contentId ? false : true}
>
<Button icon={<EyeOutlined />} className="history" onClick={previewIt} disabled={bookId && contentId ? false : true}>
预览
</Button>
<Button
icon={<HistoryOutlined />}
className='history'
onClick={historyIt}
disabled={bookId && contentId ? false : true}
>
<Button icon={<HistoryOutlined />} className="history" onClick={historyIt} disabled={bookId && contentId ? false : true}>
历史
</Button>
</Space>
......@@ -968,77 +939,72 @@ const WangEditorCustomer = forwardRef((props, ref) => {
defaultContent={jsonContent}
value={content}
onCreated={setEditor}
mode='default'
mode="default"
style={{ height: 'calc(100vh - 250px)', overflowY: 'hidden' }}
/>
</div>
<div className='menu-tabs-key'>
<div className='tabs'>
<div className="menu-tabs-key">
<div className="tabs">
{tabsMenu &&
tabsMenu.length &&
tabsMenu.map((item) => {
tabsMenu.map(item => {
return (
<div
className={`tabs-item ${item.key === tabKey ? 'active' : ''}`}
key={item.key}
onClick={() => tabKeyChange(item.key)}
>
<div className={`tabs-item ${item.key === tabKey ? 'active' : ''}`} key={item.key} onClick={() => tabKeyChange(item.key)}>
{item.title}
<span></span>
</div>
);
)
})}
</div>
<div className='menu-tabs-content'>
<div className="menu-tabs-content">
{tabKey === 'text' && (
<div ref={toolbarRef} className='toolbox-parent'>
<div ref={toolbarRef} className="toolbox-parent">
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode='default'
mode="default"
style={{ borderBottom: '1px solid #ccc' }}
className='editor-toolbar-container'
></Toolbar>
className="editor-toolbar-container"></Toolbar>
</div>
)}
{tabKey === 'style' && (
<div className='styletem'>
<div className="styletem">
<p>样式模板</p>
<ul>
<li>
<div className='left'>
<span className='color color1'></span>
<b className='type'>默认</b>
<div className="left">
<span className="color color1"></span>
<b className="type">默认</b>
</div>
<Button type='link' className='use' onClick={() => setColor(1)}>
<Button type="link" className="use" onClick={() => setColor(1)}>
使用
</Button>
</li>
<li>
<div className='left'>
<span className='color color2'></span>
<b className='type'>蓝色</b>
<div className="left">
<span className="color color2"></span>
<b className="type">蓝色</b>
</div>
<Button type='link' className='use' onClick={() => setColor(2)}>
<Button type="link" className="use" onClick={() => setColor(2)}>
使用
</Button>
</li>
<li>
<div className='left'>
<span className='color color3'></span>
<b className='type'>绿色</b>
<div className="left">
<span className="color color3"></span>
<b className="type">绿色</b>
</div>
<Button type='link' className='use' onClick={() => setColor(3)}>
<Button type="link" className="use" onClick={() => setColor(3)}>
使用
</Button>
</li>
<li>
<div className='left'>
<span className='color color4'></span>
<b className='type'>红色</b>
<div className="left">
<span className="color color4"></span>
<b className="type">红色</b>
</div>
<Button type='link' className='use' onClick={() => setColor(4)}>
<Button type="link" className="use" onClick={() => setColor(4)}>
使用
</Button>
</li>
......@@ -1052,15 +1018,14 @@ const WangEditorCustomer = forwardRef((props, ref) => {
footer={null}
centered
destroyOnClose
title='插入图片'
title="插入图片"
classNames={{
header: 'editor-header-customer',
body: 'editor-body-customer',
wrapper: 'editor-wrapper-customer',
wrapper: 'editor-wrapper-customer'
}}
maskClosable={false}
onCancel={() => setImageVisible(false)}
>
onCancel={() => setImageVisible(false)}>
<ImageModal
ref={imageRef}
editor={editor}
......@@ -1077,16 +1042,15 @@ const WangEditorCustomer = forwardRef((props, ref) => {
footer={null}
centered
destroyOnClose
title='插入画廊'
title="插入画廊"
classNames={{
header: 'editor-header-customer',
body: 'editor-body-customer',
wrapper: 'editor-wrapper-customer',
wrapper: 'editor-wrapper-customer'
}}
maskClosable={false}
onCancel={() => setGalleryVisible(false)}
width='800px'
>
width="800px">
<GalleryModal
ref={galleryRef}
editor={editor}
......@@ -1106,15 +1070,14 @@ const WangEditorCustomer = forwardRef((props, ref) => {
footer={null}
centered
destroyOnClose
title='插入章头'
title="插入章头"
classNames={{
header: 'editor-header-customer',
body: 'editor-body-customer',
wrapper: 'editor-wrapper-customer',
wrapper: 'editor-wrapper-customer'
}}
maskClosable={false}
onCancel={() => setTitleVisible(false)}
>
onCancel={() => setTitleVisible(false)}>
<ChapterTitleModal
ref={chapterTitleRef}
editor={editor}
......@@ -1131,15 +1094,14 @@ const WangEditorCustomer = forwardRef((props, ref) => {
footer={null}
centered
destroyOnClose
title='插入节头'
title="插入节头"
classNames={{
header: 'editor-header-customer',
body: 'editor-body-customer',
wrapper: 'editor-wrapper-customer',
wrapper: 'editor-wrapper-customer'
}}
maskClosable={false}
onCancel={() => setSectionVisible(false)}
>
onCancel={() => setSectionVisible(false)}>
<ChapterItemModal
ref={chapterItemRef}
editor={editor}
......@@ -1157,15 +1119,14 @@ const WangEditorCustomer = forwardRef((props, ref) => {
footer={null}
centered
destroyOnClose
title='插入交互练习'
title="插入交互练习"
classNames={{
header: 'editor-header-customer',
body: 'editor-body-customer',
wrapper: 'editor-wrapper-customer',
wrapper: 'editor-wrapper-customer'
}}
maskClosable={false}
onCancel={() => setPracticeOpenVisible(false)}
>
onCancel={() => setPracticeOpenVisible(false)}>
<PracticeModal
ref={practiceRef}
chapterId={chapterId}
......@@ -1183,15 +1144,14 @@ const WangEditorCustomer = forwardRef((props, ref) => {
footer={null}
centered
destroyOnClose
title='气泡'
title="气泡"
classNames={{
header: 'editor-header-customer',
body: 'editor-body-customer',
wrapper: 'editor-wrapper-customer',
wrapper: 'editor-wrapper-customer'
}}
maskClosable={false}
onCancel={() => setTooltipVisible(false)}
>
onCancel={() => setTooltipVisible(false)}>
<TooltipModal
ref={tooltipRef}
editor={editor}
......@@ -1210,15 +1170,14 @@ const WangEditorCustomer = forwardRef((props, ref) => {
footer={null}
centered
destroyOnClose
title='链接'
title="链接"
classNames={{
header: 'editor-header-customer',
body: 'editor-body-customer',
wrapper: 'editor-wrapper-customer',
wrapper: 'editor-wrapper-customer'
}}
maskClosable={false}
onCancel={() => setLinkVisible(false)}
>
onCancel={() => setLinkVisible(false)}>
<LinkModal
ref={tooltipRef}
editor={editor}
......@@ -1240,16 +1199,15 @@ const WangEditorCustomer = forwardRef((props, ref) => {
footer={null}
centered
destroyOnClose
title='扩展阅读'
title="扩展阅读"
classNames={{
header: 'editor-header-customer',
body: 'editor-body-customer',
wrapper: 'editor-wrapper-customer',
wrapper: 'editor-wrapper-customer'
}}
maskClosable={false}
onCancel={() => setExpandVisible(false)}
width='70%'
>
width="70%">
<ExpandModal
ref={previewRef}
editor={editor}
......@@ -1271,18 +1229,15 @@ const WangEditorCustomer = forwardRef((props, ref) => {
classNames={{
header: 'practice-topic-header',
body: 'practice-topic-content',
wrapper: 'practice-topic-modal',
wrapper: 'practice-topic-modal'
}}
maskClosable={false}
onCancel={closePanel}
closeIcon={false}
width='90%'
>
width="90%">
<PracticeSettingModal
ref={practiceSettingRef}
nodes={
practiceRef.current && practiceRef.current.nodes ? practiceRef.current.nodes : null
}
nodes={practiceRef.current && practiceRef.current.nodes ? practiceRef.current.nodes : null}
chapterId={chapterId}
bookId={bookId}
editor={editor}
......@@ -1301,18 +1256,10 @@ const WangEditorCustomer = forwardRef((props, ref) => {
closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#fff' }} />}
maskClosable={false}
classNames={{ body: 'phone-body', wrapper: 'phone-wrapper' }}
wrapClassName='wrap-phone-privew'
width='494px'
onCancel={() => setPriviewVisible(false)}
>
<PreviewModal
ref={previewRef}
gData={gData}
editor={editor}
chapterId={chapterId}
bookId={bookId}
nowTitle={nowTitle}
/>
wrapClassName="wrap-phone-privew"
width="494px"
onCancel={() => setPriviewVisible(false)}>
<PreviewModal ref={previewRef} gData={gData} editor={editor} chapterId={chapterId} bookId={bookId} nowTitle={nowTitle} />
</Modal>
{/* 历史 */}
......@@ -1325,11 +1272,10 @@ const WangEditorCustomer = forwardRef((props, ref) => {
keyboard={false}
closeIcon={false}
maskClosable={false}
width='90%'
width="90%"
onCancel={() => setHistoryVisible(false)}
wrapClassName='history1'
style={{ padding: 0 }}
>
wrapClassName="history1"
style={{ padding: 0 }}>
<HistoryModal
setHistoryVisible={setHistoryVisible}
chapterId={chapterId}
......@@ -1343,13 +1289,12 @@ const WangEditorCustomer = forwardRef((props, ref) => {
{/* ai对话 */}
<Drawer
open={aiVisible}
width='600px'
title='AI对话'
width="600px"
title="AI对话"
destroyOnClose
onClose={() => setAIVisible(false)}
rootClassName='ai-drawer-wrapper'
className='ai-drawer-container'
>
rootClassName="ai-drawer-wrapper"
className="ai-drawer-container">
<AIDrawerComponent setAIVisible={setAIVisible} selectText={selectText} />
</Drawer>
<AIWrite
......@@ -1358,10 +1303,9 @@ const WangEditorCustomer = forwardRef((props, ref) => {
onCancel={() => setAiWriteOpen(false)}
editor={editor}
chapterId={chapterId}
bookId={bookId}
></AIWrite>
bookId={bookId}></AIWrite>
</div>
);
});
)
}
export default WangEditorCustomer;
export default forwardRef(WangEditorCustomer)
src/components/AppList.jsx
浏览文件 @ 536c8778
......@@ -4,7 +4,7 @@ import IconReset from '@/assets/images/icon/reset.png'
import IconReload from '@/assets/images/icon/reload.png'
import IconFilter from '@/assets/images/icon/filter.png'
const AppList = forwardRef((props, ref) => {
const AppList = (props, ref) => {
const { remote = {}, filters = [], filterAside, ...rest } = props
const [data, setData] = useState({ total: 0, list: [] })
const [page, setPage] = useState({ current: 1, pageSize: 10 })
......@@ -54,7 +54,7 @@ const AppList = forwardRef((props, ref) => {
async function handlePageChange(current, pageSize) {
setPage({ current, pageSize })
}
const onValuesChange = (changedValues, allValues) => {
const onValuesChange = changedValues => {
const [value] = Object.values(changedValues)
!value && handleReload()
}
......@@ -100,11 +100,11 @@ const AppList = forwardRef((props, ref) => {
</div>
</div>
)
})
}
const Icon = ({ src }) => {
const IconStyle = { height: '12px', objectFit: 'contain' }
return <img src={src} style={IconStyle} />
}
export default AppList
export default forwardRef(AppList)
src/hooks/useBaiduAI.js
浏览文件 @ 536c8778
......@@ -10,7 +10,7 @@ export function useAIEdit() {
const fetch = useCallback(async params => {
setIsLoading(true)
try {
const defaultParams = { ernie_name: 'ERNIE-4.0-8K', stream: false }
const defaultParams = { ernie_name: 'ERNIE-Lite-8K-0922', stream: false }
const res = await baiduAIChat({ ...defaultParams, params })
const message = { role: 'assistant', content: res.data.result }
setMessages(prevMessages => [...prevMessages, message])
......
src/layout/components/user.jsx
浏览文件 @ 536c8778
import { useEffect } from 'react'
import { useEffect, useCallback } from 'react'
import { Button, Flex, Dropdown } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from 'react-redux'
......@@ -10,13 +10,14 @@ function User() {
const dispatch = useDispatch()
const { userInfo } = useSelector(state => state.user)
const fetchUser = async () => {
const fetchUser = useCallback(async () => {
const { data } = await getUser()
dispatch(setUserInfo(data))
}
}, [dispatch])
useEffect(() => {
fetchUser()
}, [])
}, [fetchUser])
const menuItems = [
{
......
src/pages/books/design/index.jsx 0 → 100644
浏览文件 @ 536c8778
import md5 from 'blueimp-md5'
import qs from 'qs'
import { useSelector } from 'react-redux'
export default function Design() {
/**
* 构建签名
* @param obj 参数对象，对象中的所有属性全部参与签名的生成
* @returns {string} 签名
*/
const buildSign = obj => {
let signParameterArray = []
for (let key in obj) {
signParameterArray.push(`${key}=${obj[key]}`)
}
let signPlaintext = signParameterArray.sort().join('&')
return md5(signPlaintext).toUpperCase()
}
/**
* 构建2.0版本签名
* @param appId 第三方企业id
* @param expireTime 时间戳，取当前时间即可
* @param userFlag 用户标记
* @param appSecret 企业密钥
* @returns {string} 签名
*/
const buildVersion2Sign = (appId, expireTime, userFlag, appSecret) => {
let signParameterObj = {
app_id: appId,
expire_time: expireTime,
user_flag: userFlag,
app_secret: appSecret
}
return buildSign(signParameterObj)
}
const { userInfo } = useSelector(state => state.user)
const buildQueryString = () => {
const appId = '54d9adec77d0402794018d166110f3dd'
const appSecret = '08097010E0EF4B85EE2B8CE438328249'
const userFlag = userInfo.id
const expireTime = Date.now()
const sign = buildVersion2Sign(appId, expireTime, userFlag, appSecret)
let params = {
app_id: appId,
expire_time: expireTime,
user_flag: userFlag,
device_type: 1,
kind_id: 438,
version: '2.0',
sign: sign,
enable_authorize: '1',
taxpayer_name: 'chuangkit',
taxpayer_phone: '13820659475',
taxpayer_number: '91120116636067462H',
env: 'prod',
reptile: 1
}
return qs.stringify(params)
}
const src = `https://www.chuangkit.com/apiauthorize?${buildQueryString()}`
return <iframe src={src} style={{ border: 0, width: '100% ', height: '100%' }}></iframe>
}
src/routes/baseRouter.jsx
浏览文件 @ 536c8778
import { lazy } from 'react';
import { Navigate } from 'react-router-dom';
import { lazyLoad, authComponent } from './lazyLoadAndDelay'; // 添加一个固定的延迟时间，以便你可以看到加载状态
import { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import { lazyLoad, authComponent } from './lazyLoadAndDelay' // 添加一个固定的延迟时间，以便你可以看到加载状态
import Layout from '@/layout/index';
import UserModule from '@/pages/user-module';
import Layout from '@/layout/index'
import UserModule from '@/pages/user-module'
const baseRouter = [
{
......@@ -12,9 +12,13 @@ const baseRouter = [
children: [
{
path: '/userinfo',
Component: lazy(() => import('@/pages/user-module/userInfo')),
Component: lazy(() => import('@/pages/user-module/userInfo'))
},
],
{
path: '/books/design',
Component: lazy(() => import('@/pages/books/design/index'))
}
]
},
{
path: '/login',
......@@ -23,11 +27,11 @@ const baseRouter = [
children: [
{
index: true,
Component: lazy(() => import('@/pages/user-module/login')),
},
],
Component: lazy(() => import('@/pages/user-module/login'))
}
]
},
{ path: '*', element: <Navigate to='/' /> },
];
{ path: '*', element: <Navigate to="/" /> }
]
export default baseRouter;
export default baseRouter
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论