Bryntum Support Forums

import React, { Component, Fragment } from "react";
import { Input, Modal } from "antd";
import ReactDOM from "react-dom";
import FroalaEditor from "react-froala-wysiwyg";
import { GlobalEvents } from "@bryntum/grid";

// Require Editor JS files.
import "froala-editor/js/froala_editor.pkgd.min.js";

// Require Editor CSS files.
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";

// Require Font Awesome.
import "font-awesome/css/font-awesome.css";

export default class Richtext extends Component {
  state = { value: "", modal: true };

  getValue() {
    return this.state.value;
  }

  setValue(value) {
    this.setState({ value: value });
  }

  isValid() {
    return true;
  }

  focus() {
    this.setState((prev) => ({
      ...prev,
      modal: true,
    }));
  }

  onChangeHandler(value) {
    console.log("onChange", value);
    this.setState((prev) => ({
      ...prev,
      value: value,
    }));
  }

  handleOk = () => {
    this.setState((prev) => ({
      ...prev,
      modal: false,
    }));
   };

  handleCancel = () => {
    this.setState((prev) => ({
      ...prev,
      modal: false,
    }));
  };

  render() {
    return (
      <Modal
        title="Details"
        open={this.state.modal}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
      >
        <FroalaEditor
          tag="textarea"
          model={this.state.value}
          onModelChange={this.onChangeHandler.bind(this)}
        />
      </Modal>
    );
  }
}

record.set('fieldName', newValue);