Modal中显示HTML字符串

2024-03-24 14:13:46

最近在做的工具有个需求，因为有些变量的设置，真的很多人填错，想要给变量加个图文并茂的说明（好吧，我们的工具变量功能确实是有些复杂）。

好了，需求说完，说做就做。

先加个Modal

这里还好说，我们的界面是用react做的，就用antd的modal加进来就好。

antd关于modal的说明页面https://ant.design/components/modal-cn/


import React from 'react';
import { Modal, Button } from 'antd';

class Option extends React.Component {
  state = { visible: false }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
        </Modal>
      </div>
    );
  }
}
export default Option

点击按钮，显示正常

Modal里面显示HTML字符串

下一步，在modal中试着加个html字符串

const modalContent = `<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; line-height: 24px; color: rgb(51, 51, 51); text-align: justify; font-family: arial; white-space: normal; background-color: rgb(255, 255, 255);">
    <span class="bjh-p"><span class="bjh-strong" style="font-size: 18px; font-weight: 700;">辽宁男篮夺冠</span>，辽宁男篮在2018CBA决赛当中以总比分4比0的比分战胜了浙江广厦队，队史首次拿到了CBA的总冠军头衔。北京时间4月22日晚间，新赛季CBA总决赛第四场在辽宁队主场开启，主场辽宁拿下对手登顶。</span>
</p>
<p>
    <img class="large" src="http://t11.baidu.com/it/u=1330083070,2886574451&fm=173&app=25&f=JPEG?w=640&h=423&s=3621920902A1C2F00C30578E0300A084"/>
</p>
    <br/>
</p>`

        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width="800"
        >
          <div id="modalHTMLTest">Please try again</div>
          <script>
            {document.getElementById("modalHTMLTest")? 
             document.getElementById("modalHTMLTest").innerHTML=modalContent
            :null}
          </script>
        </Modal>

这样，图文并茂的modal就出现了。

这bug怎么办？

但是，代码写到这，有个bug，我也不知道该怎么处理，就是第一次打开这个网页的时候，第一次打开modal，因为modal里面的div元素还没有建立，这时候document.getElementById("modalHTMLTest")的结果会是null。

因为我们的工具没有外部用户，所以暂时这样也还行，但是真的是这里求解决方案，有知道的小伙伴麻烦请告知。

那么HTML字符串哪里来？

嗯，最后再说一个，图文并茂的HTML字符串可以用https://ueditor.baidu.com/website/onlinedemo.html来编辑并得到html源码。

其实在做这个的时候也有考虑用.md文件来写，但是我真的是不知道js文件中怎么引用写好的.md文件（其实本质是不知道前端代码中怎么能用fs吧），只好作罢，甚至也尝试使用了md转html字符串的一些库。

但是对于不太会写md的我，觉得html编辑器也好吧，暂时能够解决问题。

在这里也求更好的解决方案啦。

作为前端小白，叩谢~

码农公寓

相关文章