Third-Party Integration in ASP.NET Core Rich Text Editor
The Rich Text Editor can be integrated with third-party libraries to suit the application scenario.
CodeMirror integration
The Rich Text Editor comes with a basic HTML source editor through the view-source property. The CodeMirror plugin can be used to highlight the syntax of HTML. The CodeMirror plugin for the Rich Text Editor makes editing HTML source code a pleasant experience.
Import the necessary CSS and JS files of CodeMirror to the HTML page.
Required JS files of CodeMirror:
<script src="scripts/CodeMirror/codemirror.js" type="text/javascript"></script>
<script src="scripts/CodeMirror/javascript.js" type="text/javascript"></script>
<script src="scripts/CodeMirror/css.js" type="text/javascript"></script>
<script src="scripts/CodeMirror/htmlmixed.js" type="text/javascript"></script>Required CSS file of CodeMirror:
<link href="scripts/CodeMirror/codemirror.min.css" rel="stylesheet" />Add a custom icon for the HTML source editor in the toolbar of the Rich Text Editor using the template option of toolbarSettings, define the CodeMirror plugins, and then pass the Rich Text Editor content as an argument in the actionComplete event.
<div class="control-section">
<ejs-richtexteditor id="editor" value="@ViewBag.value" actionComplete="actionCompleteHandler" created="created">
<e-richtexteditor-toolbarsettings items="@ViewBag.tools">
</e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/css/css.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>
<style>
.e-code-mirror::before {
content: '\e345';
}
.e-html-preview::before {
content: '\e350';
}
.CodeMirror-linenumber,
.CodeMirror-gutters {
display: none;
}
.sb-header {
z-index: 100;
}
</style>
<script type="text/javascript">
var defaultRTE;
var divPreview;
var myCodeMirror;
var textArea
divPreview = document.getElementById('DIV_Preview');
function created() {
defaultRTE = this;
textArea = defaultRTE.contentModule.getEditPanel();
}
function mirrorConversion(e) {
var id = defaultRTE.getID() + 'mirror-view';
var mirrorView = defaultRTE.element.querySelector('#' + id);
var charCount = defaultRTE.element.querySelector('.e-rte-character-count');
if (e.targetItem === 'Preview') {
textArea.style.display = 'block';
mirrorView.style.display = 'none';
textArea.innerHTML = myCodeMirror.getValue();
charCount.style.display = 'block';
}
else {
if (!mirrorView) {
mirrorView = ej.base.createElement('div', { className: 'e-content' });
mirrorView.id = id;
textArea.parentNode.appendChild(mirrorView);
}
else {
mirrorView.innerHTML = '';
}
textArea.style.display = 'none';
mirrorView.style.display = 'block';
renderCodeMirror(mirrorView, defaultRTE.value);
charCount.style.display = 'none';
}
}
function renderCodeMirror(mirrorView, content) {
myCodeMirror = CodeMirror(mirrorView, {
value: content,
lineNumbers: true,
mode: 'text/html',
lineWrapping: true,
});
}
function actionCompleteHandler(e) {
if (e.targetItem && (e.targetItem === 'SourceCode' || e.targetItem === 'Preview')) {
this.sourceCodeModule.getPanel().style.display = 'none';
mirrorConversion(e);
}
else {
setTimeout(function () { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);
}
}
</script>public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
ViewBag.tools = new[] { "SourceCode" };
return View();
}
}At.js Integration
The Rich Text Editor can be easily integrated with the At.js library. To display the autocomplete list, type ‘@’.
Include At.JS style.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">Include At.JS javascript.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/js/jquery.atwho.min.js"></script>Define the At.js configuration
In the following configuration, the email IDs of employees are used as the data source.
var config = {
at: "@",
data: [email id of employees list],
displayTpl: '<li>${name} <small>${email}</small></li>',
limit: 200
}Populate the employee’s email id from local or remote data and set the result to the data of At.js configuration.
<ejs-richtexteditor id="at-integration" created="created" value="@ViewBag.value">
<e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
<script src="//cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/js/jquery.atwho.min.js"></script>
<script>
// Build data to be used in At.JS config.
var employeeList = [
{ id: 'emp01', name: 'Jacob', email: 'jacob@mail.com' },
{ id: 'emp02', name: 'Isabella', email: 'isabella@mail.com' },
{ id: 'emp03', name: 'Ethan', email: 'ethan@mail.com' },
{ id: 'emp04', name: 'Emma', email: 'emma@mail.com' },
{ id: 'emp05', name: 'Michael', email: 'michael@mail.com' },
{ id: 'emp06', name: 'Olivia', email: 'olivia@mail.com' },
{ id: 'emp07', name: 'Jeniffer', email: 'jeniffer@mail.com' }
];
var config = {
at: "@@",
data: employeeList,
displayTpl: '<li>${name} <small>${email}</small></li>',
limit: 200
};
function created(args) {
var textArea = this.contentModule.getEditPanel();
$(textArea).atwho(config);
$(textArea).on('keydown', function (e) {
if (e.keyCode == 13 && $(textArea).atwho('isSelecting'))
return false;
});
}
</script>public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
ViewBag.items = new object[] {"|", "Undo", "Redo", "|",
"Bold", "Italic", "Underline", "StrikeThrough", "|",
"FontName", "FontSize", "FontColor", "BackgroundColor", "|",
"SubScript", "SuperScript", "|",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "|", "OrderedList", "UnorderedList", "|",
"Outdent", "Indent", "|", "CreateLink", "CreateTable", "Image", "|", "SourceCode"};
return View();
}
}Embedly integration
This can be achieved by binding the actionComplete event to the toolbar items in the toolbarSettings property. In the event handler, create an element and add the appropriate class. The below script is have to add in the sample to embed the content,
Include embedly javascript.
<script src="https://cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>The above script is added to the page.
<ejs-richtexteditor id="embedly" actionComplete="actionComplete" value="@ViewBag.value">
<e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
<script async src="https://cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
<script>
function actionComplete(args) {
if (args.requestType === 'Links') {
if (args.elements[0].parentNode && args.elements[0].parentNode.tagName === 'A') {
var emberEle = document.createElement('blockquote');
emberEle.setAttribute('class', 'embedly-card');
emberEle.appendChild(args.elements[0].parentElement);
emberEle.appendChild(document.createElement('p'));
args.range.insertNode(emberEle);
}
}
}
</script>public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
ViewBag.items = new object[] { "CreateLink" };
return View();
}
}