JavaScript Rich Text Editor in HTML5

<!
DOCTYPE html>
<html lang="en" xml:lang="en">

<head>
<meta name="verify-v1" content="IL/CbLrfaZd8dG6yRBxpEcby0Eh9lDgM24Mm3DjkTpQ=" />
<meta name="googlebot" content="follow, index" />

<meta name="ROBOTS" content="follow, index" />
<meta name="GOOGLE" content="POSITION, #1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Rich Text Editor | WYSIWYG editor in HTML5 |

Syncfusion</title>
<meta name='description' content="JavaScript Rich Text Editor(HTML5

Rich Text Editor) is a feature-rich, WYSIWYG HTML, and markdown that provides the
best user interface for editing content."/>
<meta name="keywords" content="ejrichtext editor, rte, ejrte, ej2 rte,

markdown editor, create, edit, view, print, find, replace, word, document, cut,
copy, paste, WYSIWYG editor, richtexteditor, angular rich text editor, angular html
editor, angular markdown editor"/>
<meta property="og:title" content="JavaScript Rich Text Editor |

WYSIWYG editor in HTML5 | Syncfusion"/>
<meta property="og:url"
content="http://www.syncfusion.com/products/Essential-js2/js-wysiwyg-rich-text-
editor"/>
<meta property="og:type" content="website" />
<meta property="og:description" content="JavaScript Rich Text

Editor(HTML5 Rich Text Editor) is a feature-rich, WYSIWYG HTML, and markdown that
provides the best user interface for editing content."/>
<meta property="og:image"
content="https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_Logo_Imag
e.png"/>
<meta property="og:site_name" content="Syncfusion"/>
<meta name="twitter:card" content="summary" />
<meta name="twitter:author" content="Syncfusion" />
<meta name="twitter:title" content="JavaScript Rich Text Editor |

WYSIWYG editor in HTML5 | Syncfusion" />
<meta name="twitter:description" content="JavaScript Rich Text

Editor(HTML5 Rich Text Editor) is a feature-rich, WYSIWYG HTML, and markdown that
provides the best user interface for editing content." />
<meta name="twitter:url"
content="http://www.syncfusion.com/products/Essential-js2/js-wysiwyg-rich-text-
editor"/>
<meta name="twitter:image"
content="https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_logos.png
" />
<meta property="fb:app_id" content="1003714633042650"/>
<meta property="twitter:account_id" content="41152441"/>
<link rel="canonical" href="https://www.syncfusion.com/javascript-ui-

controls/js-wysiwyg-rich-text-editor" />
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/components/bootstrap/Integrity/
bootstrap3.7.1.min.css?v1" as="style">
<link rel="stylesheet"
href="https://cdn.syncfusion.com/content/stylesheets/components/bootstrap/Integrity/
bootstrap3.7.1.min.css?v1" type="text/css">
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/components/Stack1.3.7/
layoutfont_cdn.css" as="style">
layoutfont_cdn.css" type="text/css">
<link rel="preload"
socicon.css" as="style">
socicon.css" type="text/css">
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/components/Stack1.3.7/fonts/
socicon.ttf" as="font" type="font/woff2" crossorigin>
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/components/Stack1.3.7/fonts/
layoutfont.ttf" as="font" type="font/woff2" crossorigin>
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/components/bootstrap/fonts/
glyphicons-halflings-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/components/bootstrap/
BootstrapLayoutV31.min.css?v1" as="style">
href="https://cdn.syncfusion.com/content/stylesheets/components/bootstrap/
BootstrapLayoutV31.min.css?v1" type="text/css">
<script
src="https://cdn.syncfusion.com/scripts/jquery/Integrity/jquery.all.new.min.js?
v1"></script>
<script src="https://cdn.syncfusion.com/scripts/common/avif-support.min.js"
defer></script>
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/FTControl_Common_v6.mi
n.css" as="style">
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/FTControl_Common_v6.mi
n.css" type="text/css">
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/google-
prettifyAndmCustomScrollbar.min.css" as="style">
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/google-
prettifyAndmCustomScrollbar.min.css" type="text/css">
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/FTControl_Desktop_v3.m
in.css" as="style" media="screen and (min-width: 1024px)">
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/FTControl_Desktop_v3.m
in.css" type="text/css" media="screen and (min-width: 1024px)">
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/FTControl_Tab.min.css"
as="style" media="(max-width: 1024px) and (min-width: 767px)">
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/FTControl_Tab.min.css"
type="text/css" media="(max-width: 1024px) and (min-width: 767px)">
<link rel="preload"
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/FTControl_Mobile_v3.mi
n.css" as="style" media="screen and (max-width: 767px)">
href="https://cdn.syncfusion.com/content/stylesheets/FT/master/FTControl_Mobile_v3.mi
n.css" type="text/css" media="screen and (max-width: 767px)">
<link href="https://cdn.syncfusion.com/content/stylesheets/components/Others/
style.css" rel="preload" />
style.css" rel="stylesheet" type="text/css" />
fonts/controlfootersection/style_v2.min.css" rel="preload" />
fonts/controlfootersection/style_v2.min.css" rel="stylesheet" type="text/css" />


<script type="application/ld+json" async>
{
"@context" : "http://schema.org",
"@type" : "Organization",
"url" : "https://www.syncfusion.com/",
"logo" :
"https://cdn.syncfusion.com/content/images/company-logos/syncfusion_logo.svg",
"name" : "Syncfusion",
"sameAs" : [ "https://www.linkedin.com/company/syncfusion?trk=top_nav_home",
"https://www.facebook.com/Syncfusion",
"https://www.youtube.com/syncfusioninc",
"https://twitter.com/Syncfusion" ]
}
</script>
</head>
<body>
<input id="CustomerCountry" name="CustomerCountry" type="hidden" value="Pakistan"
/>


<script async src="https://www.googletagmanager.com/gtag/js?id=UA-233131-
1"></script>
<script src="https://cdn.syncfusion.com/scripts/Home/BootstrapLayout/Master/
TrackingScripts_V3.min.js" async></script>


<script type="text/javascript">
_atrk_opts = { atrk_acct: "LPpPs1Fx9f207i", domain: "syncfusion.com",
dynamic: true };
(function () { var as = document.createElement('script'); as.type =
'text/javascript'; as.async = true; as.src =
"https://certify-js.alexametrics.com/atrk.js"; var s =
document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(as, s); })();
</script>
<noscript><img src="https://certify.alexametrics.com/atrk.gif?
account=LPpPs1Fx9f207i" style="display:none" height="1" width="1" alt=""
/></noscript>


<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>


<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?
id=166971126971821&ev=PageView&noscript=1" alt="Facebook Pixel Code" />
</noscript>
<div id="ie-notification" style="display:none">

<div class="container">
<div class="row">
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-9 error-
message">
Microsoft has ended support for older versions of IE. For the
best experience, upgrade to the latest version of IE, or view this page in another
browser.
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-3 close-button">
<img id="close-icon"
src="//cdn.syncfusion.com/content/images/common/close-icon-image.png" alt="close
icon" />
</div>
</div>
</div>
</div>
setTimeout(function () {
$(".webinar_popup_close").click(function () {
var value = $(".webinar_popup_close").attr("value");
var current = document.getElementById("getservertime").innerHTML;
var currentUTCTime = new Date(new Date().toUTCString());
if (currentUTCTime < new Date('21 Mar 2022 16:00:00 GMT')) {

document.cookie = "WebinarNotification=false; expires=Mon, 21 Mar
2022 16:00:00 UTC; path=/";
}
var myDiv = $("#webinar_popup_temp");

myDiv.clearQueue();
$("#webinar_popup_temp").slideUp(600);
setTimeout(function () {
$("#webinar_popup_temp")[0].setAttribute('style', 'display: none !
important');
}, 550);
});
}, 3000);
window.setInterval(function () {
var current = document.getElementById("getservertime").innerHTML;
var expiry = "03/21/2022 04:00:00 PM"; // mm/dd/yyyy hr:mm:ss
if (new Date(current) > new Date(expiry)) {
$("#webinar_popup_temp").hide();
}
}, 1000);
</script>
<input id="customerHaveActiveLicense" name="customerHaveActiveLicense" type="hidden"

value="False" />
<div class="unconfirmed-error-notification hide">

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-11 unconfirmed-
error-message small">
Unfortunately, activation email could not send to your email.
Please <span class="content-bold resend">try again.</span>
</div>
</div>
</div>
<div id="close-icon-not-activated" class="user-not-activated-close
activation-unconfirmed-error-notification-close">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="10"
height="10" viewBox="0 0 32 32">
<path d="M17.6 16l13.6-13.6c0.533-0.533 0.533-1.333 0-1.867s-1.333-
0.533-1.867 0l-13.6 13.6-13.333-13.867c-0.533-0.267-1.6-0.533-2.133 0-0.267 0.533-
0.267 1.6 0 2.133l13.6 13.6-13.6 13.6c-0.533 0.533-0.533 1.333 0 1.867 0.267 0.533
0.8 0.533 1.067 0.533s0.8 0 1.067-0.267l13.6-13.6 13.6 13.6c0.267 0.267 0.533 0.267
1.067 0.267 0.267 0 0.8 0 1.067-0.267 0.533-0.533 0.533-1.333 0-1.867l-14.133-
13.867z"></path>
</svg>
</div>
</div>
<div id="menu-wrapper">
<div id="sub-menu-section" class="bar bar-3 bar--sm bg--secondary">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-right text-left-xs
text-left-sm">
<div class="bar__module">
<div class="marketing-banner col-md-9 col-sm-8 col-xs-
12">
<p class="marketing-banner-content"><b>Bold BI</b> : Embedded analytics and

dashboards right inside your applications.</p>
<a class="marketing-link" href="https://www.boldbi.com/?
utm_source=syncfusion&utm_medium=referral&utm_campaign=syncfusion_boldbi_syncban"
target="_blank">Learn more</a>
</div>
<ul class="menu-horizontal col-md-3 col-sm-4 col-xs-12">
<li>
<div class="modal-instance">
<a href="/company/contact-us">Contact Us</a>
</div>
</li>
<li>
<div class="modal-instance">
<a
href="https://www.syncfusion.com/blogs">Blog</a>
</div>
</li>
<li>
<div id="menu-signin" class="">
<div class="logout-icon content-medium">Hi, muhammadim...<span
class="syncfusionlayout-down-arow"></span></div>
</div>
</li>
<li>
<div data-notification-link="search-box">
<i id="search-icon" class="syncfusionlayout-
search search-icon"></i>
</div>
</li>
<li id="cart-logo">
<a href="/sales/cart" title="Syncfusion Cart"
class="cart-navigation">
<i class="syncfusionlayout-cart"></i>
<span id="cart-count" class="disable-
count">0</span>
</a>
</li>
</ul>
</div>
</div>
</div>

</div>

</div>
<div class="container main-menu-section">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
<div class="syncfusion-logo">
<a class="sync-logo-img" title="Syncfusion" href="/">
</a>
</div>
<div class="menu-with-search">
<div class="syncfusion-menu">
<nav class="navbar-inverse navbar-default">

<div class="navbar-header">
<div class="free-trail-section hidden-lg hidden-xs">
<a class="menu-item btn btn--primary" href="/downloads">FREE
TRIAL</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-

toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
</div>

<div class="collapse navbar-collapse syncfusion-menu-items" id="bs-
example-navbar-collapse-1">
<ul class="nav navbar-nav menu-list">
<li class="dropdown sub-menu-list products">
<a href="#" class="menu-item dropdown-toggle" data-
text="PRODUCTS" data-toggle="dropdown">PRODUCTS <span class="syncfusionlayout-down-
arow"></span></a>
<div class="sub-menu-container dropdown-menu ">
<div class="container menu-container">
<div class="row product-submenu">
<div class="col-lg-2 studio-section">
<ul class="multi-column-dropdown">
<li class="sub-menu-item
essentialstudio-section"><a class="demo-link" href="/demos"><span
class="btn__text">VIEW DEMO</span></a></li>
essentialstudio-section"><a class="whats-new" href="/products/whatsnew"><span
class="btn__text">WHAT'S NEW</span></a></li>
essentialstudio-section hidden-lg hidden-md hidden-sm"><a class="free-trail"
href="/downloads"><span class="btn__text">FREE TRIAL</span></a></li>
essentialstudio-section hidden-xs"><a class="free-trail" href="/downloads"><span
class="btn__text">FREE TRIAL</span></a></li>
</ul>
</div>
<div class="col-lg-8 sub-menu-segment-border">
<div class="row">
<div class="sub-menu-title component-
title">Developer Platform <a href="/products/essential-studio">Overview</a></div>
<div class="col-lg-3">
<li
class="sub-menu-title">WEB</li>
<li class="sub-menu-item"><a
href="/blazor-components">Blazor</a></li>
href="/flutter-widgets">Flutter</a></li>
href="/aspnet-core-ui-controls">ASP.NET Core </a></li>
href="/aspnet-mvc-ui-controls">ASP.NET MVC </a></li>
href="/jquery/aspnet-web-forms-ui-controls">ASP.NET Web Forms</a></li>
href="/javascript-ui-controls">JavaScript</a></li>
href="/angular-ui-components">Angular </a></li>
href="/react-ui-components">React</a></li>
href="/vue-ui-components">Vue</a></li>
href="/jquery-ui-widgets">jQuery</a></li>
</ul>
</div>
<li class="sub-menu-
title">MOBILE</li>
href="/maui-controls">.NET MAUI (Preview)</a></li>
href="/xamarin-ui-controls">Xamarin</a></li>
href="/uwp-ui-controls">UWP</a></li>
href="/javascript-ui-controls">JavaScript</a></li>
</ul>
<li class="sub-menu-title">DATA
SCIENCE</li>
href="/products/data-science/predictive-analytics">Predictive Analytics</a></li>
</ul>
</div>
title">DESKTOP</li>
href="/winforms-ui-controls">WinForms</a></li>
href="/wpf-controls">WPF</a></li>
href="/winui-controls">WinUI</a></li>
href="/maui-controls">.NET MAUI (Preview)</a></li>
href="/xamarin-ui-controls">Xamarin</a></li>
href="/uwp-ui-controls">UWP</a></li>
</ul>
title">REPORTING PLATFORM</li>
href="/report-viewer-sdk">Report Viewer SDK</a></li>
</ul>
</div>
title">DOCUMENT PROCESSING</li>
href="/document-processing-libraries">File Formats</a></li>
<li class="sub-menu-item file-
formats-sub-item"><a href="/excel-framework/net">Excel </a></li>
formats-sub-item"><a href="/pdf-framework/net">PDF</a></li>
formats-sub-item"><a href="/word-framework/net">Word</a></li>
formats-sub-item"><a href="/powerpoint-framework/net">PowerPoint</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 sub-menu-segment enterprise-
section">
<li class="sub-menu-title main-
title">Enterprise Solutions</li>
href="https://www.boldbi.com">Bold BI - Analytics Platform</a></li>
href="https://www.boldreports.com">Bold Reports - Reporting Platform</a></li>
href="https://www.boldsign.com/?
utm_source=syncfusionnavheader&utm_medium=referral&utm_campaign=boldsign">Bol
dSign - Electronic Signature Software<span class="new-label">New</span></a></li>
</ul>
<li class="sub-menu-title main-
title">Free Products</li>
href="/essential-xamarin-ui-kit">Xamarin UI Kit</a></li>
href="/succinctly-free-ebooks">Ebooks</a></li>
href="/downloads/metrostudio">Metro Studio</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="sub-menu-list"> <a class="menu-item"
href="/products/solution-services" data-text="CONSULTING" >SOLUTION SERVICES</a></li>
<li class="support-menu dropdown sub-menu-list">
toggle="dropdown" role="button" aria-expanded="false" data-text="LEARNING & SUPPORT"
>LEARNING & SUPPORT<span class="syncfusionlayout-down-arow"></span></a>
<div class="support-menu-container dropdown-menu"
role="menu">
<div class="support-contents row">
<div class="col-lg-4 col-md-12 col-xs-12">
<ul>
<li class="support-heading">LEARNING</li>
href="/demos">Demos</a></li>
href="https://www.syncfusion.com/blogs/">Blog</a></li>
href="https://help.syncfusion.com/">Documentation</a></li>
href="/products/whatsnew">What’s New</a></li>
href="/products/roadmap">Road Map</a></li>
href="/products/release-history">Release History</a></li>
<li class="sub-menu-item"><a href="/tutorial-
videos">Tutorial Videos</a></li>
</ul>
</div>
<ul>
<li class="support-heading">RESOURCES</li>
href="/succinctly-free-ebooks">Ebooks</a></li>
href="/kb">Knowledge Base</a></li>
href="/resources/techportal/whitepapers">White Papers</a></li>
href="/company/case-studies">Case Studies</a></li>
<li class="sub-menu-item"><a href="/faq">.NET
FAQ</a></li>
</ul>
</div>
<ul>
<li class="support-heading">SUPPORT</li>
href="/forums">Community Forum</a></li>
href="https://support.syncfusion.com/create">Contact Support</a></li>
href="/feedback">Features & Bugs</a></li>
href="/support/product-lifecycle">Product Life Cycle</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="sub-menu-list"> <a class="menu-item"

href=/sales/products/javascript data-text="PRICING">PRICING</a></li>
<li class="company-menu dropdown sub-menu-list">
toggle="dropdown" role="button" aria-expanded="false" data-text="COMPANY">COMPANY
<span class="syncfusionlayout-down-arow"></span></a>
<ul class="company-menu-container dropdown-menu" role="menu">
<li class="sub-menu-item"><a href="/company/about-
us">About Us</a></li>
href="/company/about-us/customerlist">Customers</a></li>
<li class="sub-menu-item"><a href="/company/news-press-
release">Press Releases</a></li>
href="/company/careers">Careers</a></li>
href="/microsoftpartners">Microsoft Partner</a></li>
href="/company/partners">Partners</a></li>
<li class="sub-menu-item"><a href="/company/contact-
us">Contact Us</a></li>
</ul>
</li>
<li class="sub-menu-list free-trail-button hidden-md hidden-sm
hidden-xs"> <a class="menu-item btn btn--primary" href="/downloads"><span
class="btn__text">FREE TRIAL</span></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div id="logout-section">
<div class="column">
<div class="Customerinformation">
<div class="dashboard">
<a href="/account" class="content-medium">My Dashboard</a>
</div>
<div class="signout-section">
<a href="/account/logoff" rel="nofollow" class="btn btn--stack
btn--primary">SIGN OUT</a>
</div>
</div>
</div>
</div>
</div>
<div id="search-container" class="row">
<form action="/search" method="get"> <div class="col-lg-offset-3 col-lg-5 col-

lg-col-md-offset-2 col-md-7 col-sm-offset-2 col-sm-6 col-xs-offset-0 col-xs-8
search">
<input type="text" placeholder="Search" id="search" class="content-
medium" name="keyword" value="" />
</div>
<div class="col-md-1 col-sm-4 col-xs-4">
<button type="submit" class="btn btn--primary search-btn">Search</button>
</div>
</form>
<div>
<div class="search-details">
Find anything about our product, documentation, and more.
</div>
<hr />
<div id="search-popular-results"></div>
</div>
</div>
</div>
</div>
</div>
<div id="feedbackButton" class="hide">
<img style="width:100%; height:100%"
src="//cdn.syncfusion.com/content/images/common/feedback-icon-v1.png" data-
backdrop="false" data-toggle="modal" data-target="#feedbacks-dialogue_wrapper"
alt="Syncfusion Feedback" />
</div>
<div id="feedbacks-dialogue" class="hide"></div>
<div id="feedbacks-dialogue_wrapper" class="modal fade" data-easein="slideLeftIn"

role="dialog">
<div class="modal-dialogs">


<div class="modal-content">
<div id="feedbackcloseicon" data-dismiss="modal" data-

easein="slideLeftIn" class="feedbackClose"></div>
<div class="modal-header">
<div id="feedback-title">Feedback & Questions</div>
<div id="feedbackDescription" class="content-extra-smalls"> Please
share your comments and questions with us</div>
<div id="cookie-error">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-9 errormessage">
Please enable <b>cookies</b> in your browser
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-sm-3 close-icon-
message">
<img id="close-icon-feedback" alt="Feedback form close"
src="//cdn.syncfusion.com/content/images/common/close-icon.png" />
</div>
</div>
</div>
<form id="feedbackForm" method="post" action="Account/UpdateFeedbackForm"
class="modal-body">
<input name="__RequestVerificationToken" type="hidden"
value="_iNjRuJnrvdDuQ9GXtBeG5aIU5pDqWXJsAvHTj2WcNBWCchuKQfYZv4TNDvgNYogXSNO96Ek-
kWFLMpEXhapXT8VST2vnyyQLh_Zn9uLzyUOiQGy8_nRAg7ier25pZO7dGpiU9I-
4X4mBqa_mv_q71Zd4VI1" />
<div class="feedback-fields">
<label class="feedback-label content-extra-smalls">Name *</label>
<div class=" content-extra-smalls">
<input type="text" id="feedback-dialogue-name" class="form-
control feedback-inputs" autofocus="autofocus" value="muhammadimran Ali" />
</div>
</div>
<label class="feedback-label content-extra-smalls">Email
*</label>
<input type="text" id="feedback-dialogue-email" class="form-
control feedback-inputs" value="glorrious86@gmail.com" />
</div>
</div>
<label class="feedback-label content-extra-smalls">Company
*</label>
<input type="text" id="feedback-dialogue-company"
class="form-control feedback-inputs" value="xyzcv" />
</div>
</div>
<label class="feedback-label content-extra-smalls">Message
*</label>
<textarea id="feedback-message" class="form-control feedback-
inputs" rows="5" name="message" maxlength="10000" cols="10"></textarea>
</div>
</div>
<div id="notification"></div>
<input type="checkbox" id="cancontact-feed" class="form-control
feedback-inputs">
<span class="content-extra-smalls" id="cancontact-text">I would
like for an account to be created and to be contacted regarding this message. No
further action will be taken. <a style="text-decoration:none;"
href="/privacy">Privacy policy</a>, and <a style="text-decoration:none;"
href="/cookie-policy">Cookie Policy</a>.</span>
</div>
<div class="feedButton">
<input type="button" id="submitButton" name="submit"
value="SUBMIT" class="small-btn btn " />
</div>
</form>
<div class="thankyou-message hide">
<div class="feedback-confirmation">Thank you for your feedback and

comments. We will process this request shortly and get back to you if required.
</div>
<div>
<input type="button" name="close" value="Close"
id="feedbackcloseNotification" class="feedbackClose small-btn btn" />
</div>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$("#name").focus();
});
</script>
<input id="ft-platform-name" name="ft-platform-name" type="hidden"
value="essential-js2" />
<input id="ft-control-name" name="ft-control-name" type="hidden" value="js-
wysiwyg-rich-text-editor" />
<input id="ft-title-name" name="ft-title-name" type="hidden" value="Syncfusion
Essential Studio" />
<input id="controlNameCaps" name="controlNameCaps" type="hidden" value="js wysiwyg

rich text editor" /><input id="firstHeadingPlatform" name="firstHeadingPlatform"
type="hidden" value=" Control for JavaScript " />
<div id="control-banner-content" style="background-image:

url(/products/essential-js2/control/images/rich-text-editor/banner/
JavaScript_Rich_text_editor_Banner.png), linear-gradient(135deg, rgba(32,19,104,1)
0%, rgba(51,45,149,1) 30%, rgba(150,103,212,1) 76%, rgba(184,140,199,1) 100%);
background-image:
url(/products/essential-js2/control/images/rich-text-editor/banner/
JavaScript_Rich_text_editor_Banner.png), -webkit-linear-gradient(-45deg,
rgba(32,19,104,1) 0%, rgba(51,45,149,1) 30%, rgba(150,103,212,1) 76%,
rgba(184,140,199,1) 100%)" class="popular-banner list-template bg-lazy">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h1 class="banner-heading">JavaScript Rich Text
Editor - A WYSIWYG Markdown Editor</h1>
<ul>
<li>Edit WYSIWYG HTML and Markdown content with a rich set of tools for modern web
and mobile applications.</li>
<li>Easily incorporate into blogs editors, messages, HTML email composers, and
discussion forum-like applications.</li>
<li>Make a floating toolbar or inline editor that allows you to select any editable
element on the page and edit in place.</li>
</ul>
<a id="download-now-button"
href="/downloads/essential-js2" class="btn btn-free bold free-trial-gtag-sep15"><span
class="btn__text">FREE TRIAL</span></a>
<a id="view-demos-now-button"
href="https://ej2.syncfusion.com/demos/#/material/rich-text-editor/tools" class="btn
btn-free bold view-demo-gtag-sep17"><span class="btn__text">VIEW DEMOS</span></a>
<div
id="supported-frameworks-strip-segment" class="supported-frameworks supported-
frameWorks-four-platform essential-js2">
<div id="mobile-strip-section">
Supported frameworks
</div>
<div class="strip-opacity">
<div id="framework-strip">
<div class="content"
id="framework-content">
Supported frameworks
</div>
<div class="framework"
id="framework-platforms">
<a href="/angular-ui-
components" class="framework-items">
<div
class="framework-hover">
<img width="40"
height="40" src="https://cdn.syncfusion.com/content/images/FT/SupportedFramework/
angular.svg" alt="Angular icon" loading="lazy" />
<h6
class="framework-name">Angular</h6>
</div>
</a>
<a href="/react-ui-
<div
<img width="40"
react.svg" alt="React icon" loading="lazy" />
<h6
class="framework-name">React</h6>
</div>
</a>
<a href="/vue-ui-
<div
<img width="40"
vue.svg" alt="Vue icon" loading="lazy" />
<h6
class="framework-name">Vue</h6>
</div>
</a>
<a href="/blazor-
<div
<img width="40"
blazor-razor-icon.svg" alt="Blazor icon" loading="lazy" />
<h6
class="framework-name">Blazor</h6>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section id="company-list">
<div class="row">
<div class="col-sm-12 col-xs-12 text-center">
<h2>
Trusted by the world’s leading companies
</h2>
<img alt="Syncfusion Trusted Companies"
src="https://cdn.syncfusion.com/content/images/FT/common/syncfusion-trusted-
companies-v1.png?v=03022022074210" style="width:100%; height:100%" loading="lazy" />
</div>
</div>
</div>
</section>
<div id="control-static-menu">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-8 control-heading-
section">
<p class="bread-crumb">
<a rel="nofollow" href="/javascript-ui-controls"
class="platform">JavaScript </a>
<span class="seaprator"></span>
<span id="static-control-name">js wysiwyg rich text

