Question

我正在使用此官方组件https://www.tiny.cloud/docs/integrations/react/

我想在文档https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent中使用此方法，以便将bbcode定义为编辑器的内容。

但是我得到一个错误：

this.editor.setContent不是函数

这是我的代码

import React, { PureComponent } from 'react';
import { Editor } from '@tinymce/tinymce-react';

/**
 * Comment component.
 */

class Comment extends PureComponent {
  componentDidMount() {
    this.editor.setContent('[b]some[/b] html', { format: 'bbcode' });
  }

  render() {
    return (<Editor
      ref={(editor) => {
        this.editor = editor;
      }}
      apiKey="***"
    />);
  }
}

export default Comment;

Answer 1

在tinymce-react中设置初始内容的正确方法是：

 <Editor
   initialValue="<p>This is the initial content of the editor</p>"    
 />

参考：https://www.tiny.cloud/docs/integrations/react/#4replacetheappjsfile

从source中可以看到，编辑器组件中没有公开您要查找的方法。

Answer 2

我设法使TinyMCE编辑器可以使用bbcode。这是我的代码：

import React, { PureComponent } from 'react';
import { Editor } from '@tinymce/tinymce-react';

/**
 * Comment component.
 */

class Comment extends PureComponent {
  constructor(props) {
    super(props);

    this.state = { content: 'this is a [url=https://google.com]link[/url]' };
    this.handleEditorChange = this.handleEditorChange.bind(this);
  }

  handleEditorChange(content) {
    this.setState({ content });
  }

  render() {
    return (<Editor
      value={this.state.content}
      onEditorChange={this.handleEditorChange}
      apiKey="***"
      init={{
        menubar: '',
        plugins: 'bbcode link code',
        toolbar: '',
      }}
    />);
  }
}

export default Comment;

React TinyMCE编辑器动态设置bbcode内容

2 个答案: