Question

在使用tinymce https://github.com/pc-magas/tinymce_demo的示例演示中，我尝试通过https://www.tinymce.com/docs/api/tinymce/tinymce.editorcommands/中提供的api来改变tinymce的含义，在我的情况下我希望当＃34;你好＆＃34;点击按钮获取＆＃34; Hello＆＃34;编辑内容中的字符串。

尝试执行此操作的代码是（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");

React TinyMce：＆＃39; tinymce＆＃39;没有定义no-undef

1 个答案: