Question

我正在尝试将我在javascript中启动的简单iframe设计模式实现为React。我的纯js代码：

<body>
<div id="textEditor">
    <button id="action" title="Bold"><b>Click me</b></button>
    <div id="richTextArea"></div>
        <iframe id="theWYSIWYG" name="theWYSIWYG" frameborder="0"></iframe>
</div>

<script>
    window.addEventListener("load", function () {
        var editor = theWYSIWYG.document;
        editor.designMode = 'on';
</script>

这是正常的。但是尝试在React中：

class ExamCreate extends React.Component {
constructor(props) {
    super(props);
    this.examBody = null
}
state = {
    modalStage: 0,
    newExamName: '',
    newExamDescription: '',
    newExamTime: '',
}
componentDidUpdate = () => {
        var a = this.examBody.document;
        a.designMode = 'on';
}

和jsx：

<iframe ref={examBody => this.examBody = examBody} 
        id="examBody" name="examBody" frameBorder="0"></iframe>

但是我根本无法访问裁判的文档。如何设置iframe参考的设计模式？

Answer 1

我是React的新手，这让我感到困惑，为什么不把this.state写在构造函数中？

Answer 2

我设法通过添加contentWindow属性来解决该问题，

let editor = this.examBody.contentWindow.document;
editor.designMode = 'on'

我不知道为什么Reacat会有所不同，为什么您不能直接访问该文档，希望它可以帮助某人...

Answer 3

我遇到了同样的问题。我在 React 之外的 body 标签中解决了：

  <body onLoad='enableEditor()'>

在正文结束标记之前，我有一个脚本

<script type='text/javascript'>

      function enableEditor () {
          todoEditor.document.designMode = 'On'
          todoEditor.focus();
    }

</script>

todoEditor 是我的名称 (iframe name='todoEditor')

如何启动iframe的designMode？

3 个答案: