Toolbar Types in ASP.NET MVC Rich Text Editor
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.
The Rich Text Editor allows you to configure different toolbar types using the type field in the toolbarSettings property. The available types are:
ExpandMultiRowScrollablePopup
The default value of type is Expand.
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 keeps all toolbar items in a single row with horizontal scrolling.
@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 groups overflowing toolbar items into a popup container, optimizing the 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();
}
}