React TinyMce：“tinymce”未定义 no-undef

Question

在使用tinymce https://github.com/pc-magas/tinymce_demo的示例演示中，我尝试通过https://www.tinymce.com/docs/api/tinymce/tinymce中提供的api更改tinymce的内容。 editorcommands/在我的例子中，我希望当单击“hello”按钮时将“Hello”字符串插入编辑器的内容中。

尝试执行此操作的代码是（https://github.com/pc-magas/tinymce_demo/blob/master/src/MyEditor.js）：

import React, { Component } from 'react';
import TinyMCE from 'react-tinymce';


/**
 * Basic Editor
 */
class MyEditor extends Component {

    constructor(props) {
        super(props)
        this.state={text:''}
        this.tinyMCE=null;
    }

    onTextChange(e) { 
        this.setState({text:e.target.getContent()})
    }


    doStuffWhenFileChanges(event) {
      event.preventDefault();
      console.log(this.tinyMCE);
      this.tinyMCE.context.execCommand('mceInsertContent', false ,"Hello");
    }


    render(){
      return (
        <div>
          <TinyMCE
            ref = { (el)=>{ this.tinyMCE=el; } }
            content = ""
            config = {{
              plugins: 'link image code paste autolink media autoresize',
              toolbar: 'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright | media image link'
            }}
            onChange={this.onTextChange.bind(this)}
          />
          <button onClick={ this.doStuffWhenFileChanges.bind(this) } >Hello</button>
        </div>
      )
    }

}


export default MyEditor;

但我收到以下错误：

类型错误：this.tinyMCE.context.execCommand 不是函数

如何访问链接中提供的 api？

Answer 1

您可以通过window变量访问它。所以这一行：

this.tinyMCE.context.execCommand('mceInsertContent', false ,"Hello");

将：

window.tinymce.execCommand('mceInsertContent', false ,"Hello");