Integrating Rich Text Editor in Tab Control

21 Mar 20251 minute to read

Integrating a Rich Text Editor within Tab control provides a versatile and organized user interface for text formatting and content creation across multiple tabs. Each tab instance includes a dedicated editor instance configured with extensive toolbar options, enabling users to effortlessly manipulate text styles, apply formatting, insert media, and manage content layout.

@using Syncfusion.EJ2.Navigations
@using Syncfusion.EJ2.RichTextEditor
@{
    var headerTextOne = new TabHeader { Text = "TAB 1" };
    var headerTextTwo = new TabHeader { Text = "TAB 2" };
    var headerTextThree = new TabHeader { Text = "TAB 3" };
}

<ejs-tab id="ej2Tab" height="auto">
    <e-tab-tabitems>
        <e-tab-tabitem header="headerTextOne" content="#editor1"></e-tab-tabitem>
        <e-tab-tabitem header="headerTextTwo" content="#editor2"></e-tab-tabitem>
        <e-tab-tabitem header="headerTextThree" content="#editor3"></e-tab-tabitem>
    </e-tab-tabitems>
</ejs-tab>

<div style="display: none" id="editor1">
    <ejs-richtexteditor id="editor1" value="<div>Rich Text Editor</div>"></ejs-richtexteditor>
</div>

<div style="display: none" id="editor2">
    <ejs-richtexteditor id="editor2" value="<div>Rich Text Editor</div>"></ejs-richtexteditor>
</div>

<div style="display: none" id="editor3">
    <ejs-richtexteditor id="editor3" value="<div>Rich Text Editor</div>"></ejs-richtexteditor>
</div>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }
}