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 is not a function

我怎樣才能訪問該鏈接提供的API？

Answer 1

您可以通過window變量訪問它。因此該行：

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

將是：

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