Having trouble getting help?
Contact Support
Contact Support
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();
}
}