Search results

Form support

This below sample demonstrate how to get the RichTextEditor value in button click.

Render the RichTextEditor

Render the RichTextEditor in form as below.

<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, getValue method will be triggered. Through the FormData class, RichTextEditor value obtained as below.

tagHelper
form-sample.cs
<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">
<ejs-richtexteditor id="default" value="@ViewBag.value" created="created" showCharCount="true" maxLength="100">
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
            <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" 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>
</div>
<script>
    var defaultRTE, formObject, options;
    function created() {
        options = {
            rules: {
                'name': {
                    required: true
                }
            }
        };
        formObject = new ej.inputs.FormValidator('#form-element', options);
        defaultRTE = this;
        this.element.firstChild.setAttribute("required", "");
        this.element.firstChild.setAttribute('data-required-message', '* This field is required');
        this.element.firstChild.setAttribute('data-msg-containerid', 'dateError');
        this.element.firstChild.setAttribute('name', 'name');

    };
    window.onload = function () {
        document.getElementById('validateSubmit').onclick = function () {
            getValue();
        };
    }
    function getValue() {
        formObject.validate();
    }
</script>
public IActionResult FormSample()
{
    ViewBag.value = @"In RichTextEditor , you click the toolbar buttons to format the words and the changes are visible immediately. 
    Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
    and phrases should look different from each other

    RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

    We can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).

    The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content";
    return View();
}