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
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, 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>
/**
 * RichTextEditor - Form Sample
 */
import { FormValidator } from '@syncfusion/ej2-inputs';
import { Count, HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
// import * as Marked from 'marked';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    componentDidMount() {
        const option = {
            rules: {
                defaultRTE: {
                    maxLength: [108, 'Maximum 100 character only'],
                    minLength: [15, 'Need atleast 8 character length'],
                    required: true,
                }
            }
        };
        this.formObject = new FormValidator('#myForm', option);
        document.getElementById('validateSubmit').addEventListener('click', (e) => {
            const form = document.forms.myForm;
            const formData = new FormData(form);
            const 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, Count]}/>
          </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>);
    }
}
export default App;
Previous
Next