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.

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.

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.