Skip to content

X
xiaomai-cloud-class-web
Commit e2c2d3c7 by yuananting
Options

fix:wangeditor版本冲突bug修复

parent ba3410c0
Showing with 102 additions and 84 deletions
src/modules/teach-tool/components/NewQuestionTab.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-02-25 14:34:29 * @Date: 2021-02-25 14:34:29
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-03-22 09:45:05 * @LastEditTime: 2021-03-22 13:22:50
* @Description: 助学工具-题库-题目管理-新建题目Tab * @Description: 助学工具-题库-题目管理-新建题目Tab
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -100,8 +100,8 @@ class NewQuestionTab extends Component { ...@@ -100,8 +100,8 @@ class NewQuestionTab extends Component {
if (this.props.questionInfo !== questionInfo) { if (this.props.questionInfo !== questionInfo) {
if (questionInfo.gapFillingAnswerList !== this.state.gapFillingAnswer) { if (questionInfo.gapFillingAnswerList !== this.state.gapFillingAnswer) {
this.setState({ this.setState({
gapFillingAnswer: questionInfo.gapFillingAnswerList gapFillingAnswer: questionInfo.gapFillingAnswerList,
}) });
} }
this.setState( this.setState(
{ {
...@@ -111,11 +111,13 @@ class NewQuestionTab extends Component { ...@@ -111,11 +111,13 @@ class NewQuestionTab extends Component {
}, },
() => { () => {
const con = questionInfo.questionStemList[0].content; const con = questionInfo.questionStemList[0].content;
const input = con.match(/<input([^<>]*)>/g) const input = con.match(/<input([^<>]*)>/g);
let _blanksList = input && input.map(item => { let _blanksList =
return this.transferStemDocument(item).firstChild input &&
}) input.map((item) => {
this.setState({ blanksList: _blanksList || [] }) return this.transferStemDocument(item).firstChild;
});
this.setState({ blanksList: _blanksList || [] });
} }
); // 题干内容 ); // 题干内容
this.setState({ this.setState({
...@@ -417,7 +419,7 @@ class NewQuestionTab extends Component { ...@@ -417,7 +419,7 @@ class NewQuestionTab extends Component {
} }
break; break;
} }
var that = this var that = this;
function change() { function change() {
that.setState({ contentType }); that.setState({ contentType });
that.setState({ mediaType: key }); that.setState({ mediaType: key });
...@@ -449,8 +451,8 @@ class NewQuestionTab extends Component { ...@@ -449,8 +451,8 @@ class NewQuestionTab extends Component {
this.setState({ this.setState({
onAudioFinish: function () { onAudioFinish: function () {
change(); change();
} },
}) });
} else { } else {
change(); change();
} }
...@@ -543,19 +545,17 @@ class NewQuestionTab extends Component { ...@@ -543,19 +545,17 @@ class NewQuestionTab extends Component {
changeBlankCount = (data, idx) => { changeBlankCount = (data, idx) => {
const { gapFillingAnswer } = this.state; const { gapFillingAnswer } = this.state;
let _gap = [...gapFillingAnswer]; let _gap = [...gapFillingAnswer];
if (data.length <= idx) {
if (data.length === 0) { _gap.splice(idx, 1);
_gap = [] } else {
}
else {
data.forEach((item, index) => { data.forEach((item, index) => {
if (index === idx) { if (index === idx) {
if (_gap.length < data.length) { if (_gap.length < data.length) {
_gap.splice(idx, 0, { correctAnswerList: [] }) _gap.splice(idx, 0, { correctAnswerList: [] });
} else if (_gap.length > data.length) { } else if (_gap.length > data.length) {
_gap.splice(idx, 1) _gap.splice(idx, 1);
} else { } else {
_gap.splice(idx, 1, { correctAnswerList: [] }) _gap.splice(idx, 1, { correctAnswerList: [] });
} }
} }
if (!item.correctAnswerList) { if (!item.correctAnswerList) {
...@@ -568,10 +568,13 @@ class NewQuestionTab extends Component { ...@@ -568,10 +568,13 @@ class NewQuestionTab extends Component {
}); });
} }
this.setState({ this.setState(
{
blanksList: data, blanksList: data,
gapFillingAnswer: _gap gapFillingAnswer: _gap,
}, () => this._onSetState()); },
() => this._onSetState()
);
}; };
addAnswerTag = (optionItem) => { addAnswerTag = (optionItem) => {
...@@ -602,9 +605,11 @@ class NewQuestionTab extends Component { ...@@ -602,9 +605,11 @@ class NewQuestionTab extends Component {
optionItem.errorHold = true; optionItem.errorHold = true;
} }
} }
}) });
this.setState({ gapFillingAnswer: _gapFillingAnswer }, () => this._onSetState()); this.setState({ gapFillingAnswer: _gapFillingAnswer }, () =>
this._onSetState()
);
this.setState({ blanksList: _blanksList }); this.setState({ blanksList: _blanksList });
}; };
...@@ -614,12 +619,14 @@ class NewQuestionTab extends Component { ...@@ -614,12 +619,14 @@ class NewQuestionTab extends Component {
let _gapFillingAnswer = [...gapFillingAnswer]; let _gapFillingAnswer = [...gapFillingAnswer];
_blanksList.forEach((item, index) => { _blanksList.forEach((item, index) => {
if (item.id === optionItem.id) { if (item.id === optionItem.id) {
_gapFillingAnswer[index].correctAnswerList = _gapFillingAnswer[index].correctAnswerList.filter( _gapFillingAnswer[index].correctAnswerList = _gapFillingAnswer[
(tag) => tag !== removedTag index
) ].correctAnswerList.filter((tag) => tag !== removedTag);
} }
}); });
this.setState({ gapFillingAnswer: _gapFillingAnswer }, () => this._onSetState()); this.setState({ gapFillingAnswer: _gapFillingAnswer }, () =>
this._onSetState()
);
this.setState({ blanksList: _blanksList }); this.setState({ blanksList: _blanksList });
}; };
...@@ -633,7 +640,7 @@ class NewQuestionTab extends Component { ...@@ -633,7 +640,7 @@ class NewQuestionTab extends Component {
} }
}); });
this.setState({ blanksList: _blanksList }); this.setState({ blanksList: _blanksList });
} };
handleInputEdit = (optionItem, index) => { handleInputEdit = (optionItem, index) => {
const _blanksList = this.state.blanksList; const _blanksList = this.state.blanksList;
...@@ -647,7 +654,9 @@ class NewQuestionTab extends Component { ...@@ -647,7 +654,9 @@ class NewQuestionTab extends Component {
renderGapFillingAnswer = (optionItem, optionIndex) => { renderGapFillingAnswer = (optionItem, optionIndex) => {
const { gapFillingAnswer } = this.state; const { gapFillingAnswer } = this.state;
const list = gapFillingAnswer[optionIndex] && gapFillingAnswer[optionIndex].correctAnswerList; const list =
gapFillingAnswer[optionIndex] &&
gapFillingAnswer[optionIndex].correctAnswerList;
return ( return (
<div className="gap-answer-box" key={optionIndex}> <div className="gap-answer-box" key={optionIndex}>
<span className="gap-answer-label"> <span className="gap-answer-label">
...@@ -655,7 +664,8 @@ class NewQuestionTab extends Component { ...@@ -655,7 +664,8 @@ class NewQuestionTab extends Component {
{optionIndex + 1}. {optionIndex + 1}.
</span> </span>
<div className="gap-answer-content"> <div className="gap-answer-content">
{list && list.map((tag, index) => { {list &&
list.map((tag, index) => {
return ( return (
<Tag <Tag
className="edit-tag" className="edit-tag"
...@@ -675,7 +685,12 @@ class NewQuestionTab extends Component { ...@@ -675,7 +685,12 @@ class NewQuestionTab extends Component {
}} }}
maxLength={60} maxLength={60}
size="small" size="small"
suffix={<CloseOutlined onClick={() => this.handleInputClose(optionItem)} style={{ color: "#999999" }} />} suffix={
<CloseOutlined
onClick={() => this.handleInputClose(optionItem)}
style={{ color: "#999999" }}
/>
}
onBlur={(e) => onBlur={(e) =>
this.handleInputConfirm(optionItem, e.target.value, "save") this.handleInputConfirm(optionItem, e.target.value, "save")
} }
...@@ -1401,7 +1416,7 @@ class NewQuestionTab extends Component { ...@@ -1401,7 +1416,7 @@ class NewQuestionTab extends Component {
questionAnswerDesc, questionAnswerDesc,
"1000字以内，可粘贴小图", "1000字以内，可粘贴小图",
["VOICE", "AUDIO", "PICTURE", "VIDEO"], ["VOICE", "AUDIO", "PICTURE", "VIDEO"],
"QUESTION_ANSWER_DESC", "QUESTION_ANSWER_DESC"
)} )}
</div> </div>
</Form.Item> </Form.Item>
......
src/modules/teach-tool/components/QuestionEditor.jsx
...@@ -50,8 +50,8 @@ class QuestionEditor extends Component { ...@@ -50,8 +50,8 @@ class QuestionEditor extends Component {
static getDerivedStateFromProps(nextProps, prevState) { static getDerivedStateFromProps(nextProps, prevState) {
return { return {
detailInfo: nextProps.detailInfo detailInfo: nextProps.detailInfo,
} };
} }
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
...@@ -62,10 +62,9 @@ class QuestionEditor extends Component { ...@@ -62,10 +62,9 @@ class QuestionEditor extends Component {
}); });
} }
if (blanksList !== this.state.blanksList) { if (blanksList !== this.state.blanksList) {
console.log("+++++++", blanksList)
this.setState({ this.setState({
blanksList blanksList,
}) });
} }
return true; return true;
} }
...@@ -94,7 +93,6 @@ class QuestionEditor extends Component { ...@@ -94,7 +93,6 @@ class QuestionEditor extends Component {
this.editorRoot.txt.html( this.editorRoot.txt.html(
/^\<p/.test(content) ? content : `<p>${content}</p>` /^\<p/.test(content) ? content : `<p>${content}</p>`
); );
this.editorRoot.change && this.editorRoot.change();
}; };
renderEditor() { renderEditor() {
...@@ -104,12 +102,12 @@ class QuestionEditor extends Component { ...@@ -104,12 +102,12 @@ class QuestionEditor extends Component {
`#editor${editorId}_tabbar`, `#editor${editorId}_tabbar`,
`#editor${editorId}_content` `#editor${editorId}_content`
); );
editorRoot.customConfig.menus = []; editorRoot.config.menus = [];
editorRoot.customConfig.uploadImgMaxSize = 1 * 1024 * 1024; editorRoot.config.uploadImgMaxSize = 1 * 1024 * 1024;
editorRoot.customConfig.customAlert = function (info) { editorRoot.config.customAlert = function (info) {
message.warning(/1M/.test(info) ? "图片大于1M，请使用图片上传" : info); message.warning(/1M/.test(info) ? "图片大于1M，请使用图片上传" : info);
}; };
editorRoot.customConfig.customUploadImg = function (files, insert) { editorRoot.config.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表 // files 是 input 中选中的文件列表
// insert 是获取图片 url 后，插入到编辑器的方法 // insert 是获取图片 url 后，插入到编辑器的方法
UploadOss.uploadBlobToOSS(files[0], window.random_string(16)).then( UploadOss.uploadBlobToOSS(files[0], window.random_string(16)).then(
...@@ -118,10 +116,11 @@ class QuestionEditor extends Component { ...@@ -118,10 +116,11 @@ class QuestionEditor extends Component {
} }
); );
}; };
editorRoot.customConfig.zIndex = 999; editorRoot.config.zIndex = 999;
editorRoot.customConfig.pasteFilterStyle = false; editorRoot.config.placeholder = "";
editorRoot.config.pasteFilterStyle = false;
// 自定义处理粘贴的文本内容 // 自定义处理粘贴的文本内容
editorRoot.customConfig.pasteTextHandle = function (content) { editorRoot.config.pasteTextHandle = function (content) {
if (content == "" && !content) return ""; if (content == "" && !content) return "";
var str = content; var str = content;
str = str.replace(/<xml>[\s\S]*?<\/xml>/gi, ""); str = str.replace(/<xml>[\s\S]*?<\/xml>/gi, "");
...@@ -137,16 +136,17 @@ class QuestionEditor extends Component { ...@@ -137,16 +136,17 @@ class QuestionEditor extends Component {
return str; return str;
}; };
let prevList = [] let prevList = [];
let counter = 0; let counter = 0;
const isEdit = getParameterByName('id'); const isEdit = getParameterByName("id");
if (isEdit) { if (isEdit) {
const stemDom = document.getElementsByClassName("add-fill-line"); const stemDom = document.getElementsByClassName("add-fill-line");
prevList = [...stemDom].map(item => item.id) prevList = [...stemDom].map((item) => item.id);
localStorage.setItem('gap_ques_prevList', JSON.stringify(prevList)); localStorage.setItem("gap_ques_prevList", JSON.stringify(prevList));
setTimeout(function () { setTimeout(
function () {
const divHeight = document.getElementById(`editor${editorId}_content`) const divHeight = document.getElementById(`editor${editorId}_content`)
.firstChild.offsetHeight; .firstChild.offsetHeight;
if (divHeight > 30) { if (divHeight > 30) {
...@@ -154,15 +154,17 @@ class QuestionEditor extends Component { ...@@ -154,15 +154,17 @@ class QuestionEditor extends Component {
} else { } else {
this.setState({ isShowSingleInput: true }); this.setState({ isShowSingleInput: true });
} }
}.bind(this)) }.bind(this)
);
if (counter === 0) { if (counter === 0) {
this.props.changeBlankCount(stemDom) this.props.changeBlankCount(stemDom);
} }
} }
editorRoot.customConfig.onchange = (html) => { editorRoot.config.onchange = (html) => {
const conLen = html.replace(/<(?!img|input).*?>/g, "").length; html = html.replace(/<(?!img|input).*?>/g, "");
const conLen = html.length;
counter++; counter++;
const { focusFlag } = this.state; const { focusFlag } = this.state;
const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ") const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ")
...@@ -178,14 +180,17 @@ class QuestionEditor extends Component { ...@@ -178,14 +180,17 @@ class QuestionEditor extends Component {
} else { } else {
this.setState({ isShowSingleInput: true }); this.setState({ isShowSingleInput: true });
} }
if (this.state.isGapFilling && this.state.contentType === "QUESTION_STEM") { if (
this.state.isGapFilling &&
this.state.contentType === "QUESTION_STEM"
) {
const stemHtml = this.transferStemDocument(html); const stemHtml = this.transferStemDocument(html);
var _blanksList = stemHtml.getElementsByClassName("add-fill-line") var _blanksList = stemHtml.getElementsByClassName("add-fill-line");
const ids = [..._blanksList].map(item => item.id); const ids = [..._blanksList].map((item) => item.id);
const isEdit = getParameterByName('id'); const isEdit = getParameterByName("id");
if (isEdit && counter === 1) { if (isEdit && counter === 1) {
const prev = localStorage.getItem('gap_ques_prevList'); const prev = localStorage.getItem("gap_ques_prevList");
prevList = prev && JSON.parse(prev); prevList = prev && JSON.parse(prev);
} }
...@@ -193,25 +198,31 @@ class QuestionEditor extends Component { ...@@ -193,25 +198,31 @@ class QuestionEditor extends Component {
if (prevList && ids) { if (prevList && ids) {
idx = this.getNewArr(prevList, ids); idx = this.getNewArr(prevList, ids);
const oldLen = prevList.length; const oldLen = prevList.length;
idx = idx >= oldLen ? idx - oldLen : idx;
idx = idx >= oldLen ? idx - oldLen : idx
} }
prevList = [...ids]; prevList = [...ids];
this.setState({ blanksList: _blanksList }, () => this.props.changeBlankCount(_blanksList, idx)) this.setState({ blanksList: _blanksList }, () =>
this.props.changeBlankCount(_blanksList, idx)
);
} }
this.setState( this.setState(
{ contentLength, visiblePlacehold: conLen === 0 && !focusFlag }, {
contentLength,
visiblePlacehold:
(conLen === 0 || (conLen === 1 && html === " ")) && !focusFlag,
},
() => { () => {
onChange && onChange(html, this.state.contentLength); onChange && onChange(html, this.state.contentLength);
} }
); );
}; };
editorRoot.customConfig.onblur = (html) => { editorRoot.config.onblur = (html) => {
const conLen = html.replace(/<(?!img|input).*?>/g, "").length; html = html.replace(/<(?!img|input).*?>/g, "");
editorRoot.change && editorRoot.change(); html = html.replace(/\s+/g, "");
const conLen = html.length;
this.setState({ this.setState({
focusFlag: false, focusFlag: false,
visibleMediaBox: false, visibleMediaBox: false,
...@@ -220,24 +231,14 @@ class QuestionEditor extends Component { ...@@ -220,24 +231,14 @@ class QuestionEditor extends Component {
}); });
}; };
editorRoot.customConfig.onfocus = () => {
this.setState({
focusFlag: true,
visibleMediaBox: true,
visiblePlacehold: false,
});
};
editorRoot.create(); editorRoot.create();
this.editorRoot = editorRoot; this.editorRoot = editorRoot;
// if (detailInfo && detailInfo.content) {
const contentHtml = /^\<p/.test(detailInfo.content) const contentHtml = /^\<p/.test(detailInfo.content)
? detailInfo.content ? detailInfo.content
: `<p>${detailInfo.content}</p>`; : `<p>${detailInfo.content}</p>`;
editorRoot.txt.html(detailInfo.content); editorRoot.txt.html(detailInfo.content);
const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ") const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ").length;
.length;
const imgLength = contentHtml.match(/<img/g) const imgLength = contentHtml.match(/<img/g)
? contentHtml.match(/<img/g).length * 2 ? contentHtml.match(/<img/g).length * 2
: 0; : 0;
...@@ -251,13 +252,12 @@ class QuestionEditor extends Component { ...@@ -251,13 +252,12 @@ class QuestionEditor extends Component {
onChange && onChange(contentHtml, this.state.contentLength); onChange && onChange(contentHtml, this.state.contentLength);
} }
); );
// }
bindChangeContent && bindChangeContent(this.handleChangeContent); bindChangeContent && bindChangeContent(this.handleChangeContent);
} }
getNewArr(a, b) { getNewArr(a, b) {
const arr = [...a, ...b]; const arr = [...a, ...b];
const idx = arr.findIndex(item => { const idx = arr.findIndex((item) => {
return !(a.includes(item) && b.includes(item)); return !(a.includes(item) && b.includes(item));
}); });
return idx; return idx;
...@@ -360,7 +360,8 @@ class QuestionEditor extends Component { ...@@ -360,7 +360,8 @@ class QuestionEditor extends Component {
</div> </div>
)} )}
<div <div
className={`editor-limit-tip${contentLength > limitLength ? " mt6" : "" className={`editor-limit-tip${
contentLength > limitLength ? " mt6" : ""
}`} }`}
style={{ height: contentLength > limitLength ? 20 : 0 }} style={{ height: contentLength > limitLength ? 20 : 0 }}
> >
......
src/modules/teach-tool/components/QuestionEditor.less
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
color: #999999; color: #999999;
margin-top: 8px; margin-top: 8px;
.editor-fill-info_icon { .editor-fill-info_icon {
color: #5289fa; color: #5289fa !important;
font-size: 14px; font-size: 14px;
padding-left: 9px; padding-left: 9px !important;
cursor: pointer; cursor: pointer;
} }
} }
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
.editor-placehold { .editor-placehold {
position: absolute; position: absolute;
top: 0; top: 0px;
left: 0; left: 0;
right: 0; right: 0;
font-size: 14px; font-size: 14px;
...@@ -104,6 +104,8 @@ ...@@ -104,6 +104,8 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
z-index: 999;
pointer-events: none;
} }
.edtior-media_box { .edtior-media_box {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment