Last month I wrote a post called A Better Dynamics CRM E-mail Editor With TinyMCE in which I showed how to create a better Dynamics CRM e-mail editing interface using TinyMCE. Since then I have done some work with Markdown, and I decided it would be an interesting exercise to make a Markdown-enabled e-mail editor. For typical CRM users, the TinyMCE editor is probably the better approach for e-mail editing, but I think Markdown is a useful, light-weight HTML editing solution, and this overview will show how easy it is to get working inside Dynamics CRM.
Fundamentally this solution behaves the same as its TinyMCE cousin:
The only visible difference (other than the use of Markdown itself) is that for the e-mail editing screen in this example, we will have a live preview of the HTML in a separate container because the input text area only shows Markdown, not HTML.
Here is what the editor window will look like when we're done (you have to supply your own awesome imagefor the body):
Enabling Markdown support in the browser
- Markdown.Converter.js - This does the Markdown->HTML conversion.
- Markdown.Sanitizer.js - This lets you whitelist the HTML tags you want to allow. For example, you might not want to render script tags. We will not be sanitizing the HTML output in this example.
- Markdown.Editor.js - This enables a live preview of the Markdown->HTML conversion.
In addition to those files, the PageDown project offers a few editing demo resources:
- demo.css - This is a stylesheet used for formatting the demo editor objects.
- wmd-buttons.png#img-thumbnail - This is used to show the editor menu bar.
I have customized the files and saved them here for you to download - markdown-files.zip. You will need to make one customization to the Markdown.Editor.css file. After you upload the wmd.buttons.png#img-thumbnail file, go to line 78 in the Markdown.Editor.css file and replace "new_wmd.buttons.png#img-thumbnail" with whatever name you gave your wmd.buttons.png#img-thumbnail resource.
Generating the e-mail editor window
Here is the script that generates the editor window:
Once you publish the editor launching page and embed it on your e-mail form, you're all set. Happy e-mailing!