|
|
@ -1,5 +1,6 @@
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
import { markdownToHTML } from 'educoder'
|
|
|
|
import { markdownToHTML } from 'educoder'
|
|
|
|
|
|
|
|
import './MarkdownToHtml.css'
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
selector 需要传入唯一的selector作为id,不然会引起冲突
|
|
|
|
selector 需要传入唯一的selector作为id,不然会引起冲突
|
|
|
|
delay 如果有公式,需要传入delay={true}
|
|
|
|
delay 如果有公式,需要传入delay={true}
|
|
|
@ -14,9 +15,9 @@ class MarkdownToHtml extends Component{
|
|
|
|
if (this.props.delay == true) {
|
|
|
|
if (this.props.delay == true) {
|
|
|
|
(function(content, selector) {
|
|
|
|
(function(content, selector) {
|
|
|
|
// console.log('selector: ', selector)
|
|
|
|
// console.log('selector: ', selector)
|
|
|
|
setTimeout(() => {
|
|
|
|
// setTimeout(() => {
|
|
|
|
markdownToHTML(content, selector)
|
|
|
|
markdownToHTML(content, selector)
|
|
|
|
}, 600)
|
|
|
|
// }, 600)
|
|
|
|
})(content, selector)
|
|
|
|
})(content, selector)
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
markdownToHTML(content, selector)
|
|
|
|
markdownToHTML(content, selector)
|
|
|
@ -25,18 +26,20 @@ class MarkdownToHtml extends Component{
|
|
|
|
componentDidUpdate = (prevProps) => {
|
|
|
|
componentDidUpdate = (prevProps) => {
|
|
|
|
if (this.props.content) {
|
|
|
|
if (this.props.content) {
|
|
|
|
if ( prevProps.content != this.props.content ) {
|
|
|
|
if ( prevProps.content != this.props.content ) {
|
|
|
|
this._markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
|
|
|
|
this._markdownToHTML(this.props.content, `markdown_to_html_${this.props.selector || ''}`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
componentDidMount () {
|
|
|
|
componentDidMount () {
|
|
|
|
this.props.content && this._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(){
|
|
|
|
render(){
|
|
|
|
const { style, className } = this.props
|
|
|
|
const { style, className } = this.props
|
|
|
|
|
|
|
|
let _selector = `markdown_to_html_${this.props.selector || ''}`
|
|
|
|
|
|
|
|
|
|
|
|
return(
|
|
|
|
return(
|
|
|
|
<div id="memo_content_editorMd" className={`new_li markdown-body ${className} markdown_to_html_${this.props.selector || ''}`}
|
|
|
|
<div id={_selector } className={`markdownToHtml new_li markdown-body ${className} ${_selector}`}
|
|
|
|
// dangerouslySetInnerHTML={{__html: markdownToHTML(this.props.content)}}
|
|
|
|
// dangerouslySetInnerHTML={{__html: markdownToHTML(this.props.content)}}
|
|
|
|
style={style}
|
|
|
|
style={style}
|
|
|
|
>
|
|
|
|
>
|
|
|
|