Search results

Form Support in JavaScript (ES5) RichTextEditor control

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.

Source
Preview
index.js
index.html
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.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">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