HTML Content Editor in CRM4

It is often required to format and validate HTML contents in CRM 4. Here is a quick way of integrating a JavaScript WYSIWYG Editor. You can find many open source as well as 3^rd part JavaScript WYSIWYG Editors. The editor I have used in my post is from TinyMCE – Javascript WYSIWYG Editor.

TinyMCE is a platform independent web based JavaScript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems

So here is a step by step process to integrate this editor to CRM4.

Step One:

Create an ASPX page with only one HTML TEXTAREA control and a Submit Button. TextArea control will hold the content editor and button will move the generated HTML to crmForm Controls.

<asp:TextBox ID=”Content” runat=”server” TextMode=”MultiLine”></asp:TextBox>

    <div>

        <asp:Button ID=”btnSubmit” runat=”server” Text=”Submit”

            onclick=”btnSubmit_Click” OnClientClick=”javascript:OnSubmit();” />

        </div>

    </form>

 And copy the script as provided below:

This Script can be found at http://tinymce.moxiecode.com/examples/full.php#

<script src=”<your installation path>/tiny_mce/tiny_mce.js”></script>

<script>

tinyMCE.init({

                // General options

                mode : “textareas”,

                theme : “advanced”,

                plugins : “safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager”,

 

                // Theme options

                theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect”,

                theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,

                theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,

                theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage”,

                theme_advanced_toolbar_location : “top”,

                theme_advanced_toolbar_align : “left”,

                theme_advanced_statusbar_location : “bottom”,

                theme_advanced_resizing : true,

 

                // Example content CSS (should be your site CSS)

                content_css : “css/example.css”,

 

                // Drop lists for link/image/media/template dialogs

                template_external_list_url : “js/template_list.js”,

                external_link_list_url : “js/link_list.js”,

                external_image_list_url : “js/image_list.js”,

                media_external_list_url : “js/media_list.js”,

 

                // Replace values for the template plugin

                template_replace_values : {

                                username : “Some User”,

                                staffid : “991234”

                }

});

</script>

 

 

Step Two:

Write two JavaScript functions to handle Onload and button submit events:

Onload will load the generated HTML to Editor and On Submit will submit form and load Generated HTML back to crmForm.

function OnSubmit()

{   

    document.myform.submit();   

    window.parent.document.forms[0].all.end_content.DataValue = document.getElementById(‘content’).value;

}

 

function OnLoad()

{

    document.getElementById(‘content’).value = window.parent.document.forms[0].all.new_content.DataValue;

}

 

Step Three:

Place this page at ISV/ folder and use an IFRAME at the form where you want this editor to be visible. Set the IFRAME src to this aspx form and you all set to go.

 

 

 

Generated HTML in crmForm control.

 

 

Let me know in case you need any assistance or suggestions.