editor</span>
</p>
</div>
<div class="col-lg-4 hidden-md hidden-sm hidden-xs" id="navigation-

link">
<div class="hide all-control-content">
<span>EXPLORE OTHER CONTROLS</span>
<span class="syncfusionlayout-down-arow"></span>
</div>
</div>
<div class="right-panel col-lg-4 col-md-6 col-sm-6 col-xs-4">
<ul>
<li class="hidden-xs">
<a id="try-now-button"
href="/downloads/essential-js2" class="btn btn-free bold hide free-trial-gtag-
sep15"><span class="btn__text">FREE TRIAL</span></a>
</li>
<li class="hidden-xs">
<a href="/sales/products/javascript"
class="btn btn-free bold"><span class="btn__text">BUY NOW</span></a>
</li>
<li>
<a
href="https://ej2.syncfusion.com/demos/#/material/rich-text-editor/tools" class="btn
btn-free bold view-demo-gtag-sep17"><span class="btn__text">VIEW DEMOS</span></a>
</li>
</ul>
</div>
<div class="hidden-lg col-md-12 col-sm-12 col-xs-12 " id="mobile-
navigation-link">
<div class="hide all-control-content">
<span>EXPLORE OTHER CONTROLS</span>
<span class="syncfusionlayout-down-arow"></span>
</div>
</div>
</div>
</div>
</div>
<div class="featuretour-markdown" id="featuretour-markdown">

<div class="col-sm-12 col-xs-12 other-controls" id="control-content">
<div class="row ft-one-column segment">
<h2 id="overview">Overview</h2>
<p>The JavaScript Rich Text Editor is a feature-rich WYSIWYG HTML editor and WYSIWYG
Markdown editor. The Rich Text Editor is widely used to create blogs, forum posts,
notes sections, support tickets (incidents), comment sections, messaging
applications, and more. The control provides an efficient user interface for a better
editing experience with mobile support. It has a variety of tools to edit and format
rich content, and it return a valid HTML markup or Markdown (MD) content. It allows
users to insert images, links, tables, and lists with modular architectures.</p>
<iframe class="lazy-iframe" loading="lazy"

data-src="https://ej2.syncfusion.com/products/typescript/richtexteditor/
overview/"></iframe>
</div>
<hr>
<div class="row ft-two-column">

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-img-small">
<h2 id="wysiwyg-html-editor">WYSIWYG HTML editor</h2>
<p>The native JavaScript Rich Text Editor control can be used as a WYSIWYG HTML
editor. View and edit content as HTML markup and view the HTML source using the
<code>Code View</code> icon.</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-content-small"><iframe
class="lazy-iframe" loading="lazy" style="height:250px"
expandtoolbar/"></iframe></div>
</div>
</div>
<hr>

</div>
htmlmdeditor/"></iframe></div>
<h2 id="wysiwyg-markdown-editor">WYSIWYG Markdown editor</h2>
<p>The JavaScript Rich Text Editor control can be used as a JavaScript WYSIWYG
Markdown editor. It allows content to be in Markdown format. The typed Markdown
syntax content can be previewed using a third-party plugin.</p>
<ul class="list-unstyled">
<li><a href="js-wysiwyg-rich-text-editor/wysiwyg-markdown-editor">Learn more about
our Markdown editor</a></li>
</ul>
</div>
</div>
<hr>

<h2 id="inline-mode">Inline mode</h2>
<p>The JavaScript Rich Text Editor displays an inline HTML editor when the content in
an editable area is clicked or selected.</p>
<li><a href="https://ej2.syncfusion.com/demos/#/material/rich-text-editor/
inline">Inline HTML editor example</a></li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-content-small">
<p><img data-src="/products/essential-js2/control/images/rich-text-editor/
Rich_text_editor_inlinemode.gif" alt="JavaScript WYSIWYG Inline HTML editor"
class="lazy"
src="https://cdn.syncfusion.com/content/images/common/placeholder.gif"></p>
</div>
</div>
</div>
<hr>

</div>
data-src="https://ej2.syncfusion.com/products/typescript/richtexteditor/iframe/"></
iframe></div>
<h2 id="wysiwyg-html-editor-iframe-mode">WYSIWYG HTML editor Iframe mode</h2>
<p>The Rich Text Editor in HTML5 supports Iframe editing with customized Iframe
attributes. The appearance of the Iframe editor’s content can easily be changed when
using external CSS and script files.</p>
<li><a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/iframe/">Iframe
editing support in Rich Text Editor using CSS documentation</a></li>
</ul>
</div>
</div>
<hr>
<div class="row multi-column-conent-container">

<div class="ft-column-header text-left">
<h2 id="html-editor-toolbar">HTML editor toolbar</h2>
<p>The WYSIWYG HTML editor toolbar provides a variety of commands for editing and
formatting the content. Format text, paragraphs, insert images, insert hyperlinks,
insert tables, insert lists, etc. The tool commands are grouped together based on
related functionality.</p>
types">HTML editor Toolbar simple example</a></li>
</ul>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 multi-col-contents">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content">
<iframe class="lazy-iframe" style="height:240px"

multirowtoolbar/"></iframe>
<h3 id="multi-row-toolbar">Multi-row toolbar</h3>
<p>The toolbar commands that overflow are wrapped in the following rows within the
toolbar.</p>
</div>

expandtoolbar/"></iframe>
<h3 id="expand-toolbar">Expand toolbar</h3>
<p>The overflow toolbar commands hidden in the next row become visible when the
toolbar is expanded using the expand icon.</p>
</div>
<p><img data-src="/products/essential-js2/control/images/rich-text-editor/javascript-
rich-text-editor-quick-toolbar.png" alt="HTML5 Rich Text Editor with Quick toolbar"
class="lazy"
<h3 id="quick-toolbar">Quick toolbar</h3>
<p>This toolbar contains frequently used commands related to text, image, tables, and
links. It helps access and format the elements (text, image, tables, links) quickly,
and also customize them.</p>
<li><a href="https://ej2.syncfusion.com/documentation/rich-text-editor/toolbar/
#quick-inline-toolbar">Quick toolbar documentation</a></li>
</ul>
</div>
rich-text-editor-floating-toolbar.png" alt="JavaScript Rich Text Editor with Floating
toolbar" class="lazy"
<h3 id="floating-the-toolbar">Floating the toolbar</h3>
<p>The HTML WYSIWYG editor toolbar does not stick to the top of the editor, but it
floats within the editor area when scrolling the current page.</p>
<li><a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/toolbar.html#floating
-toolbar">Floating toolbar documentation</a></li>
</ul>
</div>
rich-text-editor-fully-customizable.png" alt="Fully customizable tools in JavaScript
Rich Text Editor" class="lazy"
<h3 id="fully-customizable">Fully customizable</h3>
<p>The toolbar of the HTML5 Rich Text Editor control is fully customizable with its
buttons. Add or remove buttons and group commands based on category. This helps to
design the toolbar based on application needs, like HTML blog editing, HTML email
composing, and more.</p>
</div>

customtool/"></iframe>
<h3 id="custom-tool">Custom tool</h3>
<p>Add your own commands (tools) with actions to the toolbar along with built-in
commands.</p>
<li><a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/toolbar.html#custom-
tool">Custom tools documentation</a></li>
</ul>
</div>
</div>
</div>
<hr>
<h2 id="editing-experience">Editing experience</h2>
<p>The JavaScript Rich Text Editor control provides a wide range of tools and options
for a better editing experience.</p>
</div>

<h3 id="formatting-text">Formatting text</h3>
<ul>
<li>Format the selected content, whole paragraphs, or specific words or
characters.</li>
<li>Format headings, quotations, code, paragraphs, etc.</li>
<li>Bold, italicize, underline, strikethrough, or capitalize letters and
words.</li>
<li>Change paragraph indentation and spacing.</li>
<li>Select fonts and its size value.</li>
<li>Use subscripts and superscripts.</li>
<li>Select font color and the background color for the content.</li>
</ul>
</div>

formattingtext/"></iframe>
</div>
rich-text-editor-adding-images.png" alt="Images Insert in JavaScript HTML WYSIWYG
editor" class="lazy"
<h3 id="insert-images">Insert images</h3>
<p>Insert images in the content from a local path or server path with image captions
and then link URLs to the images. Upload images to a server with drag-and-drop or
file upload. Additionally, the editor offers options to insert images in BLOB or
Base64 formats.</p>
</div>
rich-text-editor-adding-links.png" alt="Hyperlinks Insert in WYSIWYG JavaScript HTML
<h3 id="insert-hyperlinks">Insert hyperlinks</h3>
<p>Insert or change the hyperlinks with customization options such as display text,
tooltip, and link to be opened in a new window.</p>
<li><a href="https://ej2.syncfusion.com/documentation/rich-text-editor/link/">Learn
about Insert hyperlink</a></li>
</ul>
</div>
rich-text-editor-insert-table.png" alt="Insert tables in JavaScript html editor"
class="lazy"
<h3 id="insert-tables">Insert tables</h3>
<p>Insert and edit HTML tables to display grid-like tabular data in WYSIWYG Rich Text
Editor. Manipulate the table and its elements dynamically (insert/remove rows and
columns, resize whole table or rows or columns, and remove a table).</p>
tools">Insert HTML tables examples</a></li>
</ul>
</div>
Rich_text_editor_merge_and_split.gif" alt="JavaScript rich text editor with table
merge and split" class="lazy"
<h3 id="table-cell-merge-and-split">Table cell merge and split</h3>
<p>Merge two or more row and column cells into a single cell with its contents. Also,
a single cell can be split both horizontally and vertically.</p>
tools">Table cell merge and split examples</a></li>
</ul>
</div>
rich-text-editor-alignment-text.png" alt="JavaScript rich text editor with text
alignment tools" class="lazy"
<h3 id="text-alignment">Text alignment</h3>
<p>Built-in settings are available to justify content or align it to the left,

center, or right.</p>
</div>
<h3 id="enter-and-shiftenter-key-configuration">Enter and Shift+Enter key

configuration</h3>
<p>The Rich Text Editor allows the tag inserted when pressing the Enter key and Shift
+ Enter key to be customized. The following tags can be configured:</p>
<ul>
<li>P: When ‘P’ is configured, pressing Enter or Shift+Enter will create a ‘p’
tag.</li>
<li>DIV: When ‘DIV’ is configured, pressing Enter or Shift+Enter will create a
‘div’ tag.</li>
<li>BR: When ‘BR’ is configured, pressing Enter or Shift+Enter will create a ‘br’
tag.</li>
</ul>
<li><a href="https://ej2.syncfusion.com/demos/#/bootstrap5/rich-text-editor/enter-
key-configuration.html">Enter and Shift+Enter key configuration examples</a></li>
</ul>
</div>
</div>
</div>
<hr>

</div>
addinglists/"></iframe></div>
<h2 id="adding-lists">Adding lists</h2>
<p>Create ordered (numbered) or unordered (bulleted) lists to organize content.</p>
</div>
</div>
<hr>

<h2 id="custom-lists">Custom lists</h2>
<p>The JavaScript Rich Text Editor with rich UI provides support to change the bullet
appearance for the unordered lists to circles or squares. It also supports different
numbering formats for ordered lists such as lowercase Greek or uppercase Roman.</p>
</div>
data-src="https://ej2.syncfusion.com/products/typescript/richtexteditor/custom-style-
list/"></iframe></div>
</div>
</div>
<hr>

</div>
fullscreen/"></iframe></div>
<h2 id="full-screen-text-editor">Full screen text editor</h2>
<p>Make the editor full screen (a full-page editor) for editing the content.</p>
</div>
</div>
<hr>

