Getting started in JavaScript Rich Text Editor
The Essential JS 2 for JavaScript (global script) is an ES5-formatted pure JavaScript framework that can be directly used in the latest web browsers.
Dependencies
The following list of dependencies are required to use the Rich Text Editor control in the application.
|-- @syncfusion/ej2-richtexteditor
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-filemanagerSetup for local development
Refer to the following steps to set up your local environment.
Step 1: Create an app folder my-app for Essential JS 2 JavaScript controls.
Step 2: Create a my-app/resources folder to store local script and style files.
Step 3: Open Visual Studio Code and create my-app/index.js and my-app/index.html files for initializing the Essential JS 2 Rich Text Editor control.
Adding Rich Text Editor styles
Add the following styles inside the my-app/index.html file to include the tailwind3 theme styles:
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-richtexteditor/styles/tailwind3.css" rel="stylesheet">IMPORTANT
Ensure that all Rich Text Editor theme style files are loaded in the exact order shown above. The order is important because these styles have dependencies, and loading them incorrectly may cause styling issues in the controls. You can also refer to the themes section for details about built-in themes and CSS references for individual controls.
Adding Rich Text Editor scripts
Add the following scripts inside the my-app/index.html file to include the Rich Text Editor functionality:
<script src="http://cdn.syncfusion.com/ej2/34.2.2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/34.2.2/ej2-filemanager/dist/global/ej2-filemanager.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/34.2.2/ej2-richtexteditor/dist/global/ej2-richtexteditor.min.js" type="text/javascript"></script>IMPORTANT
Ensure that all Rich Text Editor script files are loaded in the correct order and included before initializing the control. The order is important because the scripts have dependencies, and loading them incorrectly may prevent the Rich Text Editor from working properly or cause runtime errors. Make sure the required base and dependent scripts are included along with the Rich Text Editor script.
Adding Rich Text Editor control
Add the Rich Text Editor control to the application as follows. Place the target element in index.html and the initialization code in index.js using the sample below.
Add a target element such as
<div id="defaultRTE"></div>inindex.htmlbefore callingappendToinindex.js.
The Rich Text Editor can be initialized on a div element, as shown below:
var editor = new ej.richtexteditor.RichTextEditor({ });
editor.appendTo("#editor");<!DOCTYPE html><html lang="en"><head>
<title>Syncfusion Javascript 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="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-richtexteditor/styles/tailwind3.css" rel="stylesheet">
<script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-base/dist/global/ej2-base.min.js"
type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-buttons/dist/global/ej2-buttons.min.js"
type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-inputs/dist/global/ej2-inputs.min.js"
type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-lists/dist/global/ej2-lists.min.js"
type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-popups/dist/global/ej2-popups.min.js"
type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-navigations/dist/global/ej2-navigations.min.js"
type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-filemanager/dist/global/ej2-filemanager.min.js"
type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-richtexteditor/dist/global/ej2-richtexteditor.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="editor"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Run the Application
Run the index.html file through a local web server (for example, npx http-server or VS Code Live Server). Opening the file directly with file:// may break script loading.
The Syncfusion® JavaScript Rich Text Editor is displayed as shown below.
See Also
Documentation:
- Accessibility in Rich Text Editor
- Keyboard support in Rich Text Editor
- Globalization in Rich Text Editor
- How to change the editor type
- How to render the iframe
- How to render the toolbar in inline mode
Live examples:
NOTE
You can refer to our JavaScript Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Rich Text Editor example that shows how to render the rich text editor tools.