editor

Rich content editor for React

Sep 25, 2020
Rich content editor for React

React editor

Rich content editor for React.

View Demo View Github

<FormBuilder />

Form editor component

FormBuilder Props

  • components: custom form editor fields.
  • getComponents: map form editor fields.
  • data: form editor data.
  • showSimple: form editor correct field values.
  • uploadUrl: form editor url for file upload.
  • downloadUrl: form editor url for file download.
  • uploadImages: form editor upload by url images for options.
  • placeholder: default text string for new items in radio buttons and checkboxes.
  • onChange: onChange handler will be called when form data will be changed.
  • onCopy: onCopy handler will be called when copy element.
  • onPreviewOpen: onPreviewOpen handler will be called when preview modal will be opened.
  • onPreviewClose: onPreviewClose handler will be called when preview modal will be closed.

Form editor fields

const formEditorItems = [ { type: 'Editor', name: 'Текст', icon: 'font', renderInfo: props => props.content, component: Editor, formComponent: EditorComponent, props: { content: '' }, staticContent: true, fields: [ { type: 'editor', label: 'Текст', prop: 'content' } ] } ];
  • type: type of item. Must be unique.
  • name: text in toolbar.
  • icon: icon in toolbar. Use fontawesome version 4.
  • renderInfo: function renders data in draggable row.
  • component: component which will be respresent in draggable row.
  • formComponent: component which will be respresent in form.
  • props: field props.
  • staticContent: true if field isn't changable.
  • fields: array of fields, which will be shown in field edit modal.

Edit modal field types

  • editor: text editor field.
  • multiple: field for multiple items such as radio buttons and checkboxes.
  • input: input field.
  • switch: switch field.

<FormGenerator />

  • values: form values.
  • data: form editor data.
  • onSubmit: onSubmit handler will be called when a user submits the form and all validation passes.

GitHub

Recommended