Home > ASP.NET, CRM Development, CRM Integrations, MSCRM General > HTML Content Editor in CRM4

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 3rd 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.

 aaa

 

 

Generated HTML in crmForm control.

 aa

 

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

About these ads
  1. ron
    September 28, 2009 at 1:52 pm

    i am a vey limited admin. i dont understand how to implement this. can you point out which are the user dependant bits and which are for you setup?

  2. September 29, 2009 at 12:14 am

    Well, its a bit tricky to setup stuff. You can can call me (+61420761170) or contact me directly through msn messanger to setup things.

  3. November 19, 2009 at 9:30 pm

    Hi Ayaz,

    I have delivered a similar customization back when working with CRM 3.0. The point was however a bit different: I was loading a JS which was able to transform a of any form field configured to show as such, into a WYSIWYG HTML editor. No server-side code was required.

    Here’s a snapshot of it: http://www.creativesolutions.ro/showcases.html#Customizations > “WYSIWYG HTML inline editors mapped on text areas” link.

    A+

  4. November 26, 2009 at 11:53 am

    I would love to get your help to implement this for our CRM site. Can you please contact me

  5. December 1, 2009 at 2:25 pm

    Hi Ayaz,

    Following your message, here’s the expanation on how to quickly implement the HTML editor on top of existing textarea fields, in a non-intrusive way: http://adrian-alexan.blogspot.com/2009/12/html-wysiwyg-editors-in-crm-forms-non.html.

    Sorry for my delayed answer. Hope this is useful.
    A+

  6. January 14, 2010 at 9:30 pm

    Generally I do not post on blogs, but I would like to say that this article really forced me to do so! Thanks, really nice blog.

  7. January 25, 2010 at 10:14 pm

    Thanks a lot I really enjoyed reading this

  8. January 28, 2010 at 9:31 am

    Awesome post once again. Thanks admin.

  9. February 24, 2010 at 9:59 pm

    You have a lot of interesting articles here, but you must improve your blog design

  10. Jonas Gschwend
    March 23, 2010 at 1:20 pm

    Hi Ayaz

    I tried the TinyMCE Integration in MSCRM 4.0. I created a aspx page and include the tinyMce successful. I’m also able to show the tinyMCE on the CRM form and save the content of the tinyMCE into a ntext-field. But when i load the form, the content of the ntext-field were not be load into the tinyMCE. Any suggestions?

    Kind Regards
    Jonas

  11. March 24, 2010 at 5:18 am

    Hi,
    Use follwoing function at onload of your aspx page. this will fix your issue.

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

  12. Mark
    July 14, 2010 at 2:59 pm

    Hi there Ayaz, I am having a few problems in deploying the editor. Have uploaded the script/tinymce component but I keep seeing an error within my IFrame on preview.

    can you help

    Thanks

    Mark

  13. July 15, 2010 at 7:44 am

    Hi Mark,
    What is the issue?
    I have developed this for many customers and all went well. Write me indetails.

  14. Mark
    July 19, 2010 at 1:05 pm

    Hi Ayaz, the details are as follows:

    1) Have copied TinyMCE file to C:\inetpub\wwwroot\ISV\\MSCRM\tiny_mce
    2) Have place thed the .aspx file as created aboove to /ISV//MSCRM/HTML/Wisiwug_Component.aspx and referenced the tiny_mce component as src=”~/ISV//MSCRM/tiny_mce/tiny_mce.js”>.
    3) Have created a text field on dynamics as crystal_htmltext area and referenced in in .aspx file for both submit and save (just showing the OnSubmit here)
    document.myform.submit();
    window.parent.document.forms[0].all.crystal_htmltextarea.DataValue = document.getElementById(‘content’).value;
    4) Added the IFrame to a new form and referenced the .aspx page. When I preview error occurs.

  15. July 20, 2010 at 1:10 am

    This all seems OK to me.

    You need to debug and find out the exact error. Try to use same naming for controls as mine.

  16. Nisha Nikumbh
    January 21, 2011 at 5:15 am

    TimyMCE Javascript editor not working in crm form.

  17. mohsinkhan
    August 9, 2012 at 12:18 pm

    hi, How to implement same in crm 2011.
    I am not getting the rich text box.

  18. Momo
    October 10, 2012 at 2:19 pm

    Hi!

    We are using TinyMCE in our CRM (4.0) and everything works fine. But now we need to use this content for mailmerge. And here the trouble starts. Apparently Word is not able to use html tags for formatting. Now I need to find a way to get rid of the html tags without loosing formatting information. (If you are wondering why I don´t use Reports, it´s undesired by the “non-programming” staff)
    I tried to use a macro in word, but this doesn´t work how it should because identifacation of paragraphs inside of a mergefield is kind of strange…
    Do you have an idea how I can get this working?

    Kind regards

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 59 other followers

%d bloggers like this: