How to use WYSIWYG Editor Inside an HTML5 Form in JS RichTextEditor?

This article explains how to use a WYSIWYG Editor Inside an HTML5 Form in JS RichTextEditor. The JavaScript WYSIWYG editor is a form component, and the formatted content can be retrieved from the server-end on form submission.

The Rich Text Editor inside a HTML5 Form

Follow the below steps to create a form application with a Rich Text Editor.

Step 1: Refer to the common styles link in the index.html file.

Step 2: Initialize a form element with the method and action attributes. Initialize the rich text editor through the <textarea> element inside the form with a name attribute specified in the index.html file.

<form action=”/Home/Save” method=”post” >
     <textarea name=”contentPost” id=”richtexteditorPost”> </textarea>
</form>

Step 3: Include the Rich Text Editor with the necessary modules and append it to the <textarea> element in the index.ts file.

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);

let formEditor: RichTextEditor  = new RichTextEditor({ placeholder: “Content to be submitted to server upon submission”});
formEditor.appendTo(‘richtexteditorPost’);

Step 4: With the submit operation, the form is requested for post action, and the content is obtained at the server with the contentPost name attribute, which can be saved for desired purposes.

public string EditorValue;
 
[HttpPost]
public IActionResult Save() {
   EditorValue = Request.Form[“contentPost”];
   return Content($”{EditorValue}”);
}

Conclusion

We hope you enjoyed learning about how to use Javascript WYSIWYG editor inside an HTML5 Form.

You can refer to our JavaScript Rich Text editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.  You can also explore our JavaScript Rich Text editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!