Skip to content

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

chore: update

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