Third party integration in JavaScript Rich text editor control

18 Nov 20181 minute to read

The Rich Text Editor can be integrated with third-party to suite the application scenario.

CodeMirror integration

Rich Text Editor comes with a basic HTML source editor through view-source property. Code mirror plugin can be used to highlight the syntax of HTML. CodeMirror plugin for Rich Text Editor makes editing of HTML source code with a pleasant experience.

Import necessary CSS and JS files of CodeMirror to the HTML page.

Required JS files of code mirror.

 <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 code mirror.

 <link href="scripts/CodeMirror/codemirror.min.css" rel="stylesheet" />

Add a custom icon for HTML source editor in the toolbar of Rich Text Editor using template option of toolbarSettings and define the code mirror plugins, and then pass the Rich Text Editor content as argument in actionComplete event.

Embedly integration

Rich Text Editor easily integrate with Embed.ly which is probably the best service when it comes to embed the rich content such as Twitter, Facebook and lots of other publishing platform embeds.

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.

<script src="https://cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

The above script is added to the page.