MarkdownToHtml

public/react/src/common/TextUtil.js

@@ -1,5 +1,5 @@
 import { bytesToSize } from 'educoder';
-export function markdownToHTML(oldContent) {
+export function markdownToHTML(oldContent, selector) {
     window.$('#md_div').html('')
     // markdown to html
     var markdwonParser = window.editormd.markdownToHTML("md_div", {
@@ -12,6 +12,9 @@ export function markdownToHTML(oldContent) {
         sequenceDiagram: true // 默认不解析
     });
     const content = window.$('#md_div').html()
+    if (selector) {
+        window.$(selector).html(content)
+    }
     return content
 }
 

public/react/src/common/components/markdown/MarkdownToHtml.js

@@ -6,40 +6,23 @@ class MarkdownToHtml extends Component{
     this.state={
     }
   }
-  // componentDidUpdate = (prevProps) => {
+  componentDidUpdate = (prevProps) => {
-  //   if (this.props.content) {
+    if (this.props.content) {
-  //     if ( prevProps.content != this.props.content ) {
+      if ( prevProps.content != this.props.content ) {
-  //       if (!this.shixunDescr) {
+        markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
-  //           this.shixunDescr = window.editormd.markdownToHTML("memo_content_editorMd", {
+      }
-  //             markdown: this.props.content,
+    }
-  //             htmlDecode: "style,script,iframe",  // you can filter tags decode
+  }
-  //             taskList: true,
+  componentDidMount () {
-  //             tex: true,  // 默认不解析
+    this.props.content && markdownToHTML(this.props.content, `.markdown_to_html_${this.props.selector || ''}`)
-  //             flowChart: true,  // 默认不解析
+    
-  //             sequenceDiagram: true // 默认不解析
+  }
-  //         });
-  //       } else {
-  //         this.shixunDescr.html(this.props.content)
-  //       }
-  //     }
-  //   }
-  // }
-  // componentDidMount () {
-  //   if (!this.shixunDescr) {
-  //       this.shixunDescr = window.editormd.markdownToHTML("memo_content_editorMd", {
-  //         markdown: this.props.content,
-  //         htmlDecode: "style,script,iframe",  // you can filter tags decode
-  //         taskList: true,
-  //         tex: true,  // 默认不解析
-  //         flowChart: true,  // 默认不解析
-  //         sequenceDiagram: true // 默认不解析
-  //     });
-  //   }
-  // }
   render(){
     
     return(
-      <div id="memo_content_editorMd" className="new_li markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML(this.props.content)}}>
+      <div id="memo_content_editorMd" className={`new_li markdown-body ${this.props.className} markdown_to_html_${this.props.selector || ''}`}
+        // dangerouslySetInnerHTML={{__html: markdownToHTML(this.props.content)}}
+      >
       </div>
     )
   }

public/react/src/modules/courses/boards/TopicDetail.js

@@ -24,7 +24,7 @@ import '../../forums/RightSection.css'
 import './TopicDetail.css'
 import '../common/courseMessage.css'
 import { Pagination, Tooltip } from 'antd'
-import { bytesToSize, ConditionToolTip } from 'educoder'
+import { bytesToSize, ConditionToolTip, markdownToHTML, MarkdownToHtml } from 'educoder'
 import SendToCourseModal from '../coursesPublic/modal/SendToCourseModal'
 import CBreadcrumb from '../common/CBreadcrumb'
 import { generateComments, generateChildComments, _findById, handleContentBeforeCreateNew, addNewComment
@@ -87,15 +87,6 @@ class TopicDetail extends Component {
                   replies_count: response.data.data.total_replies_count
                 }, {...this.state.memo})
               }, () => {
-                setTimeout(()=>{
-                  var shixunDescr = window.editormd.markdownToHTML("memo_content_editorMd", {
-                      htmlDecode: "style,script,iframe",  // you can filter tags decode
-                      taskList: true,
-                      tex: true,  // 默认不解析
-                      flowChart: true,  // 默认不解析
-                      sequenceDiagram: true // 默认不解析
-                  });
-                }, 200)
               })
 
               // const { memo_replies, memo } = response.data;
@@ -181,13 +172,13 @@ class TopicDetail extends Component {
         // md渲染content，等xhr执行完（即memoLoading变化），memo.content更新后初始化md
         
           setTimeout(()=>{
-            var shixunDescr = window.editormd.markdownToHTML("memo_content_editorMd", {
+            // var shixunDescr = window.editormd.markdownToHTML("memo_content_editorMd", {
-                htmlDecode: "style,script,iframe",  // you can filter tags decode
+            //     htmlDecode: "style,script,iframe",  // you can filter tags decode
-                taskList: true,
+            //     taskList: true,
-                tex: true,  // 默认不解析
+            //     tex: true,  // 默认不解析
-                flowChart: true,  // 默认不解析
+            //     flowChart: true,  // 默认不解析
-                sequenceDiagram: true // 默认不解析
+            //     sequenceDiagram: true // 默认不解析
-            });
+            // });
           }, 200)
       }
       
@@ -629,13 +620,8 @@ class TopicDetail extends Component {
 
                     
                     <div className="padding40 memoContent new_li">
-                      <div id="memo_content_editorMd" className="new_li">
+                      <MarkdownToHtml content={memo.content}></MarkdownToHtml>
-                        <textarea style={{'display': 'none'}}>
-                          {memo.content}
-                        </textarea>
-                      </div>
                     </div>
-{/* style={{ paddingTop: '0px'}} */}
                     <div className="padding40 bor-bottom-greyE" >
                         <div className="mt10 mb20">
                           {/* ${memo.user_praise ? '' : ''}  */}