From 52c2d38d602d6b28e6c7514db5e9f3b4a73cb101 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=9E=97?= <904079904@qq.com> Date: Wed, 11 Mar 2020 16:25:47 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/common/quillForEditor/ImageBlot.js | 23 ++- .../question/component/ChoquesEditor.js | 146 ++++++++++++++---- .../question/component/JudquestionEditor.js | 25 ++- .../question/component/SingleEditor.js | 128 ++++++++++++--- 4 files changed, 266 insertions(+), 56 deletions(-) diff --git a/public/react/src/common/quillForEditor/ImageBlot.js b/public/react/src/common/quillForEditor/ImageBlot.js index 0a9bec733..6e585f31f 100644 --- a/public/react/src/common/quillForEditor/ImageBlot.js +++ b/public/react/src/common/quillForEditor/ImageBlot.js @@ -1,7 +1,7 @@ /* * @Description: 重写图片 * @Author: tangjiang - * @Github: + * @Github: * @Date: 2019-12-16 15:50:45 * @LastEditors : tangjiang * @LastEditTime : 2019-12-31 13:59:02 @@ -17,9 +17,14 @@ export default class ImageBlot extends BlockEmbed { const node = super.create(); node.setAttribute('alt', value.alt); node.setAttribute('src', value.url); + console.log('~~~~~~~~~~~', node, value); node.addEventListener('click', function () { - value.onclick(value.url); - }, false); + try { + value.onclick(value.url); + }catch (e) { + + } + }, false); if (value.width) { node.setAttribute('width', value.width); } @@ -35,6 +40,16 @@ export default class ImageBlot extends BlockEmbed { node.setAttribute('width', '100%'); } + // node.setAttribute('style', { cursor: 'pointer' }); + + // if (node.onclick) { + // console.log('image 有图片点击事件======》》》》》》'); + // // node.setAttribute('onclick', node.onCLick); + // } + // 给图片添加点击事件 + // node.onclick = () => { + // value.onClick && value.onClick(value.url); + // } return node; } @@ -54,4 +69,4 @@ export default class ImageBlot extends BlockEmbed { } ImageBlot.blotName = 'image'; -ImageBlot.tagName = 'img'; \ No newline at end of file +ImageBlot.tagName = 'img'; diff --git a/public/react/src/modules/question/component/ChoquesEditor.js b/public/react/src/modules/question/component/ChoquesEditor.js index 512e6e373..640205d92 100644 --- a/public/react/src/modules/question/component/ChoquesEditor.js +++ b/public/react/src/modules/question/component/ChoquesEditor.js @@ -79,6 +79,8 @@ class ChoquesEditor extends Component{ question_titlesysl:this.props.question_titlesysl||'', question_titleysl:this.props.question_title || '', item_banksedit:[], + bindinginputs:null, + url:"", } } addOption = () => { @@ -175,7 +177,14 @@ class ChoquesEditor extends Component{ this.props.onEditorCancel() } + handleShowUploadImage = (url,i) => { + this.setState({ + url:url, + bindinginputs:i + }) + + } componentDidMount = () => { try { @@ -228,10 +237,22 @@ class ChoquesEditor extends Component{ } var texts; const _text = quill.getText(); + // console.log("onOptionContentChange"); + // console.log(value); + // console.log(value.ops.length); + // console.log(_text); const reg = /^[\s\S]*.*[^\s][\s\S]*$/; if (!reg.test(_text)) { // 处理编辑器内容为空 texts=""; + try { + if(value.ops.length>1){ + //单独图片的话 _text是为空的 + texts=JSON.stringify(value); + } + }catch (e) { + + } } else { if(_text.length>=500){ var result = _text.substring(0,450); @@ -288,40 +309,68 @@ class ChoquesEditor extends Component{ if (!reg.test(_text)) { // 处理编辑器内容为空 this.setState({ - question_titleysl:"" + question_titleysl:"", }) + try { + if(value.ops.length>1) { + this.setState({ + question_titleysl:JSON.stringify(value), + }) + } + }catch (e) { + + } } else { // 提交到后台的内容需要处理一下; try { let texts = JSON.stringify(value); this.setState({ - question_titleysl:texts + question_titleysl:texts, }) }catch (e) { this.setState({ - question_titleysl:"" + question_titleysl:"", }) } } } + bindinginputs=(i)=>{ + this.setState({ + bindinginputs:i + }) + + } + + onContentChanges=(value,quill)=>{ const _text = quill.getText(); const reg = /^[\s\S]*.*[^\s][\s\S]*$/; if (!reg.test(_text)) { // 处理编辑器内容为空 this.setState({ - question_titlesysl:"" + question_titlesysl:"", }) + try { + if(value.ops.length>1){ + //单独图片的话 _text是为空的 + this.setState({ + question_titlesysl:JSON.stringify(value), + }) + } + }catch (e) { + + } } else { // 提交到后台的内容需要处理一下; try { let texts = JSON.stringify(value); this.setState({ - question_titlesysl:texts + question_titlesysl:texts, + }) }catch (e) { this.setState({ - question_titlesysl:"" + question_titlesysl:"", }) } @@ -330,7 +379,7 @@ class ChoquesEditor extends Component{ render() { - let { question_title, question_score, question_type, question_choices, standard_answers,question_titles} = this.state; + let { question_title, question_score, question_type, question_choices, standard_answers,question_titles,bindinginputs} = this.state; let { question_id, index, exerciseIsPublish, // question_title, // question_type, @@ -382,6 +431,20 @@ class ChoquesEditor extends Component{ .signleEditor .quill_editor_for_react_area .ql-container .ql-editor p{ font-family: MicrosoftYaHei; } + + .content_editorMd_show{ + display: flex !important; + margin-top:0px !important; + border-radius:2px !important; + max-width: 1056px !important; + word-break:break-all !important; + border:1px solid rgba(221,221,221,1) !important; + } + .contestedtext{ + font-size:14px; + font-family:MicrosoftYaHei; + color:rgba(172,172,172,1); + } `}

{/* {!question_id ? '新建' : '编辑'} */} @@ -391,7 +454,7 @@ class ChoquesEditor extends Component{ {question_choices.map( (item, index) => { + // console.log("question_choices"); + // console.log(item); const bg = standard_answers[index] ? 'check-option-bg' : '' return

0?"df optionRow mt15": "df optionRow"} > {/* 点击设置答案 */} @@ -423,25 +488,51 @@ class ChoquesEditor extends Component{ { item===undefined||item===null||item===""? - this.onOptionContentChange(value,quill,index)} - /> +
+ { + bindinginputs===null||bindinginputs!==index? +
this.bindinginputs(index)}> + {/*

请您输入选项

*/} +
: + this.onOptionContentChange(value,quill,index)} + showUploadImage={(url)=>this.handleShowUploadImage(url,index)} + /> + + } +
: - this.onOptionContentChange(value,quill,index)} - /> +
+ { + bindinginputs===null||bindinginputs!==index? +
this.bindinginputs(index)}> + + this.handleShowUploadImage(url,index)} + /> +
+ : + this.onOptionContentChange(value,quill,index)} + showUploadImage={(url)=>this.handleShowUploadImage(url,index)} + /> + } + +
}
@@ -474,12 +565,13 @@ class ChoquesEditor extends Component{
diff --git a/public/react/src/modules/question/component/JudquestionEditor.js b/public/react/src/modules/question/component/JudquestionEditor.js index 868700c6b..ab7e930b1 100644 --- a/public/react/src/modules/question/component/JudquestionEditor.js +++ b/public/react/src/modules/question/component/JudquestionEditor.js @@ -310,7 +310,16 @@ class JudquestionEditor extends Component{ this.setState({ question_titleysl:"" }) - // console.log("空"); + try { + if(value.ops.length>1){ + //单独图片的话 _text是为空的 + this.setState({ + question_titleysl:JSON.stringify(value), + }) + } + }catch (e) { + + } } else { // 提交到后台的内容需要处理一下; try { @@ -334,6 +343,16 @@ class JudquestionEditor extends Component{ this.setState({ question_titlesysl:"" }) + try { + if(value.ops.length>1){ + //单独图片的话 _text是为空的 + this.setState({ + question_titlesysl:JSON.stringify(value), + }) + } + }catch (e) { + + } } else { // 提交到后台的内容需要处理一下; try { @@ -412,7 +431,7 @@ class JudquestionEditor extends Component{ { @@ -249,8 +251,23 @@ class SingleEditor extends Component{ // standard_answers[index] = !standard_answers[index]; this.setState({ standard_answers }) } + + handleShowUploadImage = (url,i) => { + + this.setState({ + url:url, + bindinginputs:i + }) + + } + bindinginputs=(i)=>{ + this.setState({ + bindinginputs:i + }) + + } + onOptionContentChange = (value,quill,index) => { - debugger if (index >= this.state.question_choices.length) { // TODO 新建，然后删除CD选项，再输入题干，会调用到这里，且index是3 return; @@ -261,6 +278,14 @@ class SingleEditor extends Component{ if (!reg.test(_text)) { // 处理编辑器内容为空 texts=""; + try { + if(value.ops.length>1){ + //单独图片的话 _text是为空的 + texts=JSON.stringify(value); + } + }catch (e) { + + } } else { if(_text.length>=500){ var result = _text.substring(0,450); @@ -318,6 +343,16 @@ class SingleEditor extends Component{ this.setState({ question_titleysl:"" }) + try { + if(value.ops.length>1){ + //单独图片的话 _text是为空的 + this.setState({ + question_titleysl:JSON.stringify(value), + }) + } + }catch (e) { + + } } else { try { let texts = JSON.stringify(value); @@ -341,6 +376,16 @@ class SingleEditor extends Component{ this.setState({ question_titlesysl:"" }) + try { + if(value.ops.length>1){ + //单独图片的话 _text是为空的 + this.setState({ + question_titlesysl:JSON.stringify(value), + }) + } + }catch (e) { + + } } else { try { let texts = JSON.stringify(value); @@ -363,7 +408,7 @@ class SingleEditor extends Component{ } render() { - let { question_title, question_score, question_type, question_choices, standard_answers,question_titles,question_titlesysl} = this.state; + let { question_title, question_score, question_type, question_choices, standard_answers,question_titles,question_titlesysl,bindinginputs} = this.state; let { question_id, index, exerciseIsPublish, // question_title, // question_type, @@ -417,6 +462,19 @@ class SingleEditor extends Component{ .signleEditor .quill_editor_for_react_area .ql-container .ql-editor p{ font-family: MicrosoftYaHei; } + .content_editorMd_show{ + display: flex !important; + margin-top:0px !important; + border-radius:2px !important; + max-width: 1056px !important; + word-break:break-all !important; + border:1px solid rgba(221,221,221,1) !important; + } + .contestedtext{ + font-size:14px; + font-family:MicrosoftYaHei; + color:rgba(172,172,172,1); + } `}

{/* {!question_id ? '新建' : '编辑'} */} @@ -426,7 +484,7 @@ class SingleEditor extends Component{ { item===undefined||item===null||item===""? - this.onOptionContentChange(value,quill,index)} - /> +

+ { + bindinginputs===null||bindinginputs!==index? +
this.bindinginputs(index)}> + {/*

请您输入选项

*/} +
: + this.onOptionContentChange(value,quill,index)} + showUploadImage={(url)=>this.handleShowUploadImage(url,index)} + /> + + } +
: - this.onOptionContentChange(value,quill,index)} - /> +
+ { + bindinginputs===null||bindinginputs!==index? +
this.bindinginputs(index)}> + + this.handleShowUploadImage(url,index)} + /> +
+ : + this.onOptionContentChange(value,quill,index)} + showUploadImage={(url)=>this.handleShowUploadImage(url,index)} + /> + } + +
} @@ -509,7 +593,7 @@ class SingleEditor extends Component{