Using react-jsonschema-form with TinyMCE widget

Building HTML form is tedious job. But I recently found this react component called 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:

const UISchema = {
  description: {
    'ui:widget': (props) => {
      return (
        <TinyMCE
          content={props.value}
          onChange={event => props.onChange(event.target.getContent())}
        />
      );
    }
  }
}
comments powered by Disqus