React TinyMce：'tinymce' 未定义 no-undef

Question

在使用 tinymce https://github.com/pc-magas/tinymce_demo 的示例演示中，我尝试通过 https://www.tinymce.com/docs/api/tinymce/tinymce.editorcommands/ 中提供的 api 更改 tinymce 的内容，在我的情况下，我希望单击“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;

但我收到以下错误：

TypeError: this.tinyMCE.context.execCommand 不是函数

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

Answer 1

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

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

将是：

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