toHTML delay

dev_forum
hjm 5 years ago
parent dd98f0664d
commit c7706f29d1

@ -7,10 +7,8 @@ export function markdownToHTML(oldContent, selector) {
window.$('#md_div').html('')
// markdown to html
try {
var markdwonParser = window.editormd.markdownToHTML("md_div", {
markdown: oldContent,
markdown: oldContent, // .replace(/▁/g,"▁▁▁"),
emoji: true,
htmlDecode: "style,script,iframe", // you can filter tags decode
taskList: true,

@ -1,27 +1,44 @@
import React,{ Component } from "react";
import { markdownToHTML } from 'educoder'
/**
selector 需要传入唯一的selector作为id不然会引起冲突
delay 如果有公式需要传入delay={true}
*/
class MarkdownToHtml extends Component{
constructor(props){
super(props);
this.state={
}
}
_markdownToHTML = (content, selector) => {
if (this.props.delay == true) {
(function(content, selector) {
// console.log('selector: ', selector)
setTimeout(() => {
markdownToHTML(content, selector)
}, 600)
})(content, selector)
} else {
markdownToHTML(content, selector)
}
}
componentDidUpdate = (prevProps) => {
if (this.props.content) {
if ( prevProps.content != this.props.content ) {
markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
this._markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
}
}
}
componentDidMount () {
this.props.content && markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
this.props.content && this._markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
}
render(){
const { style, className } = this.props
return(
<div id="memo_content_editorMd" className={`new_li markdown-body ${this.props.className} markdown_to_html_${this.props.selector || ''}`}
<div id="memo_content_editorMd" className={`new_li markdown-body ${className} markdown_to_html_${this.props.selector || ''}`}
// dangerouslySetInnerHTML={{__html: markdownToHTML(this.props.content)}}
style={style}
>
</div>
)

@ -7,7 +7,7 @@ import {
} from 'antd';
import axios from 'axios'
import { qNameArray } from './common'
import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
import QestionDisplayHeader from './QestionDisplayHeader'
const { TextArea } = Input;
const confirm = Modal.confirm;
@ -68,10 +68,14 @@ class MainDisplay extends Component{
{ standard_answer[0] &&
<React.Fragment>
<div style={{color: '#05101A'}} className="font-16 mb5 font-bd">参考答案</div>
<div className="mainQuestionDisplay markdown-body"
<MarkdownToHtml content={standard_answer[0]} selector={'answer_' + qNumber}
delay={true} className=""
></MarkdownToHtml>
{/* <div className="mainQuestionDisplay markdown-body"
dangerouslySetInnerHTML={{__html: markdownToHTML(standard_answer[0])}}
>
</div>
</div> */}
</React.Fragment>
}

@ -7,7 +7,7 @@ import {
} from 'antd';
import axios from 'axios'
import { qNameArray } from './common'
import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
import QestionDisplayHeader from './QestionDisplayHeader'
const { TextArea } = Input;
const confirm = Modal.confirm;
@ -108,8 +108,12 @@ class NullDisplay extends Component{
<span className="lineh-40">答案填空{index+1}</span>
<div className="answers">
{ answers.answer_text.map((item, itemIndex) => {
return <span className="answer" key={itemIndex}>{item}</span>
return <MarkdownToHtml
className="answer" key={itemIndex} delay={true}
content={item} selector={'null_' + (index + 1) + '' + (itemIndex + 1)}
></MarkdownToHtml>
})}
{/* <span className="answer" key={itemIndex}>{item}</span> */}
</div>
</div>
})

@ -7,7 +7,7 @@ import {
} from 'antd';
import axios from 'axios'
import { qNameArray } from './common'
import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
@ -80,8 +80,13 @@ class QestionDisplayHeader extends Component{
</React.Fragment>}
</div>
</div>
<span className="markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML(question_title)}}
style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}></span>
{ question_title &&
<MarkdownToHtml content={question_title} selector={'qtitle_' + (index + 1)} style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}
delay={true}
></MarkdownToHtml>
// <div className="markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML(question_title)}}
// style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}></div>
}
</React.Fragment>
)
}

@ -7,7 +7,7 @@ import {
} from 'antd';
import axios from 'axios'
import QestionDisplayHeader from './QestionDisplayHeader'
import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
@ -100,16 +100,22 @@ class SingleDisplay extends Component{
return (
<div className="mb10 clearfix" key={optionIndex}>
<Radio disabled className="fl lineh-20" checked={item.standard_boolean}>{prefix}</Radio>
<span style={{ display: 'inline-block'}} className="markdown-body fl"
dangerouslySetInnerHTML={{__html: markdownToHTML(item.choice_text)}}></span>
<MarkdownToHtml content={item.choice_text} selector={'single_' + (index + 1) + '' + (optionIndex + 1)} style={{ float: 'left', display: 'inline-block' }}
delay={true}
></MarkdownToHtml>
{/* <span style={{ display: 'inline-block'}} className="markdown-body fl"
dangerouslySetInnerHTML={{__html: markdownToHTML(item.choice_text)}}></span> */}
</div>)
} else {
return (
<div className="mb10 clearfix" key={optionIndex}>
<Checkbox disabled className="fl lineh-20" checked={item.standard_boolean}>{prefix}</Checkbox>
<span style={{ display: 'inline-block'}} className="markdown-body fl"
dangerouslySetInnerHTML={{__html: markdownToHTML(item.choice_text)}}></span>
<MarkdownToHtml content={item.choice_text} selector={'single_' + (index + 1)+ '' + (optionIndex + 1)} style={{ float: 'left', display: 'inline-block' }}
delay={true}
></MarkdownToHtml>
{/* <span style={{ display: 'inline-block'}} className="markdown-body fl"
dangerouslySetInnerHTML={{__html: markdownToHTML(item.choice_text)}}></span> */}
</div>)
}
})}

Loading…
Cancel
Save