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

Question

我使用的是这个官方组件https://www.tiny.cloud/docs/integrations/react/

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

这是我的代码

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编辑器与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;