Form support in EJ2 JavaScript Rich text editor control

18 Apr 20236 minutes to read

The following sample demonstrates how to get the Rich Text Editor value in button click.

Render the Rich Text Editor

Render the Rich Text Editor 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" style="padding-top: 10px"></div>
</div>
<div style="text-align: center">
<button id="validateSubmit" class="samplebtn e-control e-btn" type="submit" data-ripple="true">Submit</button>
<button id="resetbtn" class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
</div>
</form>

Obtain the value

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

ej.base.enableRipple(true);
ej.richtexteditor.RichTextEditor.Inject(ej.richtexteditor.Toolbar, ej.richtexteditor.Link, ej.richtexteditor.Image, ej.richtexteditor.HtmlEditor, ej.richtexteditor.Count, ej.richtexteditor.QuickToolbar);

var defaultRTE = new ej.richtexteditor.RichTextEditor({ showCharCount: true, maxLength: 100, placeholder: 'Type something' });
defaultRTE.appendTo('#defaultRTE');

var formObject = new ej.inputs.FormValidator('#form-element');

document.getElementById('validateSubmit').onclick = function () {
    getValue();
};

function getValue() {
    var form = document.getElementById('form-element');
    var formData = new FormData(form);
    var rteValue = formData.get('defaultRTE');
    alert(rteValue); //Store the value to the data base.
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="content" class="box-form" style="margin: 0 auto; width:750px; padding:25px">
           
            <form id="form-element" class="form-vertical">
                <div class="form-group">
                    <textarea id="defaultRTE" required="" name="defaultRTE" class="form-control"></textarea>
                    <div id="dateError" style="padding-top: 10px"></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3 control-label"></div>
                    <div class="col-sm-6">
                        <div id="error"></div>
                    </div>
                </div>
                <div style="text-align: center">
                    <button id="validateSubmit" class="samplebtn e-control e-btn">Submit</button>
                    <button id="resetbtn" class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
                </div>
            </form>
            
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also