Style Appearance Customization in EJ2 TypeScript Rich text editor control
16 May 20256 minutes to read
The content below outlines the CSS structure you can use to customize the appearance of the control according to your preferences.
Customizing placeholder text
Use the following CSS to customize the default color in the Rich Text Editor’s placeholder.
.e-richtexteditor .e-rte-placeholder {
color: blue;
font-family: monospace;
}
Customizing editor content
Use the following CSS to modify the default style of the Rich Text Editor’s content area, including font properties, background, and text color.
/* To change font family and font size */
.e-richtexteditor .e-rte-content .e-content,
.e-richtexteditor .e-source-content .e-content {
font-size: 20px;
font-family: Segoe ui;
}
/* To change font color and content background */
.e-richtexteditor .e-rte-content,
.e-richtexteditor .e-source-content {
background: seashell;
color: blue;
}
Customizing editor toolbar
Use the following CSS to customize the default color in the Rich Text Editor’s toolbar icon.
/* To change font color for toolbar icon */
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons:active {
color: red;
}
/* To change font color for toolbar button */
.e-toolbar .e-tbar-btn,
.e-toolbar .e-tbar-btn:active,
.e-toolbar .e-tbar-btn:hover {
color: red;
}
/* To change font color for toolbar button in active state*/
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-dropdown-btn.e-active .e-icons, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-dropdown-btn.e-active .e-rte-dropdown-btn-text {
color: red;
}
/* To change font color for expanded toolbar items */
.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons,
.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
color: red;
}
Customizing character count display
Use the following CSS to customize the default color in the Rich Text Editor’s character count.
/* To change font color, font family, font size and opacity */
.e-richtexteditor .e-rte-character-count {
color: red;
font-family: segoe ui;
font-size: 18px;
opacity: 00.54;
padding-bottom: 2px;
padding-right: 14px;
}
Customizing border color
Use the following CSS to customize the border color in the Rich Text Editor’s container.
.e-richtexteditor .e-rte-container{
border: 2px solid #454bc1;
border-radius: 4px;
}
Highlight the specific lines
Programmatically highlight a portion of the text in the editor by setting the background color. This can be achieved by applying a background style to the selected text using the Rich Text Editor’s executeCommand
method.
import {
RichTextEditor,
Toolbar,
Link,
Image,
HtmlEditor,
QuickToolbar,
} from '@syncfusion/ej2-richtexteditor';
import { NodeSelection } from '@syncfusion/ej2-react-richtexteditor';
// Inject the required modules
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);
let editor: RichTextEditor = new RichTextEditor({
value: `<p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>`,
});
// Render initialized Rich Text Editor
editor.appendTo('#editor');
var nodeSelection: NodeSelection = new NodeSelection();
document.getElementById('btn').onclick = function () {
const rteContent = editor.contentModule.getDocument();
const firstParagraph = editor.contentModule.getEditPanel().querySelector('p');
if (firstParagraph && firstParagraph.firstChild) {
nodeSelection.setSelectionText(
rteContent,
firstParagraph.firstChild,
firstParagraph.firstChild,
4, // Start index
20 // End index
);
editor.executeCommand('backColor', 'yellow');
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id="btn" class="e-btn" style="margin: 5px">Apply</button>
<div id='editor'></div>
</div>
</body>
</html>