QingYu-Club/jc-club-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 修改富文本编辑器

Browse Source
This commit is contained in:
秋水浮尘
2023-10-22 23:04:27 +08:00
parent 668d1e0a52
commit ced3be52f4
8 changed files with 687 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/question-bank/components/ranking-box/index.less
View File

@@ -25,7 +25,8 @@
justify-content: center;
align-items: center;
margin-right: 4px;
width: 48px;
padding: 0 8px;
// width: 48px;
height: 30px;
font-size: 12px;
cursor: pointer;
@@ -34,7 +35,7 @@
margin-right: 0px;
}
&:hover {
@include font-color();
// @include font-color();
}
}
.ranking-list-btn-active {

120
src/views/upload-questions/components/brief-questions/index.jsx
View File

@@ -7,6 +7,7 @@ import KindEditor from '../kind-editor';
import RankLabelBox from '../rank-label-box';
import RepeatContentBox from '../repeat-content-box';
import { apiName } from '../../constant';
import QuestionEditor from '../question-editor'
import './index.less';
export default class BriefQuestions extends Component {
@@ -64,76 +65,78 @@ export default class BriefQuestions extends Component {
* 一次确认录入
*/
onSubmit = debounce(() => {
console.log(this.rankId)
const { subjectName, isDisabledSubmit, isSubmit } = this.state;
if (isDisabledSubmit || !isSubmit) {
return;
}
// if (!isSubmit) {
if (!isSubmit) {
return;
}
// if (!!!subjectName) {
// message.warning('请输入题目名称');
// return;
// }
// if (!!!this.subjectAnswer) {
// message.warning('请输入题目答案');
// return;
// }
// if (!!!this.firstCategoryValue) {
// message.warning('请选择一级分类');
// return;
// }
// if (this.secondCategoryValue.length <= 0) {
// message.warning('请选择二级分类');
// return;
// }
// if (this.thirdCategoryValue.length <= 0) {
// message.warning('请选择三级标签');
// return;
// }
if (!!!subjectName) {
message.warning('请输入题目名称');
return;
}
if (!!!this.subjectAnswer) {
message.warning('请输入题目答案');
return;
}
if (!!!this.firstCategoryValue) {
message.warning('请选择一级分类');
return;
}
if (this.secondCategoryValue.length <= 0) {
message.warning('请选择二级分类');
return;
}
if (this.thirdCategoryValue.length <= 0) {
message.warning('请选择三级标签');
return;
}
this.setState({
isSubmit: false,
});
let params = {
subjectName: subjectName,
difficulty: this.rankId,
subjectDifficult: this.rankId,
subjectType: 4,
subjectScore: 1,
subjectParse: '解析什么',
subjectAnswer: this.subjectAnswer,
categoryIds: this.secondCategoryValue,
labelIds: this.thirdCategoryValue,
categoryIds: this.secondCategoryValue.filter(item => item.active).map(t => t.id),
labelIds: [4, 5, 6],
};
console.log('录入 ----', params);
// return console.log('录入 ----', params);
req({
method: 'post',
data: params,
url: apiName.addInterviewSubject,
url: apiName.add,
})
.then((res) => {
this.repeatInfo = {};
if (res.data && res.data.insertStatus) {
this.setState(
{
isSubmit: true,
},
() => {
this.successModalConfirm();
}
);
} else if (!res.data.insertStatus) {
this.repeatInfo = {
repeatDocId: res.data.docId, // 重复题目id
repeatRate: res.data.repeatRate, // 重复率
repeatSubjectName: res.data.subjectName, // 重复题目
repeatSubjectAnswe: res.data.subjectAnswer, // 重复答案
repeatSetterErp: res.data.subjectSetterErp, // 出题人erp
repeatSetterName: res.data.subjectSetterName, // 出题人姓名
};
this.setState({
isShowModalBox: true,
isSubmit: true,
});
}
// if (res.data && res.data.insertStatus) {
// this.setState(
// {
// isSubmit: true,
// },
// () => {
// this.successModalConfirm();
// }
// );
// } else if (!res.data.insertStatus) {
// this.repeatInfo = {
// repeatDocId: res.data.docId, // 重复题目id
// repeatRate: res.data.repeatRate, // 重复率
// repeatSubjectName: res.data.subjectName, // 重复题目
// repeatSubjectAnswe: res.data.subjectAnswer, // 重复答案
// repeatSetterErp: res.data.subjectSetterErp, // 出题人erp
// repeatSetterName: res.data.subjectSetterName, // 出题人姓名
// };
// this.setState({
// isShowModalBox: true,
// isSubmit: true,
// });
// }
})
.catch((err) => {
this.setState({
@@ -154,8 +157,9 @@ export default class BriefQuestions extends Component {
!!!subjectName ||
!!!this.subjectAnswer ||
!!!this.firstCategoryValue ||
this.secondCategoryValue.length <= 0 ||
this.thirdCategoryValue.length <= 0
this.secondCategoryValue.length <= 0
// ||
// this.thirdCategoryValue.length <= 0
) {
isDisabledSubmit = true;
}
@@ -257,7 +261,7 @@ export default class BriefQuestions extends Component {
* 录入成功弹框-去首页
*/
onGoHomeSuccessModal = () => {
window.location.href = '/cms-supplier/question-bank';
window.location.href = '/question-bank';
};
/**
@@ -279,7 +283,7 @@ export default class BriefQuestions extends Component {
* @param {*} list
*/
handleChangeRank = (list) => {
this.rankId = list[0];
this.rankId = list[0].categoryId;
let isDisabledSubmit = this.checkData();
this.setState({
isDisabledSubmit,
@@ -308,12 +312,9 @@ export default class BriefQuestions extends Component {
</div>
<div className="brief-questions-container">
<div className="brief-questions-title">题目答案：</div>
{/* {this.reanderAnser()} */}
{this.reanderAnser()}
</div>
<RankLabelBox
// ref={(ref) => {
// this.rankLabelBox = ref;
// }}
subjectName={subjectName}
onChangeRankLabel={this.onChangeRankLabel}
handleChangeRank={this.handleChangeRank}
@@ -347,11 +348,8 @@ export default class BriefQuestions extends Component {
reanderAnser = () => {
return (
<div className="brief-questions-main">
<KindEditor
<QuestionEditor
onChange={this.onChangeEditor}
ref={(ref) => {
this.kindEditor = ref;
}}
/>
</div>
);

2
src/views/upload-questions/components/kind-editor/index.less
View File

@@ -24,7 +24,7 @@
}
}
.w-e-text-container {
z-index: 1 !important;
// z-index: 1 !important;
}
.kind-editor-active-box {
border: 1px solid #40a9ff;

72
src/views/upload-questions/components/question-editor/index.jsx Normal file
View File

@@ -0,0 +1,72 @@
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import React, { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { DomEditor } from '@wangeditor/editor'
// 当前菜单排序和分组
function MyEditor(props) {
// editor 实例
const [editor, setEditor] = useState(null)
// 编辑器内容
const [html, setHtml] = useState('<p></p>')
// 工具栏配置
const toolbarConfig = {
excludeKeys: [
'group-image', 'group-video'
]
}
// 编辑器配置
const editorConfig = {
placeholder: '请输入内容...',
}
const changeValue = (html) => {
setHtml(html)
props.onChange(html)
}
// 及时销毁 editor ，重要！
useEffect(() => {
// if (editor) {
// const toolbar = DomEditor.getToolbar(editor)
// const curToolbarConfig = toolbar.getConfig()
// console.log(curToolbarConfig.toolbarKeys)
// }
return () => {
if (editor == null) return
editor.destroy()
setEditor(null)
}
}, [editor])
return (
<>
<div style={{ border: '1px solid #ccc', zIndex: 100 }}>
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode="default"
style={{ borderBottom: '1px solid #ccc' }}
/>
<Editor
defaultConfig={editorConfig}
value={html}
onCreated={setEditor}
onChange={editor => changeValue(editor.getHtml())}
mode="default"
style={{ height: '300px', overflowY: 'scroll' }}
/>
</div>
</>
)
}
export default MyEditor

13
src/views/upload-questions/components/rank-label-box/index.jsx
View File

@@ -45,9 +45,10 @@ const RankLabelBox = (props) => {
* @param {*} handleStatusList
* @param {*} selectList
*/
const onHandleChangeRank = (handleStatusList, selectList) => {
const onHandleChangeRank = (handleStatusList) => {
// console.log(handleStatusList, selectList)
setRankList(handleStatusList)
props.handleChangeRank(selectList);
props.handleChangeRank(handleStatusList.filter(t => t.active));
};
/**
@@ -74,6 +75,8 @@ const RankLabelBox = (props) => {
);
};
const listType = {
1: setFirstCategoryList,
2: setSecondCategoryList,
@@ -90,7 +93,11 @@ const RankLabelBox = (props) => {
if (type == 1) {
setFirstSelected(selectList[0])
}
};
}
useEffect(() => {
props.onChangeRankLabel(firstCategoryList, secondCategoryList, thirdCategoryList)
}, [firstCategoryList, secondCategoryList, thirdCategoryList])
/**
* 获得二级分类数据

2
src/views/upload-questions/constant.js
View File

@@ -14,6 +14,8 @@ export const apiName = {
// 根据一级分类查询标签
queryLabelByCategoryId: '/label/queryLabelByCategoryId',
// 新增简答
add: '/add',
/**
* 新增题目
*/