This samples illustrates, how to integrate the code mirror plugin in our RichTextEditor component. In here, added an custom tool which toggles between 'code view' and 'preview'

More Details...

The rich text editor is WYSIWYG ("what you see is what you get") editor useful to create and edit content, and return the valid HTML markup or markdown of the content


  1. Toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operations,HTML view, etc

  2. Toolbar is fully customizable


  1. You can insert a hyperlink with its corresponding dialog

  2. Attach a hyperlink to the displayed text.

  3. Customize the quick toolbar based on the hyperlink


  1. Allows you to insert images from an online source as well as the local computer

  2. You can upload an image

  3. Provides an option to customize quick toolbar for an image


Code mirror plugins helps to highlight the HTML content and when changes happens in code view, the same has been reflected in preview mode. Injecting Module The above features built as modules have to be included in your application. For example, to use image and link, inject the specific module using RichTextEditor.Inject (Toolbar, Link, Image, HtmlEditor).