rich-text-editor-clipboard.png" alt="JavaScript Rich Text Editor with clipboard
operations" class="lazy"
<h2 id="cut-copy-and-paste">Cut, copy, and paste</h2>
<p>The JavaScript Rich Text Editor typically allows users to use clipboard operations
(cut, copy, and paste).</p>
</div>
rich-text-editor-undo-redo-manager.png" alt="JavaScript Rich Text Editor with undo
redo actions" class="lazy"
<h2 id="undo-redo-manager">Undo redo manager</h2>
<p>The HTML5/JavaScript Rich Text Editor manages the undo/redo action history to
store editing actions, and also to customize the undo steps.</p>
<li><a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/miscellaneous/
#undoredo-manager">Learn more about the undo-redo manager</a></li>
</ul>
</div>
</div>
</div>
<hr>

<h2 id="source-code-html-view">Source code (HTML) view</h2>
<p>Examine and edit the HTML code directly in the source code and view the preview
result (HTML live editor).</p>
</div>
rich-text-editor-source-code-view.png" alt="JavaScript rich text editor with HTML
live editor" class="lazy"
</div>
</div>
</div>
<hr>

rich-text-editor-format-paste.png" alt="JavaScript rich text editor with format on
pasting" class="lazy"
</div>
<h2 id="paste-from-microsoft-word-and-excel">Paste from Microsoft Word and Excel</h2>
<p>The JavaScript Rich Text Editor offers built-in options to paste content with
images to the editor from Microsoft Word, Microsoft Outlook, and Microsoft Excel by
filtering out tags, attributes, and styles. Additionally, there are options to choose
whether the content should be pasted as plain text, cleaned styles, or source-
formatting styles.</p>
</div>
</div>
<hr>

rich-text-editor-third-party.png" alt="Integrate with third-party libraries in
JavaScript rich text editor" class="lazy"
<h2 id="integrate-with-third-party-libraries">Integrate with third-party

libraries</h2>
<p>Easily integrate third-party libraries like spell checker, code mirror, etc., with
the RTE to improve the content in the HTML5/JavaScript HTML text editor.</p>
tools">Code mirror integration example</a></li>
</ul>
<li><a href="https://ej2.syncfusion.com/documentation/rich-text-editor/third-party-
integration/">Third-party integration documentation</a></li>
</ul>
</div>
rich-text-editor-print.png" alt="JavaScript rich text editor with print support"
class="lazy"
<h2 id="print-text-editor-content">Print text editor content</h2>
<p>Print the WYSIWYG Rich Text Editor content either by using the print option from
the toolbar or programmatically with applied format style.</p>
</div>
</div>
</div>
<hr>

</div>
Rich_text_editor_autolinking.gif" alt="Auto hyperlink of URL in JavaScript rich text
</div>
<h2 id="auto-hyperlinking-of-url">Auto-hyperlinking of URL</h2>
<p>The JavaScript Rich Text Editor is configured to turn text into a hyperlink
automatically when a URL is typed as a plain text.</p>
</div>
</div>
<hr>

<h2 id="html5javascript-form-validations">HTML5/JavaScript form validations</h2>
<p>The HTML5/JavaScript Rich Text Editor is a form control that seamlessly supports
HTML forms and obtains values on form submission actions. The two types of validation
are:</p>
<ul>
<li>
<p>Required validation</p>
</li>
<li>
<p>Maximum length validation</p>
</li>
</ul>
</div>
validation/"></iframe></div>
</div>
</div>
<hr>

</div>
limitcontentlength/"></iframe></div>
<h2 id="limit-content-length">Limit content length</h2>
<p>Restrict the content’s maximum number of characters.</p>
<li><a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/miscellaneous.html#ch
aracter-count">Maximum character count limit documentation</a></li>
</ul>
</div>
</div>
<hr>

<h2 id="resizable-editor">Resizable editor</h2>
<p>The JavaScript Rich Text Editor has built-in resizable support that helps widen or
shrink the content area.</p>
</div>
data-src="https://ej2.syncfusion.com/products/typescript/richtexteditor/resize/"></
iframe></div>
</div>
</div>
<hr>

</div>
data-src="https://ej2.syncfusion.com/products/typescript/richtexteditor/filebrowser/?
editable=false"></iframe></div>
<h2 id="insert-an-image-through-file-manager">Insert an image through file

manager</h2>
<p>The integrated file manager within the Rich Text Editor can insert and upload
images from cloud storage or a server.</p>
</div>
</div>
<hr>

rich-text-editor-responsiveness.png" alt="Responsive JavaScript rich text editor"
class="lazy"
<h2 id="touch-friendly-and-responsive-wysiwyg-editor">Touch-friendly and responsive

WYSIWYG editor</h2>
<p>The HTML5/JavaScript Rich Text Editor (mobile HTML editor) recognizes touch
gestures, allowing the user to swipe left or right to move the toolbar. The
responsive, mobile friendly design provides the best user experience on all mobile,
tablet, and desktop form factors.</p>
</div>
rich-text-editor-cross-browser.png" alt="JavaScript rich text editor with cross-
browser support" class="lazy"
<h2 id="cross-browser">Cross-browser</h2>
<p>The HTML5 Rich Text Editor supports multiple browsers and platforms. It also
supports ie11 with the help of polyfills.</p>
<li><a href="https://ej2.syncfusion.com/documentation/browser/">Learn more about
our cross-browser compatibility</a></li>
</ul>
</div>
</div>
</div>
<hr>

<h2 id="globalization">Globalization</h2>
</div>

rich-text-editor-localization.png" alt="JavaScript rich text editor with localization
support" class="lazy"
<h3 id="localization">Localization</h3>
<p>Customize static texts in the Rich Text Editor control by using the localization
library.</p>
<li><a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/globalization/
#localization">Documentation for changing HTML editor language</a></li>
</ul>
</div>
rich-text-editor-rtl.png" alt="Show right-to-left in JavaScript rich text editor"
class="lazy"
<h3 id="right-to-left-rtl">Right to Left (RTL)</h3>
<p>The HTML5/JavaScript Rich Text Editor supports right-to-left rendering, allowing

the text direction and layout of the text editor to be displayed from right to left.
This improves the user experience and accessibility for RTL languages such as Arabic,
Farsi, Hebrew, etc.</p>
<li><a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/globalization/
#rtl">Right-to-left language documentation</a></li>
</ul>
</div>
</div>
</div>
<hr>

<h2 id="html-editor-accessibility">HTML editor accessibility</h2>
<ul>
<li>The editor fully supports WAI-ARIA accessibility that helps the editor be
accessed by on-screen readers and assistive devices.</li>
<li>UI element visuals such as foreground color, background color, line spacing,
text, and images are designed based on the WCAG 2.0 standard.</li>
<li>The editor follows WAI-ARIA best practices for implementing all features using
accessible keyboard shortcuts.</li>
</ul>
<li><a href="https://ej2.syncfusion.com/documentation/rich-text-editor/keyboard-
support/">Learn about the WYSIWYG HTML editor keyboard shortcuts</a></li>
</ul>
</div>
<h2 id="developer-friendly-apis">Developer-friendly APIs</h2>
<p>There are sufficient client-side APIs available to optimize content editing.</p>
<li><a href="https://ej2.syncfusion.com/documentation/api/rich-text-editor/
#properties">Rich Text Editor API documentation</a></li>
</ul>
</div>
</div>
</div>
<hr>
<h2 id="javascript-rich-text-editor-code-example">JavaScript Rich Text Editor Code

Example</h2>
<p>Easily get started with the JavaScript Rich Text Editor using a few simple lines
of HTML and TS code example as demonstrated below. Also explore the <a
href="https://ej2.syncfusion.com/demos/#/material/rich-text-editor/rich-text-
editor.html">JavaScript Rich Text Editor example</a> that shows how to render and
configure the Rich Text Editor in JavaScript.</p>
<div class="code-snippet-tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#m5c2wiq0qithb61pqo9otw6m1aa5qrle-

html" aria-controls="home" role="tab" data-toggle="tab" data-original-
lang="html">html</a></li>
<li role="presentation" class=""><a data-target="#7qziw48c19gkrge0g1urvlpqyazl5zky-
ts" aria-controls="home" role="tab" data-toggle="tab"
data-original-lang="ts">ts</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="m5c2wiq0qithb61pqo9otw6m1aa5qrle-html"

data-original-lang="html">
<div class="highlight"><pre class="prettyprint linenums language-html" data-
lang="html"><span class="nt"><div</span> <span class="na">class=</span><span
class="s">"control-section"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">id=</span><span
class="s">"defaultRTE"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></div></span></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="7qziw48c19gkrge0g1urvlpqyazl5zky-ts" data-

