==== Using react-jsonschema-form with TinyMCE widget ====

11 Jul 2016


Building HTML form is tedious job. But I recently found this react component called ''[[https://github.com/rjsf-team/react-jsonschema-form|react-jsonschema-form]]'' it makes my life much easier, you simply define form scheme in JSON, passed it as attribute to form element, then boom, you have your form ready.

The only problem I have is integration with TinyMCE, TinyMCE could easily replace all the textareas defined by react-jsonschema-form but the changes you made in TinyMCE wasn’t picked up by React, I reckon it might be something to do with the onchange event, but fixing it is simple: just install “react-tinymce” package and define a custom widget components, for instance:
<code>
const UISchema = {
  description: {
    'ui:widget': (props) => {
      return (
        <TinyMCE
          content={props.value}
          onChange={event => props.onChange(event.target.getContent())}
        />
      );
    }
  }
}
</code>