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

Question

在使用 tinymce https://github.com/pc-magas/tinymce_demo I try to change the contenct of tinymce via the api provided in https://www.tinymce.com/docs/api/tinymce/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;

但我收到以下错误：

TypeError: this.tinyMCE.context.execCommand is not a function

如何访问 link 中提供的 api？

Answer 1

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

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

将是：

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

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

React TinyMce: 'tinymce' is not defined no-undef

tinymce

reactjs