import React, { Component } from "react"; import TPMMDEditor from '../../../modules/tpm/challengesnew/TPMMDEditor' import { markdownToHTML } from 'educoder' import './DMDEditor.css' // 需要父组件通过toShowMode、toMDMode 来控制,一次只能打开一个DMDEditor class DMDEditor extends Component { constructor(props) { super(props); this.mdRef = React.createRef() this.state = { mdMode: false, } } toMDMode = () => { this.setState({ mdMode: true }, () => { this.mdRef.current.resize() this.mdRef.current.setValue(this.props.initValue) }) this.props.toMDMode(this) } toShowMode = () => { this.setState({ mdMode: false }) this.props.toShowMode && this.props.toShowMode(this) } onCMBlur = () => { this.toShowMode() } onChange = (val) => { this.props.onChange(val) if (this.state.showError == true) { this.setState({ showError: false }) } } showError = () => { this.mdRef.current.showError() this.setState({ showError: true }) } render() { const { mdMode, showError } = this.state; const { initValue } = this.props; let _style = {} if (showError) { _style.border = '1px solid red' } _style = Object.assign(_style, { display: mdMode == true ? 'none' : '', color: initValue ? '' : '#999', alignItems: 'center', wordBreak: 'break-all' }) return (
) } } export default DMDEditor;