How to use 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 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 <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}”);
}

Here you can access the live demo of our JavaScript based WYSIWYG Editor inside a HTML5 form.

You can find the demo for all its features in this link.

Conclusion

I hope you enjoyed learning about how to use JS 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 exampleJavaScript 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, Direct-Trac, or feedback portal. We are always happy to assist you!