Styling
21 Dec 202219 minutes to read
Font Name and Font Size
By default, the editor is initialized with Segoe UI
font name and 10pt
font size. To change it, select a different font name and font size from the drop-down in the editor’s toolbar.
To apply different font style for section of the content, select the text that you would like to change, and select a required font style from the drop-down to apply the changes to the selected text.
FontName DropDowns
The following table list the default font name and width of the FontFamily
dropdown and available list of font names.
Default Key | Default Value |
---|---|
font name | null |
width | 65px |
items | { text: ‘Segoe UI’, value: ‘Segoe UI’ },{ text: ‘Arial’, value: ‘Arial,Helvetica,sans-serif’ },{ text: ‘Courier New’, value: ‘Courier New,Courier,monospace’ },{ text: ‘Georgia’, value: ‘Georgia,serif’ },{ text: ‘Impact’, value: ‘Impact,Charcoal,sans-serif’ },{ text: ‘Lucida Console’, value: ‘Lucida Console,Monaco,monospace’ },{ text: ‘Tahoma’, value: ‘Tahoma,Geneva,sans-serif’ },{ text: ‘Times New Roman’, value: ‘Times New Roman,Times,serif’ },{ text: ‘Trebuchet MS’, value: ‘Trebuchet MS,Helvetica,sans-serif’ },{ text: ‘Verdana’, value: ‘Verdana,Geneva,sans-serif’ } |
FontSize DropDowns
The following table list the default font size and width of the FontSize
dropdown and available list of font size.
Default Key | Default Value |
---|---|
font size | null |
width | 35px. |
items | { text: ‘8 pt’, value: ‘8pt’ },{ text: ‘10 pt’, value: ‘10pt’ },{ text: ‘12 pt’, value: ‘12pt’ },{ text: ‘14 pt’, value: ‘14pt’ },{ text: ‘18 pt’, value: ‘18pt’ },{ text: ‘24 pt’, value: ‘24pt’ },{ text: ‘36 pt’, value: ‘36pt’ }. |
The below sample demonstrate the option to add the font name and font size tools to the toolbar as well as modify the default width
of the tools.
@Html.EJS().RichTextEditor("font").ToolbarSettings(e => e.Items((object)ViewBag.items)).FontFamily(t => t.Width("100px")).FontSize(t=>t.Width("40px")).ContentTemplate(@<div>
<p>
The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.
</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides < IFRAME > and < DIV > modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
<li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p> Provides a fully customizable toolbar.</p></li>
<li><p> Provides HTML view to edit the source directly for developers.</p></li>
<li><p> Supports third - party library integration.</p></li>
<li><p> Allows preview of modified content before saving it.</p></li>
<li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
<li><p> Contains undo / redo manager.</p></li>
<li><p> Creates bulleted and numbered lists.</p></li>
</ul>
</div>).Render()
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.items = new[] { "FontName", "FontSize" };
return View();
}
}
Custom Fonts and Size
Rich Text Editor supports to provide custom font and size with existing list.
If you want to add additional font names and font sizes to font drop-down, pass the font information as JSON data to the items field of FontSize
and FontFamily
property.
@Html.EJS().RichTextEditor("custom-font").ToolbarSettings(e => e.Items((object)ViewBag.toolbar)).FontFamily(f => f.Width("80px").default("Arial").Items((object)ViewBag.fontFamilyItems)).FontSize(f => f.Width("60px").default("10 px").Items((object)ViewBag.fontSizeItems)).ContentTemplate(@<div>
<p>
The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.
</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides < IFRAME > and < DIV > modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
<li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p> Provides a fully customizable toolbar.</p></li>
<li><p> Provides HTML view to edit the source directly for developers.</p></li>
<li><p> Supports third - party library integration.</p></li>
<li><p> Allows preview of modified content before saving it.</p></li>
<li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
<li><p> Contains undo / redo manager.</p></li>
<li><p> Creates bulleted and numbered lists.</p></li>
</ul>
</div>).Render()
public class HomeController : Controller
{
public ActionResult Index()
{
object size1 = new
{
text = "8 px",
value = "8px"
};
object size2 = new
{
text = "10 px",
value = "10px"
};
object size3 = new
{
text = "12 px",
value = "12px"
};
object size4 = new
{
text = "14 px",
value = "14px"
};
object size5 = new
{
text = "42 px",
value = "42px"
};
object item1 = new
{
text = "Segoe UI",
value = "Segoe UI"
};
object item2 = new
{
text = "Arial",
value = "Arial,Helvetica,sans-serif"
};
object item3 = new
{
text = "Courier New",
value = "Courier New,Courier,monospace"
};
object item4 = new
{
text = "Georgia",
value = "Georgia,serif"
};
object item5 = new
{
text = "Impact",
value = "Impact,Charcoal,sans-serif"
};
object item6 = new
{
text = "Calibri Light",
value = "CalibriLight"
};
ViewBag.items = new[] { "FontName", "FontSize" };
ViewBag.fontFamilyItems = new[] { item1, item2, item3, item4, item5, item6 };
ViewBag.fontSizeItems = new[] { size1, size2, size3, size4, size5 };
return View();
}
}
Font and Background Color
If you want to apply font color or background color for a selected content of Rich Text Editor you can use font color and background color tools.
Rich Text Editor support to provide customs font color and background color with existing list through the colorCode
field of FontColor
and BackgroundColor
.
FontColor
and BackgroundColor
property has two mode Picker
and Palette
. Palette mode has predefined set of colorCode
and in picker mode, we have provided with more colors. Through modeSwitcher
we can able to switch between these two options.
@Html.EJS().RichTextEditor("edit-color").ToolbarSettings(e => e.Items((object)ViewBag.items)).FontColor(f => f.ModeSwitcher(true)).BackgroundColor(b => b.ModeSwitcher(true)).ContentTemplate(@<div>
<p>
The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.
</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides < IFRAME > and < DIV > modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
<li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p> Provides a fully customizable toolbar.</p></li>
<li><p> Provides HTML view to edit the source directly for developers.</p></li>
<li><p> Supports third - party library integration.</p></li>
<li><p> Allows preview of modified content before saving it.</p></li>
<li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
<li><p> Contains undo / redo manager.</p></li>
<li><p> Creates bulleted and numbered lists.</p></li>
</ul>
</div>).Render()
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.items = new[] { "FontColor", "BackgroundColor" };
return View();
}
}
Editor content styles
By default, The content styles of Rich Text Editor are not returned while retrieving HTML value from the editor. So, the styles are not applied when using the HTML value outside of the editor. To get the styles to Rich Text Editor’s content for your application, You can copy and use the below styles directly in your application. The styles listed below which used in the UI elements of the Rich Text Editor.
NOTE
Make sure to add a CSS class ‘e-rte-content’ to the content container.
.e-rte-content p {
margin: 0 0 10px;
margin-bottom: 10px;
}
.e-rte-content li {
margin-bottom: 10px;
}
.e-rte-content h1 {
font-size: 2.17em;
font-weight: 400;
line-height: 1;
margin: 10px 0;
}
.e-rte-content h2 {
font-size: 1.74em;
font-weight: 400;
margin: 10px 0;
}
.e-rte-content h3 {
font-size: 1.31em;
font-weight: 400;
margin: 10px 0;
}
.e-rte-content h4 {
font-size: 1em;
font-weight: 400;
margin: 0;
}
.e-rte-content h5 {
font-size: 00.8em;
font-weight: 400;
margin: 0;
}
.e-rte-content h6 {
font-size: 00.65em;
font-weight: 400;
margin: 0;
}
.e-rte-content blockquote {
margin: 10px 0;
margin-left: 0;
padding-left: 5px;
}
.e-rte-content pre {
background-color: inherit;
border: 0;
border-radius: 0;
color: #333;
font-size: inherit;
line-height: inherit;
margin: 0 0 10px;
overflow: visible;
padding: 0;
white-space: pre-wrap;
word-break: inherit;
word-wrap: break-word;
}
.e-rte-content strong, .e-rte-content b {
font-weight: 700;
}
.e-rte-content a {
text-decoration: none;
-webkit-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
.e-rte-content a:hover {
text-decoration: underline;
}
.e-rte-content h3 + h4,
.e-rte-content h4 + h5,
.e-rte-content h5 + h6 {
margin-top: 00.6em;
}
.e-rte-content .e-rte-image.e-imgbreak {
border: 0;
cursor: pointer;
display: block;
float: none;
margin: 5px auto;
max-width: 100%;
position: relative;
}
.e-rte-content .e-rte-image {
border: 0;
cursor: pointer;
display: block;
float: none;
margin: auto;
max-width: 100%;
position: relative;
}
.e-rte-content .e-rte-image.e-imginline {
display: inline-block;
float: none;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - (2 * 5px));
vertical-align: bottom;
}
.e-rte-content .e-rte-image.e-imgcenter {
cursor: pointer;
display: block;
float: none;
margin: 5px auto;
max-width: 100%;
position: relative;
}
.e-rte-content .e-rte-image.e-imgleft {
float: left;
margin: 0 5px 0 0;
text-align: left;
}
.e-rte-content .e-rte-image.e-imgright {
float: right;
margin: 0 0 0 5px;
text-align: right;
}
.e-rte-content .e-rte-img-caption {
display: inline-block;
margin: 5px auto;
max-width: 100%;
position: relative;
}
.e-rte-content .e-rte-img-caption.e-caption-inline {
display: inline-block;
margin: 5px auto;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - (2 * 5px));
position: relative;
text-align: center;
vertical-align: bottom;
}
.e-rte-content .e-rte-img-caption.e-imgcenter {
display: block;
}
.e-rte-content .e-rte-img-caption .e-rte-image.e-imgright,
.e-rte-content .e-rte-img-caption .e-rte-image.e-imgleft {
float: none;
margin: 0;
}
.e-rte-content .e-rte-table {
border-collapse: collapse;
empty-cells: show;
}
.e-rte-content .e-rte-table td,
.e-rte-content .e-rte-table th {
border: 1px solid #bdbdbd;
height: 20px;
min-width: 20px;
padding: 2px 5px;
vertical-align: middle;
}
.e-rte-content .e-rte-table.e-dashed-border td,
.e-rte-content .e-rte-table.e-dashed-border th {
border-style: dashed;
}
.e-rte-content .e-rte-img-caption .e-img-inner {
box-sizing: border-box;
display: block;
font-size: 16px;
font-weight: initial;
margin: auto;
opacity: .9;
position: relative;
text-align: center;
width: 100%;
}
.e-rte-content .e-rte-img-caption .e-img-wrap {
display: inline-block;
margin: auto;
padding: 0;
width: 100%;
}
.e-rte-content blockquote {
border-left: solid 2px #333;
}
.e-rte-content a {
color: #2e2ef1;
}
.e-rte-content .e-rte-table th {
background-color: #e0e0e0;
}