Back in May, I wrote a showing you how to turn a textarea in a CRM form into a WYSIWYG editor.
In this blog I will show you how you can put this same editor into CRM 2011.
In CRM 2011 you will have to put all of the Jquery and HtmlBox files in the system as Web Resources. I strongly suggest using the Web Resource Utility provided in the 2011 SDK. Here is more info on how to use this wonderful tool.
Download the HtmlBox latest version here and upload it using the Web Resource Utility. Then download the latest version of Jquery here . Upload jquery.blockUI.js and jquery-1.4.1.min.js files. You only need these two. CRM 2011 does not like the – in jquery-1.4.1.min.js so, rename the file jquery_1.4.1.min.js so it will upload to CRM 2011 correctly.
Here is what your Web Resources should look like in CRM:
Next, you will need to create a new Entity called Portal Announcement. Add fields for Description, StartDate, EndDate, and Title.
Then, slap together a form with the new fields you just created. Make sure that description is set to automatically expand to use the available space.
Next go to the form properties and add jquery_1.4.1.min.js, jquery.blockUI.js, htmlbox.colors.js, and htmlbox.full.js in this order.
Here we will also create another resource called portalannouncementOnLoad. Click on the add button and then choose new. Put the name as portalannouncementOnLoad and choose the type of Jscript. Once you have saved the resource you can then add as content our custom JavaScript that will leverage Jquery and HtmlBox.
Here is what the code should look like:
window.onload = function() {
jQuery(document).ready(function () {
Xrm.Page.getAttribute("jm1_description").setSubmitMode("always");
$('#jm1_description_d').append(
'<textarea id="wysiwyg" style="ime-mode: auto; height: 100%;" name="wysiwyg" maxlength="2000" >' + $("#jm1_description").val() + '</textarea>'
);
$('#jm1_description').hide();
var hb_silk_icon_set_blue = $("#wysiwyg").css("width","100%").htmlbox({
toolbars:[ ["cut","copy","paste","separator_dots","bold","italic","underline","strike","sub","sup","separator_dots","fontsize","fontfamily","fontcolor"],
["left","center","right","justify","separator_dots","ol","ul","indent","outdent","separator_dots","link","unlink","image"]],
icons:"silk",
skin:"blue",
idir:"/JM1/WebResources/jm1_/HtmlBox/images/",
about:false
});
});
};
function testOnSave() {
Xrm.Page.getAttribute("jm1_description").setValue($("#wysiwyg").val());
return true;
}
As you will notice there are several things going on here. First you will notice that I use window.load function. This is to ensure that the entire form and its ribbon have completely been loaded before we do anything else.
Next, you will see where I use Xrm.Page.getAttribute(“jm1_description”).setSubmitMode(“always”). This tells CRM to always submit the form even if the description field has not changed. We need this because the HtmlBox will update the textarea for description but CRM doesn’t recognize it as dirty, so the save button never fires when clicked.
In the next section, you will see I use Jquery to create a dynamic textarea called WYSIWYG. We get the value of jm1_description and put that into this new textarea that gets created at run time. This is for use if the text gets changed we can set it later in our code.
I then use Jquery to hide the jm1_description field and call the htmlbox function passing in toolbars, icons to use, and image directory. Note the directory of images is the path that was created when you uploaded HtmlBox through the Web Resource Utility (/JM1/WebResources/jm1_/HtmlBox/images/).
Finally, I create an onSave function that will use the Xrm.Page setValue function to take the value from WYSIWYG textarea and set it to jm1_description. This will let CRM know that the value has changed and to post the new value to the save. This function will need to be added to the form properties under the onsave event calling function testOnSave.
Now save and publish everything and pull up a record in your new entity. This is what you end result should look like. Enjoy!
Post by: Jeff Macfie,
Thanks for the effort of good quality content.
Keep up the good work.
Awesome! Its actually amazing paragraph, I have got much clear idea on the topic of
from this paragraph.
this would be the perfect solution
after rollup 12 for mscrm 2011 the WYSIWYG Editor is giving errors
first when we open a form which has the WYSIWYG Editor gives an error
"Object does not support property or method "HTML""
when closing the form it gives "JQUERY UNDEFINED"
and also it is not hidding the field which is being append to the html box
I confirm, it's not working on Rollup 12
Yes, doesn't work with roll-up 12. If anyone have complete answer (code), please share.
I was having the same problem as addi and shaggy. Finally realized my problem was that I was hiding the label on my "Description" field. CRM is highly dependent on table elements for layout and hiding the label actually reorganizes the whole markup. I was able to solve this issue by making the following change to the original code.
Original Code
$(‘#jm1_description_d’).append(‘<textarea id=”wysiwyg”...
My Change
$(‘#jm1_description’).after(‘<textarea id=”wysiwyg”...
Someday hopefully CRM will take advantage of newer standards and leave table layout in the past.
what if we would like it to use it for two different field on same form i have tried it is just coming for one text field why is that
hello i tried the code but it showing an a error as object does not support this property i created webresource to create an image and i dnt uses webresource util tool so i dnt understand idir path please help me dude as soon as
i have solved the the issue the rich text box is not supported by your browser but i cant see the editor why is that what i am doing wrong? may be the same problem as shaggy is having
the rich text box is not supported by your browser please help
It is giving me the error that the browser is not supported for this action.
Hey there...
i have tried this in the same order as it mention on this site... but the HtmlBox is not showing on the form... but if i use the F12 and add "display: none" on that table which field i want to add editor on then i can see the editor....
what is wrong...?
Burak. Make sure that in the javascript that you are referencing the correct path to the web resources and also that you are modifiying the correct attributes names on the form.
it fails with this error:
This rich text component is not supported by your browser.
[object Error]
How can i fix it?
Realy trying to understand all of this. The file jquery.blockUI.js is not present on the jquery site. Where was I supposed to download this?
What error is Jack refering to here?
Thomas, you don't need the jquery.blockUI.js file - it'll work just fine without. So just follow the walkthrough, skipping that one step/file. I've just finished setting it up, and got it to work without any problems.
I got it working at last 🙂
In this text the sign after 2000 was wrong
thats great i did the same as well and i am not getting any error now but the problem is that editor is not showing please helep
Hi
I have tried to get the solution working and it runs through alot of code. I have the files jquery_1.4.1.js, htmlbox.colors.js and htomlbox.full.js and when I debug it goes to all of the files.
I am trying to do it on the description box on contracts but it fails with this error:
This rich text component is not supported by your browser.
[object Error]
It's IE 9 and I have tried on multiple computers.
Here is the code, hope you have a clue on what could be wrong
window.onload = function () {
jQuery(document).ready(function () {
Xrm.Page.getAttribute("contractlanguage").setSubmitMode("always");
$('#contractlanguage_d').append(
'' + $("#contractlanguage").val() + ''
);
$('#contractlanguage').hide();
debugger;
var hb_silk_icon_set_blue = $("#wysiwyg").css("width", "100%").htmlbox({
toolbars: [["cut", "copy", "paste", "separator_dots", "bold", "italic", "underline", "strike", "sub", "sup", "separator_dots", "fontsize", "fontfamily", "fontcolor"],
["left", "center", "right", "justify", "separator_dots", "ol", "ul", "indent", "outdent", "separator_dots", "link", "unlink", "image"]],
icons: "silk",
skin: "blue",
idir: "https://test.crm4.dynamics.com//WebResources/new_/Htmlbox/images/",
about: false
});
});
};
function testOnSave() {
Xrm.Page.getAttribute("contractlanguage").setValue($("#wysiwyg").val());
return true;
}