How can I help you?
Toolbar in the ASP.NET MVC Rich Text Editor Control
1 Jul 20259 minutes to read
The Syncfusion ASP.NET MVC Rich Text Editor provides a powerful toolbar that enables users to format, style, and edit content efficiently. The toolbar includes essential editing tools such as bold, italic, underline, alignment, and lists, along with customization options to suit different use cases.
To learn about the different types of toolbars in the ASP.NET MVC Rich Text Editor, watch this video:
The Rich Text Editor allows you to configure different types of toolbar using type field in toolbarSettings property. The types of toolbar are:
- Expand
- MultiRow
- Scrollable
- Popup
Expanding the toolbar
@using Syncfusion.EJ2.RichTextEditor
<div style="width:500px; margin:0 auto;">
@Html.EJS().RichTextEditor("toolbar-types").ToolbarSettings(e => { e.Type(ToolbarType.Expand); e.Items(ViewBag.items);}).Value(ViewBag.value).Render()
</div>public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
ViewBag.items = new[] { "Bold", "Italic", "Underline", "StrikeThrough",
"FontName", "FontSize", "FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "Blockquote", "OrderedList", "UnorderedList",
"Outdent", "Indent", "|",
"CreateLink", "Image", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", "|", "Undo", "Redo" };
return View();
}
}Configuring a multi-row toolbar
Setting the type as MultiRow in toolbarSettings will arrange the toolbar items across multiple rows, displaying all configured toolbar items.
<div style="width:500px; margin:0 auto;">
@Html.EJS().RichTextEditor("toolbar-types").ToolbarSettings(e => { e.Type(ToolbarType.MultiRow); e.Items(ViewBag.items); }).Value(ViewBag.value).Render()
</div>public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
ViewBag.items = new[] { "Bold", "Italic", "Underline", "StrikeThrough",
"FontName", "FontSize", "FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "Blockquote", "OrderedList", "UnorderedList",
"Outdent", "Indent", "|",
"CreateLink", "Image", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", "|", "Undo", "Redo" };
return View();
}
}Implementing a scrollable toolbar
Setting the type to Scrollable in toolbarSettings will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar.
@using Syncfusion.EJ2.RichTextEditor
<div style="width:500px; margin:0 auto;">
@Html.EJS().RichTextEditor("toolbar-types").ToolbarSettings(e => { e.Type(ToolbarType.Scrollable); e.Items(ViewBag.items);}).Value(ViewBag.value).Render()
</div>public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
ViewBag.items = new[] { "Bold", "Italic", "Underline", "StrikeThrough",
"FontName", "FontSize", "FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "Blockquote", "OrderedList", "UnorderedList",
"Outdent", "Indent", "|",
"CreateLink", "Image", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", "|", "Undo", "Redo" };
return View();
}
}Configuring a popup toolbar
Setting the type to Popup in toolbarSettings will display overflowing toolbar items into a popup container, optimizing the toolbar layout for limited space and smaller screens.
@using Syncfusion.EJ2.RichTextEditor
<div style="width:500px; margin:0 auto;">
@Html.EJS().RichTextEditor("toolbar-types").ToolbarSettings(e => { e.Type(ToolbarType.Popup);}).Value(ViewBag.value).Render()
</div>public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return View();
}
}Creating a sticky toolbar
By default, the toolbar remains fixed at the top of the Rich Text Editor when scrolling. You can customize the position of this sticky toolbar by setting the floatingToolbarOffset to adjust its offset from the top of the document.
Additionally, you can enable or disable the floating toolbar using the enableFloating property.
@using Syncfusion.EJ2.RichTextEditor
<div class="control-wrapper">
<div class="control-section">
@Html.EJS().RichTextEditor("toolbar-floating").Created("created").Height("720px").ToolbarSettings(e => { e.Type(ToolbarType.Expand).EnableFloating(false); }).Value(ViewBag.value).Render()
</div>
<div class="col-lg-4">
<span id="props"> Enable/Disable Floating: </span>
@Html.EJS().CheckBox("float").Checked(false).Label("Enable Floating").Change("checkchange").Render()
</div>
</div>
<script type="text/javascript">
var defaultRTE;
function created() {
defaultRTE = this;
}
function checkchange(args) {
defaultRTE.toolbarSettings.enableFloating = args.checked;
defaultRTE.dataBind();
}
</script>public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
return View();
}
}