m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

调整

Browse Source
dev_aliyun2
杨树林 5 years ago committed by harry
parent 6fec75e59c
commit da7a5def79
4 changed files with 283 additions and 73 deletions
Show Stats Download Patch File Download Diff File

23
public/react/src/common/quillForEditor/ImageBlot.js
Unescape View File

@ -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';
ImageBlot.tagName = 'img';

164
public/react/src/modules/question/component/ChoquesEditor.js
Unescape View File

@ -65,10 +65,12 @@ class ChoquesEditor extends Component {
question_title: this.props.question_title !== undefined ? JSON.parse(this.props.question_title) : "",
question_type: this.props.question_type || 0,
question_score: this.props.question_score || this.props.init_question_score,
question_titles: this.props.question_titles !== undefined ? JSON.parse(this.props.question_titles) : "",
question_titlesysl: this.props.question_titlesysl || '',
question_titleysl: this.props.question_title || '',
item_banksedit: [],
question_titles: this.props.question_titles!==undefined?JSON.parse(this.props.question_titles):"",
question_titlesysl:this.props.question_titlesysl||'',
question_titleysl:this.props.question_title || '',
item_banksedit:[],
bindinginputs:null,
url:"",
}
}
addOption = () => {
@ -165,7 +167,14 @@ class ChoquesEditor extends Component {
this.props.onEditorCancel()
}
handleShowUploadImage = (url,i) => {
this.setState({
url:url,
bindinginputs:i
})
}
componentDidMount = () => {
try {
@ -218,10 +227,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);
@ -278,40 +299,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:"",
})
}
}
}
onContentChanges = (value, quill) => {
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:"",
})
}
@ -320,7 +369,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,
@ -372,6 +421,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);
}
`}</style>
<p className="mb10 clearfix">
{/* {!question_id ? '新建' : '编辑'} */}
@ -381,8 +444,8 @@ class ChoquesEditor extends Component {
<QuillForEditor
autoFocus={true}
imgAttrs={{ width: '146px', height: '136px' }}
style={{ height: '155px' }}
imgAttrs={{width: '200px', height: '200px'}}
style={{ height: '155px'}}
placeholder="请您输入题干"
options={options}
value={question_title}
@ -396,7 +459,9 @@ class ChoquesEditor extends Component {
<span className="xingtigans fl"><span className="xingtigan">答案选项：</span>点击选项可设置正确答案</span>
</div>
{question_choices.map((item, index) => {
{question_choices.map( (item, index) => {
// console.log("question_choices");
// console.log(item);
const bg = standard_answers[index] ? 'check-option-bg' : ''
return <div key={index} className={index > 0 ? "df optionRow mt15" : "df optionRow"} >
{/* 点击设置答案 */}
@ -412,26 +477,52 @@ class ChoquesEditor extends Component {
<div style={{ flex: '0 0 1038px' }}>
{
item === undefined || item === null || item === "" ?
<QuillForEditor
autoFocus={false}
imgAttrs={{width: '146px', height: '136px'}}
style={{ height: '166px'}}
placeholder="请您输入选项"
options={options}
value={item}
onContentChange={(value, quill) => this.onOptionContentChange(value, quill, index)}
/>
item===undefined||item===null||item===""?
<div style={{width:'100%'}}>
{
bindinginputs===null||bindinginputs!==index?
<div className="content_editorMd_show" onClick={()=>this.bindinginputs(index)}>
{/*<p className="contestedtext">请您输入选项</p>*/}
</div>:
<QuillForEditor
autoFocus={false}
imgAttrs={{width: '200px', height: '200px'}}
style={{ height: '166px'}}
placeholder="请您输入选项"
options={options}
value={item}
onContentChange={(value,quill) => this.onOptionContentChange(value,quill,index)}
showUploadImage={(url)=>this.handleShowUploadImage(url,index)}
/>
}
</div>
:
<QuillForEditor
autoFocus={false}
imgAttrs={{width: '146px', height: '136px'}}
style={{ height: '166px'}}
placeholder="请您输入选项"
options={options}
value={JSON.parse(item)}
onContentChange={(value, quill) => this.onOptionContentChange(value, quill, index)}
/>
<div style={{width:'100%'}}>
{
bindinginputs===null||bindinginputs!==index?
<div className="content_editorMd_show" onClick={()=>this.bindinginputs(index)}>
<QuillForEditor
readOnly={true}
value={JSON.parse(item)}
showUploadImage={(url)=>this.handleShowUploadImage(url,index)}
/>
</div>
:
<QuillForEditor
autoFocus={false}
imgAttrs={{width: '200px', height: '200px'}}
style={{ height: '166px'}}
placeholder="请您输入选项"
options={options}
value={JSON.parse(item)}
onContentChange={(value,quill) => this.onOptionContentChange(value,quill,index)}
showUploadImage={(url)=>this.handleShowUploadImage(url,index)}
/>
}
</div>
}
</div>
@ -464,12 +555,13 @@ class ChoquesEditor extends Component {
<div className="mt10"></div>
<QuillForEditor
autoFocus={false}
imgAttrs={{ width: '146px', height: '136px' }}
style={{ height: '166px' }}
imgAttrs={{width: '200px', height: '200px'}}
style={{height: '166px' }}
placeholder="请您输入题目解析"
options={options}
value={question_titles}
onContentChange={this.onContentChanges}
/>
</div>

27
public/react/src/modules/question/component/JudquestionEditor.js
Unescape View File

@ -298,7 +298,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 {
@ -322,6 +331,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 {
@ -400,8 +419,8 @@ class JudquestionEditor extends Component {
<QuillForEditor
autoFocus={true}
imgAttrs={{ width: '146px', height: '136px' }}
style={{ height: '155px' }}
imgAttrs={{width: '200px', height: '200px'}}
style={{ height: '155px'}}
placeholder="请您输入题干"
options={options}
value={question_title}
@ -450,7 +469,7 @@ class JudquestionEditor extends Component {
<QuillForEditor
autoFocus={false}
imgAttrs={{width: '146px', height: '136px'}}
imgAttrs={{width: '200px', height: '200px'}}
style={{height: '166px' }}
placeholder="请您输入题目解析"
options={options}

142
public/react/src/modules/question/component/SingleEditor.js
Unescape View File

@ -66,10 +66,12 @@ class SingleEditor extends Component {
question_title: this.props.question_title !== undefined ? JSON.parse(this.props.question_title) : "",
question_type: this.props.question_type || 0,
question_score: this.props.question_score || this.props.init_question_score,
question_titles: this.props.question_titles !== undefined ? JSON.parse(this.props.question_titles) : "",
question_titlesysl: this.props.question_titlesysl || '',
question_titleysl: this.props.question_title || '',
item_banksedit: [],
question_titles: this.props.question_titles!==undefined?JSON.parse(this.props.question_titles):"",
question_titlesysl:this.props.question_titlesysl||'',
question_titleysl:this.props.question_title || '',
item_banksedit:[],
url:"",
bindinginputs:null
}
}
addOption = () => {
@ -237,8 +239,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;
@ -249,6 +266,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);
@ -306,6 +331,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);
@ -329,6 +364,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);
@ -351,7 +396,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,
@ -405,6 +450,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);
}
`}</style>
<p className="mb10 clearfix">
{/* {!question_id ? '新建' : '编辑'} */}
@ -414,8 +472,8 @@ class SingleEditor extends Component {
<QuillForEditor
autoFocus={true}
imgAttrs={{ width: '146px', height: '136px' }}
style={{ height: '155px' }}
imgAttrs={{width: '200px', height: '200px'}}
style={{ height: '155px'}}
placeholder="请您输入题干"
options={options}
value={question_title}
@ -443,26 +501,52 @@ class SingleEditor extends Component {
{/* </Tooltip> */}
<div style={{ flex: '0 0 1038px' }}>
{
item === undefined || item === null || item === "" ?
<QuillForEditor
autoFocus={false}
imgAttrs={{width: '146px', height: '136px'}}
style={{ height: '166px'}}
placeholder="请您输入选项"
options={options}
value={item}
onContentChange={(value, quill) => this.onOptionContentChange(value, quill, index)}
/>
item===undefined||item===null||item===""?
<div style={{width:'100%'}}>
{
bindinginputs===null||bindinginputs!==index?
<div className="content_editorMd_show" onClick={()=>this.bindinginputs(index)}>
{/*<p className="contestedtext">请您输入选项</p>*/}
</div>:
<QuillForEditor
autoFocus={false}
imgAttrs={{width: '200px', height: '200px'}}
style={{ height: '166px'}}
placeholder="请您输入选项"
options={options}
value={item}
onContentChange={(value,quill) => this.onOptionContentChange(value,quill,index)}
showUploadImage={(url)=>this.handleShowUploadImage(url,index)}
/>
}
</div>
:
<QuillForEditor
autoFocus={false}
imgAttrs={{width: '146px', height: '136px'}}
style={{ height: '166px'}}
placeholder="请您输入选项"
options={options}
value={JSON.parse(item)}
onContentChange={(value, quill) => this.onOptionContentChange(value, quill, index)}
/>
<div style={{width:'100%'}}>
{
bindinginputs===null||bindinginputs!==index?
<div className="content_editorMd_show" onClick={()=>this.bindinginputs(index)}>
<QuillForEditor
readOnly={true}
value={JSON.parse(item)}
showUploadImage={(url)=>this.handleShowUploadImage(url,index)}
/>
</div>
:
<QuillForEditor
autoFocus={false}
imgAttrs={{width: '200px', height: '200px'}}
style={{ height: '166px'}}
placeholder="请您输入选项"
options={options}
value={JSON.parse(item)}
onContentChange={(value,quill) => this.onOptionContentChange(value,quill,index)}
showUploadImage={(url)=>this.handleShowUploadImage(url,index)}
/>
}
</div>
}
@ -497,8 +581,8 @@ class SingleEditor extends Component {
<div className="mt10"></div>
<QuillForEditor
autoFocus={false}
imgAttrs={{ width: '146px', height: '136px' }}
style={{ height: '166px' }}
imgAttrs={{width: '200px', height: '200px'}}
style={{height: '166px' }}
placeholder="请您输入题目解析"
options={options}
value={question_titles}

Write Preview
Loading…
Cancel
Save