React
Demos
Support
Forum
Download
Search results

Form support

The following sample demonstrates how to get the RichTextEditor value in button click.

Render the RichTextEditor in form.

  <form id="myForm" class="form-vertical">
    <div class="form-group">
      <textarea id="defaultRTE" name="defaultRTE" required maxlength="100" minlength="20" data-msg-containerid="dateError"></textarea>
      <div id="dateError"></div>
    </div>
    <div class="form-btn-section">
      <button id="validateSubmit" class="sample-btn e-control e-btn" type="submit" data-ripple="true">Submit</button>
      <button id="resetbtn" class="sample-btn e-control e-btn" type="reset" data-ripple="true">Reset</button>
    </div>
  </form>

Upon submitting the form, the getValue method will be triggered. Through the FormData class, get the RichTextEditor value.

Source
Preview
index.tsx
index.html
/**
 * RichTextEditor - Form Sample
 */
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-react-richtexteditor';

export class RTE extends React.Component<{}, {}> {
  componentDidMount(): void {
    let option: FormValidatorModel = {
      rules: {
        defaultRTE: {
          required: true,
          minLength: [15, 'Need atleast 8 character length'],
          maxLength:[108, 'Maximum 100 character only']
        }
      }
    };
    let formObject: FormValidator = new FormValidator('#myForm', option);

    document.getElementById('validateSubmit').addEventListener('click', function(e) {
      let form = document.forms.myForm;
      let formData = new FormData(form);
      let rteValue = formData.get('defaultRTE');
      //Use this value to the data base.
      alert(rteValue);
      e.preventDefault();
    });
  }

  render() {
    return (
      <form id="myForm" className="form-vertical">
        <div className="form-group">
          <RichTextEditorComponent id="defaultRTE" name="defaultRTE" className="form-control" height={200} showCharCount={true} maxLength={100} placeholder={'Type something'} value={''}>
            <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
          </RichTextEditorComponent>
        </div>
        <div className="form-btn-section">
          <button id="validateSubmit" className="sample-btn e-control e-btn" type="submit" data-ripple="true">Submit</button>
          <button id="reset-btn" className="sample-btn e-control e-btn" type="reset" data-ripple="true">Reset</button>
        </div>
      </form>
    );
  }
}
ReactDOM.render(<RTE />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title> Syncfusion React RichTextEditor </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
     <link href="//cdn.syncfusion.com/ej2/ej2-react-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        #defaultRTE .e-error {
          position: absolute;
          bottom: 0;
          right: 0;
          z-index: 1000; 
          background: #fde4e4;
          padding: 10px;
        }

        #data-error .e-error {
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #fbd1d1;
            background: #fde4e4;
        }

        .form-btn-section {
          margin-top: 20px;
          text-align: center;
        }

        .sample-btn {
          margin-right: 10px;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Previous
Next