The Rich Text Editor component has been designed, keeping in mind the WAI-ARIA specifications and applies the WAI-ARIA roles, states and properties. This component is characterized by complete ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
Property | Functionalities |
---|---|
role=“toolbar” | This attribute added to the ToolBar element describes the actual role of the element. |
aria-orientation | Indicates the ToolBar orientation. Default value is horizontal . |
aria-haspopup | Indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled, attribute value has to be changed to true . |
aria-disabled | Indicates the disabled state of the ToolBar. |
For further details of Toolbar ARIA attributes, please look in to Accessibility of Toolbar
documentation.
application
.Property | Functionalities |
---|---|
role=“application” | This attribute added to the Rich Text Editor element describes the actual role of the element. |
aria-disabled | Indicates the disabled state of the ToolBar. |
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService} from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
template:`<ejs-richtexteditor #defaultRTE id='defaultRTE' [toolbarSettings]='tools'></ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
public tools = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
RichTextEditorAllModule,
DialogModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion Angular 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="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/javascript.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/css.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/xml.js" type="text/javascript"></script>
<script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/htmlmixed.js" type="text/javascript"></script>
<link href="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-code-mirror::before {
content: '\e345';
}
.CodeMirror-linenumber,
.CodeMirror-gutters {
display: none;
}
#special_char,
.char_block {
display: inline-block;
}
.char_block.e-active {
/* box-shadow: inset 3px 3px 7px 0px; */
outline: 1.5px solid;
}
.char_block {
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 5px 5px 0;
text-align: center;
vertical-align: middle;
border: 1px solid #DDDDDD;
font-size: 20px;
cursor: pointer;
user-select: none;
}
#custom_tbar,
#custom_tbar div{
cursor: pointer;
}
#rteSection {
height: 500px;
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
content: "\e76e";
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
content: "\e726";
}
.e-richtexteditor textarea.e-content {
float: left;
}
.e-richtexteditor .e-rte-content {
overflow: hidden;
}
.e-rte-content .e-content.e-pre-source{
width: 100%;
}
.property-panel-content td{
width: 50%;
}
.property-panel-content td div {
padding-left: 10px;
padding-top: 10px;
}
.e-icon-btn.e-active .e-md-preview::before {
content: '\e350';
}
.e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}
.e-icon-btn.e-active .e-md-preview::before,
#mdCustom .e-icon-btn.e-active .e-md-preview.e-icons::before {
content: '\e350';
}
#mdCustom .e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
}
#rteDialog.e-dialog .e-dlg-content {
padding: 0px 0px 5px 16px;
}
#custom_tbar .e-tbar-btn-text {
font-size: 16px;
}
.e-bigger #custom_tbar .e-tbar-btn-text {
font-size: 18px;
}
@media (min-width: 320px) and (max-width: 480px) {
.fabric.e-bigger #rteDialog {
min-width: 281px;
}
.fabric #rteDialog {
min-width: 241px;
}
.bootstrap.e-bigger #rteDialog,
.bootstrap #rteDialog {
min-width: 223px;
}
.highcontrast.e-bigger #rteDialog {
min-width: 283px;
}
.highcontrast #rteDialog {
min-width: 243px;
}
.material #rteDialog {
min-width: 224px;
}
.material.e-bigger #rteDialog {
min-width: 236px;
}
}
</style>
</head>
<body>
<app-root>
<div id='loader'>Loading....</div>
</app-root>
</body>
</html>