Site Tools


Differences

This shows you the differences between two versions of the page.

Link to this comparison view

blog:2016:07:11:using-react-jsonschema-form-with-tinymce-widget [2020-04-26] – created dcaiblog:2016:07:11:using-react-jsonschema-form-with-tinymce-widget [2020-04-29] (current) dcai
Line 1: Line 1:
 +==== 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>