Integrating Rich Text Editor in Tab Control

4 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.

CSHTML

@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" };
}

@(Html.EJS().Tab("ej2Tab").Items(new List<TabItem> {
        new TabItem { Header = headerTextOne, Content = "#editor1" },
        new TabItem { Header = headerTextTwo, Content = "#editor2" },
        new TabItem { Header = headerTextThree, Content = "#editor3" }
    }).Height("auto").Render()
)

<div style="display: none" id="editor1">
    @Html.EJS().RichTextEditor("editor1").Value("Rich Text Editor").Render()
</div>

<div style="display: none" id="editor2">
    @Html.EJS().RichTextEditor("editor2").Value("Rich Text Editor").Render()
</div>

<div style="display: none" id="editor3">
    @Html.EJS().RichTextEditor("editor3").Value("Rich Text Editor").Render()
</div>

Controller.cs

public class HomeController : Controller
{

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