Setting a Rich Text Column in a SharePoint Form with jQuery
Over in the SPServices Discussions, @PirateEric was having a problem setting the value of a Rich Text column (RTE) in a SharePoint form. He was referring to my blog post Finding the Contents of a SharePoint Rich Text Column with jQuery – And Changing It, which I’ll stand by, but the jQuery there wasn’t cutting it. (If you’d like to read the whole thread, it’s here.)
What Eric wanted to do was set the RTE when the form loaded based on the results of a call to GetListItems (the workhorse of the SharePoint Web Services operations). That call would grab an existing list item so that Eric could reuse some of the values.
In my earlier post, I was focused on changing the existing value in an RTE column. Eric wanted to populate an empty RTE column. (This method works to re-populate an RTE that already has a value as well.)
The code is actually far simpler in this case. To review, an RTE (which stands for Rich Text Editor) is a column like this:
The markup for the RTE in the DOM is (as you might expect) fairly complex, but here are the important bits. I’m showing a view of the markup for the entire table row which represents the RTE column in my SharePoint form.
Any existing value will be stored in the textarea I’ve highlighted, but also within the iframe I discussed in my prior post. To simply set the value of the RTE column, you can just insert your own markup – or simply text – into that textarea. SharePoint’s script will fire on that change event, populating the iframe contents appropriately.
The jQuery to do this is really simple:
var systemDescriptionRTETextArea = $("textarea[Title='System Description']");
alert($(systemDescriptionRTETextArea).html());
$(systemDescriptionRTETextArea).html("Cream cheese");
alert($(systemDescriptionRTETextArea).html());
Here’s what I’m doing here:
- Line 1: I’m finding the RTE’s textarea in the form using the selector. Many of the key elements in SharePoint forms have their title attribute set to the DisplayName of the column. (Unfortunately, this is not true of some columns types, like checkboxes and radio buttons, for example.)
- Line 2: I’m alerting the original contents of that textarea, just to see what’s already there (just for debugging)
- Line 3: I’m setting the value of the column to “Cream cheese”
- Line 4: I’m alerting the contents again to be sure that it “took”
There you go, simple jQuery to set the contents of an RTE column. Of course “Cream cheese” probably isn’t what you’re aiming for: you can insert any valid HTML.
Kudos, thanks again!
Hi Marc,
I’ve built a form driven by SPServices and I am trying to populate a rich text editor with the results of a GetListItems call, like Michael in your earlier post. I am finding that the RTE in the Newform is saving blank lines as:
The Displayform renders the above as a blank line, however on the Editform when this html is inserted into the RTE usign jquery, the above is not rendered the same way and the blank lines disappear.
Have you come across this before?
hiphopanonymous:
It looks like you’ve got an nbsp, which is a non-breaking space, rather than a br, which would be a line break. you will probably need to do some substituions to get the formatting to stay consistent between the Web Services call and the RTE.
M.
Hi Marc, should this approach work for an Enhanced Rich Text box? I notice there is no title in the mark up for this type of input box when examining the html using FireBug. I’m struggling to get the box to populate with jQuery. I have been successful using $(‘:input[title=”Title”]’).val(“My Value”); for other, arguably more straightforward input boxes.
Hi Marc,
I tried this and even tested with the cream cheese example and I get the alert for it but it doesn’t display in my Description RTE. I was wondering if you know of any reasons this could be?
Thanks
Travis:
I think I did this post with 2010, but it could have been 2007. Have you inspected the DOM to see if it matches what I show in the post?
M.
I am using 2010 as well. Mine is just called description so my code looks like this
var systemDescriptionRTETextArea = $(“textarea[Title=’Description’]”);
//alert($(systemDescriptionRTETextArea).html());
$(systemDescriptionRTETextArea).html(contentbody);
//alert($(systemDescriptionRTETextArea).html());
I took a screen shot as well of this:
[img]http://2share.co.za/Files/587cf38c-ad0f-4273-bd9e-9e48aa655d08Untitled.png[/img]
My alert does show me what I need displayed though. It’s strange that ots not working.
This is the alert:
[img]http://2share.co.za/Files/812a3312-6c27-43e7-adcc-c718cd92638falert.png[/img]
Hi Marc,
Its me again and I have two questions still about this piece of code. Firstly after lots of looking and testing I found that it pulls the content I want but only shows in the RTE in Chrome and Firefox but not IE. Is there a way around this? Secondly It pulls the text with all the html tags with it. So in the RTE it has all the ,, ect tags showing as well. What’s the best way for me to strip these tags out but keep my formatting. Thanks
This is my code again:
function CopyBodyToDescription(contentbody) {
var systemDescriptionRTETextArea = $(“textarea[Title=’Description’]”);
//alert($(systemDescriptionRTETextArea).html());
$(systemDescriptionRTETextArea).text(contentbody);
//alert($(systemDescriptionRTETextArea).text());
}
PS: I have tried .html and .val instead of .text but all give me the same outcome.
Travis:
I started to answer you here and realized that I had another blog post in it:
http://sympmarc.com/2013/09/11/setting-a-rich-text-column-in-a-sharepoint-form-with-jquery-sharepoint-2010/
M.
Thank you for this buddy!