original-lang="ts">
<div class="highlight"><pre class="prettyprint linenums language-ts" data-
lang="ts"><span class="k">import</span> <span class="p">{</span> <span
class="nx">enableRipple</span> <span class="p">}</span> <span class="k">from</span>
<span class="dl">'</span><span class="s1">@syncfusion/ej2-base</span><span
class="dl">'</span><span class="p">;</span>
<span class="nx">enableRipple</span><span class="p">(</span><span
class="kc">true</span><span class="p">);</span>
<span class="k">import</span> <span class="p">{</span> <span

class="nx">RichTextEditor</span><span class="p">,</span> <span
class="nx">Toolbar</span><span class="p">,</span> <span class="nx">Link</span><span
class="p">,</span> <span class="nx">Image</span><span class="p">,</span> <span
class="nx">HtmlEditor</span>
<span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span
class="s1">@syncfusion/ej2-richtexteditor</span><span class="dl">'</span><span
class="p">;</span>
<span class="nx">RichTextEditor</span><span class="p">.</span><span
class="nx">Inject</span><span class="p">(</span><span class="nx">Toolbar</span><span
class="p">,</span> <span class="nx">Link</span><span class="p">,</span> <span
class="nx">Image</span><span class="p">,</span> <span
class="nx">HtmlEditor</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">defaultRTE</span><span

class="p">:</span> <span class="nx">RichTextEditor</span> <span class="o">=</span>
<span class="k">new</span> <span class="nx">RichTextEditor</span><span
class="p">({</span>
<span class="na">value</span><span class="p">:</span> <span
class="s2">`<p>The Rich Text Editor component is a 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>
</ul>`</span>
<span class="p">});</span>
<span class="nx">defaultRTE</span><span class="p">.</span><span
class="nx">appendTo</span><span class="p">(</span><span class="dl">'</span><span
class="s1">#defaultRTE</span><span class="dl">'</span><span
class="p">);</span></pre></div>
</div>
</div>
</div>
</div>
<hr>
<h2 id="other-supported-frameworks">Other supported frameworks</h2>
<p>Rich Text Editor control is also available in Blazor, React, Angular, and Vue
frameworks. Check out the different Rich Text Editor platforms from the links
below:</p>
<ul>
<li>
<p><a href="https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-
text-editor">Blazor WYSIWYG Rich Text Editor</a></p>
</li>
<li>
<p><a href="https://www.syncfusion.com/react-ui-components/react-wysiwyg-rich-
text-editor">React WYSIWYG Rich Text Editor</a></p>
</li>
<li>
<p><a href="https://www.syncfusion.com/angular-ui-components/angular-wysiwyg-
rich-text-editor">Angular WYSIWYG Rich Text Editor</a></p>
</li>
<li>
<p><a href="https://www.syncfusion.com/vue-ui-components/vue-wysiwyg-rich-text-
editor">Vue WYSIWYG Rich Text Editor</a></p>
</li>
</ul>
</div>
<hr>
<hr>
<hr>
</div>
</div>
</div>
<div id="single-column-link-segment">
<div class="col-sm-12 col-xs-12 text-center control-content">
<h2>
Not sure how to create your first JavaScript Rich Text
Editor? Our documentation can help.
</h2>
<a class="btn btn-free bold download-now-button"
target="_blank"
href="https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started/">
<span class=""></span>
<span class="btn__text">I’d love to read it now</span>
</a>
</div>
</div>
</div>
<div id="static-footer">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" id="previous-link">
<div class="title-element">Previous</div>
<div class="arrow-element">
<a rel="nofollow" href="" class="icon-arrow-05"></a>
</div>
<div class="content">
<div id="prev-element"><a rel="nofollow" href=""></a></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" id="next-link">
<div class="title-element">Next</div>
<div class="content">
<div id="next-element"><a rel="nofollow" href=""></a></div>
</div>
<div class="arrow-element">
<a rel="nofollow" href="" class="icon-arrow-052"></a>
</div>
</div>
</div>
</div>
<div id="control-heading-section">
<h3 class="header">65+ JAVASCRIPT UI CONTROLS</h3>
<div id="loader"></div>
<div id="ft-controllist" class="control-section essential-js2">
<div class="row" id="control-items">
<div id="ft-control-platform">
<div class="sub-heading text-center">ALL CONTROLS</div>
<div class="control-list-items col-xs-6">
<div class="section-list ">
<div class="content-heading controldiv">
<span>GRIDS</span>
</div>
<ul class="list-items
controldiv">
<li class="list-items">
<a rel="nofollow" class="feature"
href="/javascript-ui-controls/js-data-grid">
Data Grid
</a>
</li>
</ul>
<ul class="list-items controldiv">
href="/javascript-ui-controls/js-pivot-table">
Pivot Table
</a>
</li>
</ul>
href="/javascript-ui-controls/js-tree-grid">
Tree Grid
</a>
</li>
</ul>
href="/javascript-ui-controls/js-spreadsheet">
Spreadsheet
</a>
</li>
</ul>
</div>
<span>DATA VISUALIZATION</span>
</div>
controldiv">
href="/javascript-ui-controls/js-charts">
Charts
</a>
</li>
</ul>
href="/javascript-ui-controls/js-stock-chart">
Stock Chart
</a>
</li>
</ul>
href="/javascript-ui-controls/js-circular-gauge">
Circular Gauge
</a>
</li>
</ul>
href="/javascript-ui-controls/js-linear-gauge">
Linear Gauge
</a>
</li>
</ul>
href="/javascript-ui-controls/js-diagram">
Diagram
</a>
</li>
</ul>
href="/javascript-ui-controls/js-heatmap-chart">
HeatMap Chart
</a>
</li>
</ul>
href="/javascript-ui-controls/js-maps">
Maps
</a>
</li>
</ul>
href="/javascript-ui-controls/js-range-selector">
Range Selector
</a>
</li>
</ul>
href="/javascript-ui-controls/js-smith-chart">
Smith Chart
</a>
</li>
</ul>
href="/javascript-ui-controls/js-sparkline">
Sparkline Charts
</a>
</li>
</ul>
href="/javascript-ui-controls/js-barcode">
Barcode Generator
</a>
</li>
</ul>
href="/javascript-ui-controls/js-treemap">
TreeMap
</a>
</li>
</ul>
href="/javascript-ui-controls/js-bullet-chart">
Bullet Chart
</a>
</li>
</ul>
href="/javascript-ui-controls/js-kanban-board">
Kanban
</a>
</li>
</ul>
</div>
<span>INPUTS</span>
</div>
controldiv">
href="/javascript-ui-controls/js-form-validation">
Form Validation
</a>
</li>
</ul>
href="/javascript-ui-controls/js-textbox">
TextBox
</a>
</li>
</ul>
href="/javascript-ui-controls/js-input-mask">
Input Mask
</a>
</li>
</ul>
href="/javascript-ui-controls/js-numeric-textbox">
Numeric Textbox
</a>
</li>
</ul>
href="/javascript-ui-controls/js-radio-button">
Radio Button
</a>
</li>
</ul>
href="/javascript-ui-controls/js-checkbox">
Checkbox
</a>
</li>
</ul>
href="/javascript-ui-controls/js-color-picker">
Color Picker
</a>
</li>
</ul>
href="/javascript-ui-controls/js-file-upload">
File Upload
</a>
</li>
</ul>
href="/javascript-ui-controls/js-range-slider">
Range Slider
</a>
</li>
</ul>
href="/javascript-ui-controls/js-signature">
Signature
<span class="badge badge-
warning badge-preview">PREVIEW</span>
</a>
</li>
</ul>
href="/javascript-ui-controls/js-toggle-switch-button">
Toggle Switch Button
</a>
</li>
</ul>
</div>
<span>EDITORS</span>
</div>
controldiv">
href="/javascript-ui-controls/js-wysiwyg-rich-text-editor">
Rich Text Editor
</a>
</li>
</ul>
href="/javascript-ui-controls/js-word-processor">
Word Processor
</a>
</li>
</ul>
</div>
<span>DROPDOWNS</span>
</div>
controldiv">
href="/javascript-ui-controls/js-autocomplete">
AutoComplete
</a>
</li>
</ul>
href="/javascript-ui-controls/js-listbox">
ListBox
</a>
</li>
</ul>
href="/javascript-ui-controls/js-combobox">
ComboBox
</a>
</li>
</ul>
href="/javascript-ui-controls/js-dropdown-list">
Dropdown List
</a>
</li>
</ul>
href="/javascript-ui-controls/js-multiselect-dropdown">
MultiSelect Dropdown
</a>
</li>
</ul>
href="/javascript-ui-controls/js-dropdown-tree">
Dropdown Tree
</a>
</li>
</ul>
</div>
<span>CALENDARS</span>
</div>
controldiv">
href="/javascript-ui-controls/js-scheduler">
Scheduler
</a>
</li>
</ul>
href="/javascript-ui-controls/js-gantt-chart">
Gantt Chart
</a>
</li>
</ul>
href="/javascript-ui-controls/js-calendar">
Calendar
</a>
</li>
</ul>
href="/javascript-ui-controls/js-datepicker">
DatePicker
</a>
</li>
</ul>
href="/javascript-ui-controls/js-daterangepicker">
DateRangePicker
</a>
</li>
</ul>
href="/javascript-ui-controls/js-datetime-picker">
DateTime Picker
</a>
</li>
</ul>
href="/javascript-ui-controls/js-timepicker">
TimePicker
</a>
</li>
</ul>
</div>
<span>BUTTONS</span>
</div>
controldiv">
href="/javascript-ui-controls/js-button">
Button
</a>
</li>
</ul>
href="/javascript-ui-controls/js-button-group">
Button Group
</a>
</li>
</ul>
href="/javascript-ui-controls/js-dropdown-menu">
Dropdown Menu
</a>
</li>
</ul>
href="/javascript-ui-controls/js-progress-button">
Progress Button
</a>
</li>
</ul>
href="/javascript-ui-controls/js-split-button">
Split Button
</a>
</li>
</ul>
href="/javascript-ui-controls/js-chips">
Chips
</a>
</li>
</ul>
</div>
<span>LAYOUT</span>
</div>
controldiv">
href="/javascript-ui-controls/js-avatar">
Avatar
</a>
</li>
</ul>
href="/javascript-ui-controls/js-card">
Card
</a>
</li>
</ul>
href="/javascript-ui-controls/js-modal-dialog">
Dialog
</a>
</li>
</ul>
href="/javascript-ui-controls/js-listview">
ListView
</a>
</li>
</ul>
href="/javascript-ui-controls/js-tooltip">
Tooltip
</a>
</li>
</ul>
href="/javascript-ui-controls/js-splitter">
Splitter
</a>
</li>
</ul>
href="/javascript-ui-controls/js-dashboard-layout">
Dashboard Layout
</a>
</li>
</ul>
</div>
<span>NAVIGATION</span>
</div>
controldiv">
href="/javascript-ui-controls/js-accordion">
Accordion
</a>
</li>
</ul>
href="/javascript-ui-controls/js-breadcrumb">
Breadcrumb
</a>
</li>
</ul>
href="/javascript-ui-controls/js-context-menu">
Context Menu
</a>
</li>
</ul>
href="/javascript-ui-controls/js-menu-bar">
Menu Bar
</a>
</li>
</ul>
href="/javascript-ui-controls/js-sidebar">
Sidebar
</a>
</li>
</ul>
href="/javascript-ui-controls/js-tabs">
Tabs
</a>
</li>
</ul>
href="/javascript-ui-controls/js-toolbar">
Toolbar
</a>
</li>
</ul>
href="/javascript-ui-controls/js-treeview">
TreeView
</a>
</li>
</ul>
href="/javascript-ui-controls/js-file-manager">
File Manager
</a>
</li>
</ul>
</div>
<span>VIEWER</span>
</div>
controldiv">
href="/javascript-ui-controls/js-pdf-viewer">
PDF Viewer
</a>
</li>
</ul>
</div>
<span>NOTIFICATIONS</span>
</div>
controldiv">
href="/javascript-ui-controls/js-badge">
Badge
</a>
</li>
</ul>
href="/javascript-ui-controls/js-toast">
Toast
</a>
</li>
</ul>
href="/javascript-ui-controls/js-progressbar">
Progress Bar
</a>
</li>
</ul>
</div>
<span>REPORTS</span>
</div>
controldiv">
href="https://www.boldreports.com/report-viewer-sdk/javascript-report-viewer">
Report Viewer
</a>
</li>
</ul>
</div>
<span>FORMS</span>
</div>
controldiv">
href="/javascript-ui-controls/js-in-place-editor">
In-place Editor
</a>
</li>
</ul>
href="/javascript-ui-controls/js-query-builder">
Query Builder UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="faq" class=segment>

<h2>Frequently Asked Questions</h2>

<div id="question-answers" class="row" itemscope
itemtype="https://schema.org/FAQPage">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<div class="faq-list" itemscope itemprop="mainEntity"
itemtype="https://schema.org/Question">
<h4 itemprop="name">
<span href="#collapse-1" data-
toggle="collapse" class="question-content desktop collapsed">
<span class="tick-icon">✅</span>
<span class="faq-question">
Why should you choose Syncfusion
JavaScript Rich Text Editor?
</span>
<span class="permalink">
<svg class="tool-tip" width="18px"
height="16px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="link" stroke="none"
stroke-width="1" fill="none" fill-rule="evenodd">
<path
d="M10.5848002,6.74053545 L10.9690399,7.15258208 C12.3175608,8.59869375
12.2384479,10.8641911 10.7923362,12.2127121 L8.33068479,14.5082392
C6.85654455,15.8828972 4.55958873,15.8218448 3.2004829,14.3643822
C1.84137707,12.9069197 1.94070093,10.6113003 3.41484117,9.23664232
L4.799664,7.94527414 C5.05655422,7.70572013 5.4590018,7.71977391
5.69855581,7.97666413 C5.93810982,8.23355436 5.92405604,8.63600193
5.66716581,8.87555594 L4.28234299,10.1669241 C3.31854461,11.0656806
3.25403309,12.5567009 4.1307647,13.4968804 C5.00749632,14.43706 6.4993846,14.4767139
7.46318298,13.5779574 L9.92483443,11.2824303 C10.8571657,10.4130173
10.908171,8.95241512 10.0387581,8.02008389 L9.65451838,7.60803726
C9.41496437,7.35114703 9.42901815,6.94869946 9.68590837,6.70914545
C9.9427986,6.46959144 10.3452462,6.48364522 10.5848002,6.74053545 Z
M15.2941463,3.08685865 C16.6532522,4.54432121 16.5539283,6.83994057
15.0797881,8.21459858 L13.6949652,9.50596676 C13.438075,9.74552077
13.0356274,9.73146699 12.7960734,9.47457676 C12.5565194,9.21768654
12.5705732,8.81523896 12.8274634,8.57568495 L14.2122863,7.28431677
C15.1760846,6.38556025 15.2405961,4.89454001 14.3638645,3.95436046
C13.4871329,3.01418091 11.9952446,2.97452697 11.0314463,3.8732835
L8.5697948,6.16881062 C7.63746358,7.03822355 7.58645823,8.49882578
8.45587116,9.431157 L8.84011086,9.84320363 C9.07966487,10.1000939
9.06561109,10.5025414 8.80872086,10.7420954 C8.55183064,10.9816495
8.14938307,10.9675957 7.90982905,10.7107054 L7.52558935,10.2986588
C6.1770684,8.85254714 6.25618131,6.58704977 7.70229299,5.23852882
L10.1639444,2.9430017 C11.6380847,1.56834368 13.9350405,1.62939608
15.2941463,3.08685865 Z" id="Combined-Shape" fill="#929292"
fill-rule="nonzero"></path>
</g>
</svg>
</span>
<span class="faq-arrow-icon">
<span class="faq-collapse-icon">
<svg width="20px" height="20px"
viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
<g stroke="none" stroke-
width="1" fill="none" fill-rule="evenodd">
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
id="Path-Copy-18" fill="black" fill-rule="nonzero" transform="translate(10.000000,
10.000000) scale(-1, -1) translate(-10.000000, -10.000000) "></path>
</g>
</svg>
</span>
<span class="faq-expand-icon">
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
id="Path-Copy-18" fill="black" fill-rule="nonzero"></path>
</g>
</svg>
</span>
</span>
</span>
</h4>
<div id="collapse-1" class="collapse " itemscope
itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="answer-content" itemprop="text">
<ul> <li>Edit WYSIWYG HTML and <a href="https://www.syncfusion.com/javascript-ui-
controls/js-wysiwyg-rich-text-editor/wysiwyg-markdown-editor">Markdown</a> content
with a rich set of tools for modern web and mobile applications.</li> <li>Easily
incorporate the editor into <a href="https://ej2.syncfusion.com/demos/rich-text-
editor/blog-posting/">blog editors</a>, messages, HTML email composers, and
discussion forum-like applications.</li> <li>Make a <a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/toolbar/#floating-
toolbar">floating toolbar</a> or <a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/inline-mode/">inline
editor</a> that allows you to select any editable element on the page and edit in
place.</li> <li>One of the best JavaScript Rich Text Editor in the market that
offers feature-rich UI to interact with the software.</li> <li>Simple configuration
and API.</li> <li>Supports all modern browsers.</li> <li>Mobile-touch friendly and
responsive.</li> <li>Expansive learning resources such as <a
href="https://ej2.syncfusion.com/demos/rich-text-editor/tools/">demos</a> and <a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/getting-
started/">documentation</a> to learn quickly and get started with JavaScript Rich
Text Editor.</li></ul> </div>
</div>
</div>
What is the price for the Syncfusion
JavaScript Rich Text Editor?
</span>
<path
d="M10.5848002,6.74053545 L10.9690399,7.15258208 C12.3175608,8.59869375
12.2384479,10.8641911 10.7923362,12.2127121 L8.33068479,14.5082392
C6.85654455,15.8828972 4.55958873,15.8218448 3.2004829,14.3643822
C1.84137707,12.9069197 1.94070093,10.6113003 3.41484117,9.23664232
L4.799664,7.94527414 C5.05655422,7.70572013 5.4590018,7.71977391
5.69855581,7.97666413 C5.93810982,8.23355436 5.92405604,8.63600193
5.66716581,8.87555594 L4.28234299,10.1669241 C3.31854461,11.0656806
3.25403309,12.5567009 4.1307647,13.4968804 C5.00749632,14.43706 6.4993846,14.4767139
7.46318298,13.5779574 L9.92483443,11.2824303 C10.8571657,10.4130173
10.908171,8.95241512 10.0387581,8.02008389 L9.65451838,7.60803726
C9.41496437,7.35114703 9.42901815,6.94869946 9.68590837,6.70914545
C9.9427986,6.46959144 10.3452462,6.48364522 10.5848002,6.74053545 Z
M15.2941463,3.08685865 C16.6532522,4.54432121 16.5539283,6.83994057
15.0797881,8.21459858 L13.6949652,9.50596676 C13.438075,9.74552077
13.0356274,9.73146699 12.7960734,9.47457676 C12.5565194,9.21768654
12.5705732,8.81523896 12.8274634,8.57568495 L14.2122863,7.28431677
C15.1760846,6.38556025 15.2405961,4.89454001 14.3638645,3.95436046
C13.4871329,3.01418091 11.9952446,2.97452697 11.0314463,3.8732835
L8.5697948,6.16881062 C7.63746358,7.03822355 7.58645823,8.49882578
8.45587116,9.431157 L8.84011086,9.84320363 C9.07966487,10.1000939
9.06561109,10.5025414 8.80872086,10.7420954 C8.55183064,10.9816495
8.14938307,10.9675957 7.90982905,10.7107054 L7.52558935,10.2986588
C6.1770684,8.85254714 6.25618131,6.58704977 7.70229299,5.23852882
L10.1639444,2.9430017 C11.6380847,1.56834368 13.9350405,1.62939608
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
</span>
</span>
</h4>
<p>We do not sell the JavaScript Rich Text Editor separately. It is only available
for purchase as part of the Syncfusion JavaScript suite, which contains over 65
JavaScript components, including the Rich Text Editor. A single developer license for
the <a href="https://www.syncfusion.com/sales/products/javascript">Syncfusion
Essential Studio for JavaScript suite</a> costs <strong>$995.00 USD</strong>,
including one year of support and updates. On top of this, we might be able to offer
additional discounts based on currently active promotions. Please contact our <a
href="https://www.syncfusion.com/company/contact-us">sales team</a> today to see if
you qualify for any additional discounts.</p>
</div>
</div>
</div>
Where can I find the Syncfusion
JavaScript Rich Text Editor demo?
</span>
<path
d="M10.5848002,6.74053545 L10.9690399,7.15258208 C12.3175608,8.59869375
12.2384479,10.8641911 10.7923362,12.2127121 L8.33068479,14.5082392
C6.85654455,15.8828972 4.55958873,15.8218448 3.2004829,14.3643822
C1.84137707,12.9069197 1.94070093,10.6113003 3.41484117,9.23664232
L4.799664,7.94527414 C5.05655422,7.70572013 5.4590018,7.71977391
5.69855581,7.97666413 C5.93810982,8.23355436 5.92405604,8.63600193
5.66716581,8.87555594 L4.28234299,10.1669241 C3.31854461,11.0656806
3.25403309,12.5567009 4.1307647,13.4968804 C5.00749632,14.43706 6.4993846,14.4767139
7.46318298,13.5779574 L9.92483443,11.2824303 C10.8571657,10.4130173
10.908171,8.95241512 10.0387581,8.02008389 L9.65451838,7.60803726
C9.41496437,7.35114703 9.42901815,6.94869946 9.68590837,6.70914545
C9.9427986,6.46959144 10.3452462,6.48364522 10.5848002,6.74053545 Z
M15.2941463,3.08685865 C16.6532522,4.54432121 16.5539283,6.83994057
15.0797881,8.21459858 L13.6949652,9.50596676 C13.438075,9.74552077
13.0356274,9.73146699 12.7960734,9.47457676 C12.5565194,9.21768654
12.5705732,8.81523896 12.8274634,8.57568495 L14.2122863,7.28431677
C15.1760846,6.38556025 15.2405961,4.89454001 14.3638645,3.95436046
C13.4871329,3.01418091 11.9952446,2.97452697 11.0314463,3.8732835
L8.5697948,6.16881062 C7.63746358,7.03822355 7.58645823,8.49882578
8.45587116,9.431157 L8.84011086,9.84320363 C9.07966487,10.1000939
9.06561109,10.5025414 8.80872086,10.7420954 C8.55183064,10.9816495
8.14938307,10.9675957 7.90982905,10.7107054 L7.52558935,10.2986588
C6.1770684,8.85254714 6.25618131,6.58704977 7.70229299,5.23852882
L10.1639444,2.9430017 C11.6380847,1.56834368 13.9350405,1.62939608
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
</span>
</span>
</h4>
<p>You can find our JavaScript Rich Text Editor demo <a
href="https://ej2.syncfusion.com/demos/rich-text-editor/tools/">here</a>.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
Can I purchase the Syncfusion
JavaScript Rich Text Editor component separately?
</span>
<path
d="M10.5848002,6.74053545 L10.9690399,7.15258208 C12.3175608,8.59869375
12.2384479,10.8641911 10.7923362,12.2127121 L8.33068479,14.5082392
C6.85654455,15.8828972 4.55958873,15.8218448 3.2004829,14.3643822
C1.84137707,12.9069197 1.94070093,10.6113003 3.41484117,9.23664232
L4.799664,7.94527414 C5.05655422,7.70572013 5.4590018,7.71977391
5.69855581,7.97666413 C5.93810982,8.23355436 5.92405604,8.63600193
5.66716581,8.87555594 L4.28234299,10.1669241 C3.31854461,11.0656806
3.25403309,12.5567009 4.1307647,13.4968804 C5.00749632,14.43706 6.4993846,14.4767139
7.46318298,13.5779574 L9.92483443,11.2824303 C10.8571657,10.4130173
10.908171,8.95241512 10.0387581,8.02008389 L9.65451838,7.60803726
C9.41496437,7.35114703 9.42901815,6.94869946 9.68590837,6.70914545
C9.9427986,6.46959144 10.3452462,6.48364522 10.5848002,6.74053545 Z
M15.2941463,3.08685865 C16.6532522,4.54432121 16.5539283,6.83994057
15.0797881,8.21459858 L13.6949652,9.50596676 C13.438075,9.74552077
13.0356274,9.73146699 12.7960734,9.47457676 C12.5565194,9.21768654
12.5705732,8.81523896 12.8274634,8.57568495 L14.2122863,7.28431677
C15.1760846,6.38556025 15.2405961,4.89454001 14.3638645,3.95436046
C13.4871329,3.01418091 11.9952446,2.97452697 11.0314463,3.8732835
L8.5697948,6.16881062 C7.63746358,7.03822355 7.58645823,8.49882578
8.45587116,9.431157 L8.84011086,9.84320363 C9.07966487,10.1000939
9.06561109,10.5025414 8.80872086,10.7420954 C8.55183064,10.9816495
8.14938307,10.9675957 7.90982905,10.7107054 L7.52558935,10.2986588
C6.1770684,8.85254714 6.25618131,6.58704977 7.70229299,5.23852882
L10.1639444,2.9430017 C11.6380847,1.56834368 13.9350405,1.62939608
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
</span>
</span>
</h4>
<p>No, our 65 JavaScript components, including the Rich Text Editor, are not sold
individually, only as a single package. However, we have competitively priced the
product so it only costs a little bit more than what some other vendors charge for
their rich text editor alone. We have also found that, in our experience, our
customers usually start off using one of our products and then expand to several
products quickly, so we felt it was best to offer all 65 JavaScript components for a
flat fee of <strong>$995/developer</strong>. On top of this, we might be able to
offer additional discounts based on currently active promotions. Please contact our
<a href="https://www.syncfusion.com/company/contact-us">sales team</a> today to see
if you qualify for any additional discounts.</p>
</div>
</div>
</div>
Can I download and utilize the
Syncfusion JavaScript Rich Text Editor for free?
</span>
<path
d="M10.5848002,6.74053545 L10.9690399,7.15258208 C12.3175608,8.59869375
12.2384479,10.8641911 10.7923362,12.2127121 L8.33068479,14.5082392
C6.85654455,15.8828972 4.55958873,15.8218448 3.2004829,14.3643822
C1.84137707,12.9069197 1.94070093,10.6113003 3.41484117,9.23664232
L4.799664,7.94527414 C5.05655422,7.70572013 5.4590018,7.71977391
5.69855581,7.97666413 C5.93810982,8.23355436 5.92405604,8.63600193
5.66716581,8.87555594 L4.28234299,10.1669241 C3.31854461,11.0656806
3.25403309,12.5567009 4.1307647,13.4968804 C5.00749632,14.43706 6.4993846,14.4767139
7.46318298,13.5779574 L9.92483443,11.2824303 C10.8571657,10.4130173
10.908171,8.95241512 10.0387581,8.02008389 L9.65451838,7.60803726
C9.41496437,7.35114703 9.42901815,6.94869946 9.68590837,6.70914545
C9.9427986,6.46959144 10.3452462,6.48364522 10.5848002,6.74053545 Z
M15.2941463,3.08685865 C16.6532522,4.54432121 16.5539283,6.83994057
15.0797881,8.21459858 L13.6949652,9.50596676 C13.438075,9.74552077
13.0356274,9.73146699 12.7960734,9.47457676 C12.5565194,9.21768654
12.5705732,8.81523896 12.8274634,8.57568495 L14.2122863,7.28431677
C15.1760846,6.38556025 15.2405961,4.89454001 14.3638645,3.95436046
C13.4871329,3.01418091 11.9952446,2.97452697 11.0314463,3.8732835
L8.5697948,6.16881062 C7.63746358,7.03822355 7.58645823,8.49882578
8.45587116,9.431157 L8.84011086,9.84320363 C9.07966487,10.1000939
9.06561109,10.5025414 8.80872086,10.7420954 C8.55183064,10.9816495
8.14938307,10.9675957 7.90982905,10.7107054 L7.52558935,10.2986588
C6.1770684,8.85254714 6.25618131,6.58704977 7.70229299,5.23852882
L10.1639444,2.9430017 C11.6380847,1.56834368 13.9350405,1.62939608
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
</span>
</span>
</h4>
<p>No, this is a commercial product and requires a paid license. However, a <a
href="https://www.syncfusion.com/products/communitylicense">free community
license</a> is also available for companies and individuals whose organizations have
less than $1 million USD in annual gross revenue and five or fewer developers.</p>
</div>
</div>
</div>
How do I get started with the
Syncfusion JavaScript Rich Text Editor?
</span>
<path
d="M10.5848002,6.74053545 L10.9690399,7.15258208 C12.3175608,8.59869375
12.2384479,10.8641911 10.7923362,12.2127121 L8.33068479,14.5082392
C6.85654455,15.8828972 4.55958873,15.8218448 3.2004829,14.3643822
C1.84137707,12.9069197 1.94070093,10.6113003 3.41484117,9.23664232
L4.799664,7.94527414 C5.05655422,7.70572013 5.4590018,7.71977391
5.69855581,7.97666413 C5.93810982,8.23355436 5.92405604,8.63600193
5.66716581,8.87555594 L4.28234299,10.1669241 C3.31854461,11.0656806
3.25403309,12.5567009 4.1307647,13.4968804 C5.00749632,14.43706 6.4993846,14.4767139
7.46318298,13.5779574 L9.92483443,11.2824303 C10.8571657,10.4130173
10.908171,8.95241512 10.0387581,8.02008389 L9.65451838,7.60803726
C9.41496437,7.35114703 9.42901815,6.94869946 9.68590837,6.70914545
C9.9427986,6.46959144 10.3452462,6.48364522 10.5848002,6.74053545 Z
M15.2941463,3.08685865 C16.6532522,4.54432121 16.5539283,6.83994057
15.0797881,8.21459858 L13.6949652,9.50596676 C13.438075,9.74552077
13.0356274,9.73146699 12.7960734,9.47457676 C12.5565194,9.21768654
12.5705732,8.81523896 12.8274634,8.57568495 L14.2122863,7.28431677
C15.1760846,6.38556025 15.2405961,4.89454001 14.3638645,3.95436046
C13.4871329,3.01418091 11.9952446,2.97452697 11.0314463,3.8732835
L8.5697948,6.16881062 C7.63746358,7.03822355 7.58645823,8.49882578
8.45587116,9.431157 L8.84011086,9.84320363 C9.07966487,10.1000939
9.06561109,10.5025414 8.80872086,10.7420954 C8.55183064,10.9816495
8.14938307,10.9675957 7.90982905,10.7107054 L7.52558935,10.2986588
C6.1770684,8.85254714 6.25618131,6.58704977 7.70229299,5.23852882
L10.1639444,2.9430017 C11.6380847,1.56834368 13.9350405,1.62939608
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
<path d="M10,12.2928932
L4.35355339,6.64644661 C4.15829124,6.45118446 3.84170876,6.45118446
3.64644661,6.64644661 C3.45118446,6.84170876 3.45118446,7.15829124
3.64644661,7.35355339 L9.64644661,13.3535534 C9.84170876,13.5488155
10.1582912,13.5488155 10.3535534,13.3535534 L16.3535534,7.35355339
C16.5488155,7.15829124 16.5488155,6.84170876 16.3535534,6.64644661
C16.1582912,6.45118446 15.8417088,6.45118446 15.6464466,6.64644661 L10,12.2928932 Z"
</g>
</svg>
</span>
</span>
</span>
</h4>
<p>A good place to start would be our comprehensive <a
href="https://ej2.syncfusion.com/documentation/rich-text-editor/getting-
started/">getting started documentation</a>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section id="g2-crowd-review-section">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-5 col-xs-8 review-section

g2-review">
<a rel="nofollow"
href="https://www.g2.com/products/syncfusion-essential-studio-enterprise-edition/
reviews">
<picture>
<source
srcset="https://cdn.syncfusion.com/content/images/FT/common/syncfusion-g2-
review.webp" alt="Syncfusion G2 review" type="image/webp">
<img width="206.39" height="156.72"
src="https://cdn.syncfusion.com/content/images/FT/common/syncfusion-g2-review.png"
alt="Syncfusion G2 review" loading="lazy" />
</picture>
</a>
</div>
<div class="col-lg-8 col-md-8 col-sm-7 col-xs-12 download-section
g2-review">
<h2>
Read independent,<br /> authenticated reviews<br /> on G2
</h2>
<span>
<a class="download-button"
href="/downloads/essential-js2">Download Now</a>
<a class="pricing-button"
href="/sales/products/javascript">Pricing</a>
</span>
</div>
</div>
</div>
</section>
<section id="customer-testimonial-section">
<h2 class="text-center">
What do our customers say about us?
</h2>
<div class="row">
<div class="testimonial-section">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 testimonial-
content match-height">
<div class="testimonial-block">
<div class="testimonial-message first-section">
<p class="testimonial-quote-image">
<img
src="https://cdn.syncfusion.com/content/images/FT/common/double-quotes-icon.png"
alt="double quotes" width="38" height="30" loading="lazy">
</p>
We're using the file formats and Windows/JavaScript list controls a lot.
They're fast, easy to use, and the documentation is good and contains examples.
Tickets with questions or suggestions were answered within a day, so we're happy to
use the Syncfusion libraries.
</div>
</div>
<div class="row customer-information">
<div class="profile-image">
<img width="105" height="105"
src="https://cdn.syncfusion.com/content/images/FT/common/avatar-2.png?
v=03022022074210" alt="Daniel Persidok" loading="lazy" />
</div>
</div>
<div class="col-lg-6 col-
md-6 col-sm-6 col-xs-12 customer-details">
<div class="testimonial-author">
<p class="author-name">
Daniel Persidok
</p>
<p class="author-details">
wpd onshore GmbH & Co. KG
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 testimonial-
content match-height">
<div class="testimonial-block">
<div class="testimonial-message second-section">
<p class="testimonial-quote-image">
<img
src="https://cdn.syncfusion.com/content/images/FT/common/double-quotes-icon.png"
alt="double quotes" width="38" height="30" loading="lazy">
</p>
Using Syncfusion Angular and JavaScript controls makes front-end web

development a piece of cake. Each component has many properties that can be
configured as per your desire, methods that can be used to interact with the element,
and a lot of events that trigger at different stages, which makes modifying your
components according to the state of the application an easy task. Also, their
support is amazing! They always offer a sample working project, which makes it very
simple to solve your question about your code.
</div>
</div>
<div class="row customer-information">
<div class="profile-image">
src="https://cdn.syncfusion.com/content/images/FT/common/avatar-1.png?
v=03022022074210" alt="Carlos Rodriguez Garcia" loading="lazy" />
</div>
</div>
<div class="col-lg-6 col-
md-6 col-sm-6 col-xs-12 customer-details">
<div class="testimonial-author">
<p class="author-name">
Carlos Rodriguez Garcia
</p>
<p class="author-details">
Vistatec
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="download-free-trial" class="content-center bg-lazy">

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-content">
<h3><span>Transform your applications today by downloading our free
evaluation version</span>
<a href="/downloads/essential-js2">Download Free Trial</a></h3>

</div>
</div>
</div>
</div>
<div class="text-center segment xamarin-new-ft technical-support-v1 technical-

support-controls" id="technical-support">
<div class="row">
<div class="platform-heading-text">Syncfusion JavaScript
<span id="control-name-title"></span> Resources</div>
<div class="col-sm-12 col-md-12 col-xs-12 category-container heading-
3">
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12
category-columns">
<span class="category-heading-text">Learning</span>
<a
href="https://ej2.syncfusion.com/aspnetmvc/documentation/" class="block">
<div class="support-link-section">
<img
src="//cdn.syncfusion.com/content/images/FT/common/learning-and-resources/
documentation.svg?v=03022022074210" alt="documentation" loading="lazy"/>
<span class="link-item-
title">Documentation</span>
</div>
</a>
</div>
category-columns">
<span class="category-heading-text">Technical
Support</span>
<a href="https://support.syncfusion.com/create"
class="block">
<img
direct_trac.svg?v=03022022074210" alt="contact-support" loading="lazy"/>
<span class="link-item-title">Contact
Support</span>
</div>
</a>
<a href="/forums/aspnetmvc-js2" class="block">
<img
src="//cdn.syncfusion.com/content/images/FT/common/learning-and-resources/forum.svg?
v=03022022074210" alt="forum" loading="lazy"/>
<span class="link-item-title">Community
Forum</span>
</div>
</a>
<a
href="https://www.syncfusion.com/feedback/javascript" class="block">
<img
feedback.svg?v=03022022074210" alt="Features & Bugs" loading="lazy"/>
<span class="link-item-title">Features
& Bugs</span>
</div>
</a>
</div>
category-columns">
<span class="category-heading-text">UI Kits</span>
<a
href="https://cdn.syncfusion.com/resources/EJ2+Sketch/Syncfusion-EJ2-Sketch-UI-
Resource-V1.01.zip" class="block">
<img
sketch_download.svg?v=03022022074210" alt="Sketch Download" loading="lazy"/>
<span class="link-item-title">Sketch
Download</span>
</div>
</a>
<a href="
https://cdn.syncfusion.com/resources/EJ2+XD/Syncfusion-EJ2-Adobe-XD-UI-Resource-
V1.01.zip" class="block">
<img
adobe_xd_download.svg?v=03022022074210" alt="Adobe XD Download" loading="lazy"/>
<span class="link-item-title">Adobe XD
Download</span>
</div>
</a>
<a href="
https://cdn.syncfusion.com/resources/EJ2+Figma/Syncfusion-EJ2-Figma-UI-Resource-
V1.01.zip" class="block">
<img
src="//cdn.syncfusion.com/content/images/FT/common/learning-and-resources/figma.svg?
v=03022022074210" alt="Figma Download" loading="lazy"/>
<span class="link-item-title">Figma
Download</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="awards" class="segment">

<div class="container segment">
<div class="row">
<h3 id="award-heading">Awards</h3>
<p id="award-desc" class="">
<span id="award-desc-line-1">Greatness—it’s one thing to say you
have it, but it means more when others recognize it.</span>
<span>Syncfusion is proud to hold the following industry
awards.</span>
</p>
<div class="all-awards text-center hidden-xs">

<picture>
<source srcset="https://cdn.syncfusion.com/content/images/home-
v1/awards/recent-syncfusion-awards.webp" alt="Syncfusion Awards" type="image/webp">
src="https://cdn.syncfusion.com/content/images/home-v1/awards/recent-syncfusion-
awards.png" alt="Syncfusion Awards" loading="lazy" />
</picture>
</div>
<div class="all-awards text-center hidden-lg hidden-md hidden-sm">

<picture>
<source srcset="https://cdn.syncfusion.com/content/images/home-
v1/awards/mobile-recent-syncfusion-awards.webp" alt="Syncfusion Awards"
type="image/webp">
src="https://cdn.syncfusion.com/content/images/home-v1/awards/mobile-recent-
syncfusion-awards.png" alt="Syncfusion Awards" loading="lazy" />
</picture>
</div>
</div>
</div>
</div>
<a class="back-to-top inner-link" href="#" data-scroll-class="100vh:active">

<img width="15" height="9" class="stack-interface stack-up-open-big"
src="https://cdn.syncfusion.com/content/images/products/whats-new/optimizedimages/up-
arrow.png" alt="Up arrow icon" loading="lazy" />
</a>
<div id="footer-warpper" class="segment">

<div class=" col-lg-offset-1 col-lg-2 col-md-3 col-sm-8 col-xs-12
hidden-xs content-list ">
<div class="top-content content-medium">PRODUCTS</div>

<li class="content-small"><a
href="/products/essential-studio"> Developer Platform</a></li>
href="https://www.boldbi.com/">Analytics Platform</a></li>
href="https://www.boldreports.com">Reporting Platform</a></li>
href="https://www.boldsign.com/?
utm_source=syncfusionnavfooter&utm_medium=referral&utm_campaign=boldsign">E-Signature
Software and API</a></li>
</ul>
</div>
<div class="top-content content-medium">EXPLORE OUR

PRODUCTS</div>
href="/downloads">Free Trial</a></li>
href="/sales/products">Pricing</a></li>
</ul>
</div>
<div class="top-content content-medium">RESOURCES</div>

<li class="content-small"><a href="/succinctly-
free-ebooks">Ebooks</a></li>
<li class="content-small"><a href="/kb">Knowledge
Base</a></li>
href="/resources/techportal/whitepapers">White Papers</a></li>
<li class="content-small"><a href="/company/case-
studies">Case Studies</a></li>
<li class="content-small"><a href="/faq">.NET
FAQ</a></li>
</ul>
</div>
<div class="top-content content-medium">LEARNING &

SUPPORT</div>
href="/demos">Demos</a></li>
<li class="content-small"><a rel="noopener"
href="https://help.syncfusion.com/" target="_blank">Documentation</a></li>
href="/forums">Community Forum</a></li>
href="https://support.syncfusion.com/create">Contact Support</a></li>
<li class="content-small"><a href="/feedback"
target="_blank">Features & Bugs</a></li>
<li class="content-small"><a href="/tutorial-
videos">Tutorial Videos</a></li>
</ul>
</div>
<div class="top-content content-medium">COMPANY</div>

href="/company/about-us">About Us</a></li>
href="/company/about-us/customerlist">Customers</a></li>
<li class="content-small"><a href="/company/news-
press-release">News & Events</a></li>
href="/company/careers">Careers</a></li>
href="/company/partners">Partners</a></li>
</ul>
</div>
</div>
</div>
<div id="footer-bottom">
<div class="row">
<div class="col-sm-8 hidden-xs content-small ">

<div class="footer-syncfusion-logo">
<a class="sync-logo-img" title="Syncfusion" href="/">
</a>
</div>
<div class="link">
<a class="social-link" href="/privacy">Privacy Policy</a> |
<a class="social-link" href="/cookie-policy">Cookie Policy</a> |
<a class="social-link" href="/terms-of-use">Terms of Use</a>
</div>
<div id="copyright-desktop">
<a class="social-link" href="/copyright">Copyright © 2001 - 2022
Syncfusion Inc. All Rights Reserved</a>
</div>
</div>
<div class="col-sm-4 hidden-xs footer-contact-section">
<div class="footer-contact-fax">
<li class="list-content">Fax: +1 919.573.0306</li>
<li class="list-content">US: +1 919.481.1974</li>
<li class="list-content">UK: +44 20 7084 6215</li>
</ul>
</div>
<div class="footer-contact-mail">
<li class="list-content toll-free">Toll Free (USA):<br />1-
888-9DOTNET</li>
<li class="list-content"><a
href="mailto:sales@syncfusion.com">sales@syncfusion.com</a></li>
</ul>
</div>
<div class="col-sm-12 footer-icons-section">
<ul id="footer-icon-desktop">
<li>
<a rel="nofollow" class="social-icon footerSpriteAll"
id="footer_icon_facebook_desktop" target="_blank"
href="https://www.facebook.com/Syncfusion">
<i title="Follow Syncfusion on Facebook"
class="footer-social-icon socicon-facebook"></i>
</a>
</li>
<li>
id="footer_icon_twitter_desktop" target="_blank"
href="https://twitter.com/Syncfusion">
<i title="Follow Syncfusion on Twitter"
class="footer-social-icon socicon-twitter"></i>
</a>
</li>
<li>
id="footer_icon_linkedin_desktop" target="_blank"
href="https://www.linkedin.com/company/syncfusion?trk=top_nav_home">
<i title="Follow Syncfusion on LinkedIn"
class="footer-social-icon socicon-linkedin"></i>
</a>
</li>
<li>
id="footer_icon_youtube_desktop" target="_blank"
href="https://www.youtube.com/syncfusioninc">
<i title="Follow Syncfusion on YouTube"
class="footer-social-icon socicon-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="visible-xs mobile-footer text-center">
<h2> <b>CONTACT US</b></h2>
<ul class="footer-contact-fax">
<li class="list-content">Fax: +1 919.573.0306</li>
<li class="list-content">US: +1 919.481.1974</li>
<li class="list-content">UK: +44 20 7084 6215</li>
<li class="list-content toll-free">Toll Free (USA):<br />1-888-
9DOTNET</li>
</ul>
<ul class="footer-contact-mail">
<li class="list-content"><a
href="mailto:sales@syncfusion.com">sales@syncfusion.com</a></li>
</ul>
<ul id="footer-icon">
<li>
id="footer_icon_facebook" target="_blank" href="https://www.facebook.com/Syncfusion">
<i title="Follow Syncfusion on Facebook" class="footer-
social-icon socicon-facebook" aria-hidden="false"></i>
</a>
</li>
<li>
id="footer_icon_twitter" target="_blank" href="https://twitter.com/Syncfusion">
<i title="Follow Syncfusion on Twitter" class="footer-
social-icon socicon-twitter"></i>
</a>
</li>
<li>
id="footer_icon_linkedin" target="_blank"
href="https://www.linkedin.com/company/syncfusion?trk=top_nav_home">
<i title="Follow Syncfusion on LinkedIn" class="footer-
social-icon socicon-linkedin"></i>
</a>
</li>
<li>
id="footer_icon_youtube" target="_blank"
href="https://www.youtube.com/syncfusioninc">
<i title="Follow Syncfusion on YouTube" class="footer-
social-icon socicon-youtube"></i>
</a>
</li>
</ul>
<div class="copyright">
<div class="link">
<a class="social-link" href="/privacy">Privacy Policy</a> |
<a class="social-link" href="/cookie-policy">Cookie
Policy</a> |
<a class="social-link" href="/terms-of-use">Terms of Use</a>
</div>
<div id="copyright">
<a class="social-link" href="/copyright">Copyright © 2001 -
2022 Syncfusion Inc. All Rights Reserved</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="IE-notifiyPopup" id="upgradeIE">

<div class="container popuptext">
<div>
<p>
<span id="warningicon">
<img
src="//cdn.syncfusion.com/content/images/HomePage-new/optimizedImages/warning.png"
alt="Warning Icon" />
</span>You are using an outdated version of Internet Explorer
that may not display all features of this and other websites. Upgrade to Internet
Explorer 8 or newer for a better experience.<a class="closepopup" href="#"><img
src="//cdn.syncfusion.com/content/images/HomePage-new/optimizedImages/close.png"
alt="Close Icon" /></a>
</p>
</div>
</div>
</div>
<script defer>
var customVariable_Analytics = {
sid: '1450860',
Email: 'glorrious86@gmail.com',
Name: 'muhammadimran Ali',
Ip: '103.104.213.206'
};
</script>
<script defer>
var User_Ip = '103.104.213.206';
</script>
<script
src="https://cdn.syncfusion.com/scripts/bootstrap/Integrity/bootstrap3.7.1.min.js?
v1"></script>
<script
src="https://cdn.syncfusion.com/scripts/bootstrap/BootstrapLayoutV10.min.js"></
script>
<script
src="https://cdn.syncfusion.com/scripts/jquery/Integrity/MicrosoftMvcAjax.js?v1"
defer></script>
<script
src="https://cdn.syncfusion.com/scripts/bootstrap/FeedbackBootstrapV1.min.js"
defer></script>
<script>
//$(document).ready(function () {
// if ($.session.get("IsShowNotifcation") == "false") {
// $("#maintenance_popup").css({ "display": "none" });
// }
//});
</script>
<div id="getservertime" hidden>3/26/2022 11:49:32 PM</div>
<script
src="https://cdn.syncfusion.com/scripts/components/jquery.lazy.min.js"></script>
<script src="https://cdn.syncfusion.com/scripts/FT/master/common/codesnippet-
clipboard-prettify.min.js" defer></script>
<script src="https://cdn.syncfusion.com/scripts/FT/v1/shared/masonry-
matchHeight.min.js"></script>
<script src="https://cdn.syncfusion.com/scripts/components/common/js/jquery-ui-
accordion.min.js"></script>
<script
src="https://cdn.syncfusion.com/scripts/FT/master/NewFTControl_v15.min.js"
defer></script>
<script src="https://cdn.syncfusion.com/scripts/FT/v1/shared/stack-
smoothScroll.min.js" defer></script>
<script>
$(document).ready(function () {
$(".testimonial-block").matchHeight();
$(".g2-review").matchHeight();
});
</script>
<script
src="https://cdn.syncfusion.com/scripts/jquery/Integrity/jquery.sessionall.min.js?v1"
defer></script>
<script type='text/javascript'>$(function($){});</script>
<script type="text/javascript" defer>

window.$crisp = [];
if (window.location.hostname == "www.syncfusion.com") {
window.CRISP_WEBSITE_ID = "d9c2ea7b-ee33-48d1-a5f5-67ecb95ac4bc";
}
(function () { d = document; s = d.createElement("script"); s.src =
"https://client.crisp.chat/l.js"; s.async = 1; d.getElementsByTagName("head")
[0].appendChild(s); })();</script>
<div id="WebinarForFTExpiration" hidden>Tue, 18 February 2020 15:00:00 UTC</div>

<div id="ToasterExpirationDate" hidden>Wed, 16 Feb 2022 04:59:00 UTC</div>
<script src="https://cdn.syncfusion.com/scripts/Home/BootstrapLayout/Master/
BootstrapLayoutEssentialScripts_v13.min.js?v14" defer></script>
<div id="chat-icon-mobile">
<img id="chatIconmobile" class="live-chat-section-mobile" alt="Live Chat Icon
For mobile" src="https://cdn.syncfusion.com/content/images/chat_icon.svg" />
</div>
<input id="chatwithanimation" name="chatwithanimation" type="hidden"

value="withoutanimation" />
<img id="chatIcon" alt="Live Chat Icon"
src="https://cdn.syncfusion.com/content/images/chat_icon.svg" class="hidden-xs live-
chat-section-without-animation" />
<script>
$("#CookieNotification").find(".row").addClass("cookiepadding");
</script>
<input id="user-uuid" value="sxsOI1AYWUrm1AWU" hidden />

<script type="text/javascript" async>
(function (a, l, b, c, r, s) {
_nQc = c, r = a.createElement(l), s = a.getElementsByTagName(l)[0];
r.async = 1;
r.src = l.src = b;
s.parentNode.insertBefore(r, s);})
(document, "script",
"https://cdn.syncfusion.com/scripts/albacross/track-new-v2.min.js", 89771148);
</script>
<script type="text/javascript" async>

var om_load_webfont = false;
</script>
_linkedin_partner_id = "1528546";
window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
window._linkedin_data_partner_ids.push(_linkedin_partner_id);
</script>
(function () {
var s = document.getElementsByTagName("script")[0];
var b = document.createElement("script"); b.type = "text/javascript";
b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
s.parentNode.insertBefore(b, s);
})();
</script>
<noscript>
<img height="1" width="1" style="display:none;" alt=""
src="https://px.ads.linkedin.com/collect/?pid=1528546&fmt=gif" />
</noscript>
</body>
</html>

JavaScript Rich Text Editor in HTML5

Uploaded by

JavaScript Rich Text Editor in HTML5

Uploaded by

<!

<html lang="en" xml:lang="en">

<meta name="googlebot" content="follow, index" />

<title>JavaScript Rich Text Editor | WYSIWYG editor in HTML5 |

<meta name='description' content="JavaScript Rich Text Editor(HTML5

<meta name="keywords" content="ejrichtext editor, rte, ejrte, ej2 rte,

<meta property="og:title" content="JavaScript Rich Text Editor |

<meta property="og:type" content="website" />

<meta property="og:description" content="JavaScript Rich Text

<meta property="og:site_name" content="Syncfusion"/>

<meta name="twitter:card" content="summary" />

<meta name="twitter:author" content="Syncfusion" />

<meta name="twitter:title" content="JavaScript Rich Text Editor |

<meta name="twitter:description" content="JavaScript Rich Text

<meta property="fb:app_id" content="1003714633042650"/>

<meta property="twitter:account_id" content="41152441"/>

<link rel="canonical" href="https://www.syncfusion.com/javascript-ui-

<div id="ie-notification" style="display:none">

var currentUTCTime = new Date(new Date().toUTCString());

if (currentUTCTime < new Date('21 Mar 2022 16:00:00 GMT')) {

var myDiv = $("#webinar_popup_temp");

<input id="customerHaveActiveLicense" name="customerHaveActiveLicense" type="hidden"

<div class="unconfirmed-error-notification hide">

<p class="marketing-banner-content"><b>Bold BI</b> : Embedded analytics and

<button type="button" class="navbar-toggle collapsed" data-

<li class="sub-menu-list"> <a class="menu-item"

<div id="search-container" class="row">

<form action="/search" method="get"> <div class="col-lg-offset-3 col-lg-5 col-

<div id="feedbacks-dialogue_wrapper" class="modal fade" data-easein="slideLeftIn"

<div id="feedbackcloseicon" data-dismiss="modal" data-

<div class="thankyou-message hide">

<div class="feedback-confirmation">Thank you for your feedback and

<input id="controlNameCaps" name="controlNameCaps" type="hidden" value="js wysiwyg

<div id="control-banner-content" style="background-image:

<span id="static-control-name">js wysiwyg rich text

<div class="col-lg-4 hidden-md hidden-sm hidden-xs" id="navigation-

<div class="featuretour-markdown" id="featuretour-markdown">

<div class="row ft-one-column segment">

<iframe class="lazy-iframe" loading="lazy"

<div class="row ft-two-column">

<h2 id="wysiwyg-html-editor">WYSIWYG HTML editor</h2>

<div class="row ft-two-column">

<h2 id="wysiwyg-markdown-editor">WYSIWYG Markdown editor</h2>

<div class="row ft-two-column">

<h2 id="inline-mode">Inline mode</h2>

<div class="row ft-two-column">

<h2 id="wysiwyg-html-editor-iframe-mode">WYSIWYG HTML editor Iframe mode</h2>

<div class="row multi-column-conent-container">

<iframe class="lazy-iframe" style="height:240px"

<h3 id="multi-row-toolbar">Multi-row toolbar</h3>

<iframe class="lazy-iframe" style="height:240px"

<h3 id="expand-toolbar">Expand toolbar</h3>

<h3 id="quick-toolbar">Quick toolbar</h3>

<h3 id="floating-the-toolbar">Floating the toolbar</h3>

<h3 id="fully-customizable">Fully customizable</h3>

<iframe class="lazy-iframe" style="height:248px"

<h3 id="custom-tool">Custom tool</h3>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 multi-col-contents">

<h3 id="formatting-text">Formatting text</h3>

<iframe class="lazy-iframe" style="height:400px"

<h3 id="insert-images">Insert images</h3>

<h3 id="insert-hyperlinks">Insert hyperlinks</h3>

<h3 id="insert-tables">Insert tables</h3>

<h3 id="text-alignment">Text alignment</h3>

<p>Built-in settings are available to justify content or align it to the left,

<h3 id="enter-and-shiftenter-key-configuration">Enter and Shift+Enter key

<div class="row ft-two-column">

<h2 id="adding-lists">Adding lists</h2>

<p>Create ordered (numbered) or unordered (bulleted) lists to organize content.</p>

<div class="row ft-two-column">

<h2 id="custom-lists">Custom lists</h2>

<div class="row ft-two-column">

<div class="top-content content-medium">LEARNING &