Finding the Contents of a SharePoint Rich Text Column with jQuery – And Changing It
After my post the other day about Finding the Contents of a SharePoint Rich Text Column with jQuery, I saw a tweet from my friend in Sweden, Christian Ståhl.
http://twitter.com/#!/CStahl/status/35998002397192192
The Rich Text column contents are just HTML, so there’s really no limit to what you might do to manipulate it yourself with script. Let’s look at an example.
In the example, I’ve typed the sentence “The quick brown fox jumped over the lazy dog.” into the System Description Rich Text column and done a little simple formatting. I’ve used the jQuery I outlined in my earlier post to simply alert the contents of the column on the blur event. Note that SharePoint has seen fit to wrap the text in a div with that lovely external class. That happens from time to time and I really don’t know why.
As you can see, the contents of the column are simply HTML. Since it’s an iframe with the HTML in its body, we can manipulate it however we’d like. Here’s a little code just to show you something you might try.
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery-1.5.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var systemDescriptionRTE = $("textarea[Title='System Description']").closest("span").find("iframe[Title='Rich Text Editor']").contents().find("body");
$(systemDescriptionRTE).focus(function(){
alert("starting value: " + $(systemDescriptionRTE).html());
$(this).find("span").wrap("<div style='border: 5px solid maroon;'></div>");
alert("wrapped: " + $(this).html());
});
$(systemDescriptionRTE).blur(function(){
$(this).find("span").unwrap();
alert("unwrapped: " + $(this).html());
});
});
</script>
When the page loads, I’m finding the Rich Text in the DOM and then I’m binding to the focus and blur events for the body of the iframe which contains the value. When I give the field focus, I alert the starting value of the field (line 9 – which is how I got the image above), wrap the span containing the word “brown” in a maroon border by wrapping it in a div (line 10), and alert the result (line 11). When I leave the field, I unwrap the div from the span (line 15) and alert the value again (line 16). Simple, but hopefully it shows something you might be able to do based on user activity.
Here’s the alert and the effect when the field gets focus…
….and on the blur event.
Marc,
I just want to write a blog something like yours. :)
there is some different with your method, after you found the TextArea control with jquery, you could see the ID attribute and use the ID to locate the real iframe.
here is my sample code:
var baseElementID = ctrl.attr(“id”); //alert(baseElementID);
if (browseris.ie5up && browseris.win32 && !IsAccessibilityFeatureEnabled()){
var docEditor = RTE_GetEditorDocument(baseElementID);
if (null == docEditor)
return;
docEditor.body.innerHTML = newValue;
} else {
elemTextArea = RTE_GetEditorTextArea(baseElementID);
elemTextArea.value = newValue;
}
above code comes from FORM.js file!
Lambert:
Interesting. While there are a few places where I have used the scripts which come with SharePoint, for the most part I find that they are pretty indecipherable!
M.
Thanks for the info – I was having a problem setting a RTE value to pre-populate a list form – you hooked me up after many unsuccessful internet searches.
Hi Marc,
Is there a way to use this to programmatically set the text in the RTE?
What I want to achieve is to use a dropdown to select some template text (ie a sentence with some variables or placeholders, and place this text into the RTE for the user to adjust as necessary. The trigger to put the text into the RTE could be either a button : “Copy” or the selection of a new value in the dropdown.
An example template might be:
Event NNNN occured at HH:MM. Effect: (All Users/Restricted/Individual)
Sorry – I missed some vital information:
I am trying to do the above function in Sharepoint 2010.
Thanks in advance.
Michael:
You could adapt my script pretty easily to update the value in the RTE column. What I show should get you most of the way there.
M.
p.s. Note that I mention in my prior post that this all works exactly the same in 2010 as it does in 2007.
I’m trying to use this method to update a Rich Text field with data retrieved from a GetListItems request. It works fine in FireFox 4, IE9, Chrome and other Mac variants, but it does not work in IE8. This is the chnunk of code handling it. What am I missing?
if ($.browser.msie && $.browser.version =='9.0') { alert(alertText); var DescriptionRTE = $("textarea[Title='Course Description']").closest("span").find("iframe[Title='Rich Text Editor']").contents().find("body"); $(DescriptionRTE).click(); $(DescriptionRTE).focus(); $(DescriptionRTE).html($(this).attr("ows_Description"));Bah that was my debugging code, this is what it actually is:
if ($.browser.msie) { alert(alertText); var DescriptionRTE = $("textarea[Title='Course Description']").closest("span").find("iframe[Title='Rich Text Editor']").contents().find("body"); $(DescriptionRTE).click(); $(DescriptionRTE).focus(); $(DescriptionRTE).html($(this).attr("ows_Description"));Hi Eric,
Your code lines don’t fit on the screen and I want to be sure I use your code to test it.
Would you be so kind to post it again?
Regards, Anita
Hi Anita
If you hover your mouse over the code above, you will see four options display at the top right, the first of which is “View Source” That will display the entire piece of code in a text box for you.
@Michael: yes thanks, Marc changed it.
@Eric:
what type of field is the Description field?
And the content of it?
Did you try to add the content of the Description field as plain text in stead of $(this).attr(“ows_Description”) Did this work?
It’s a rich text multiline field. I’ve tried wrapping the ows_descriptoin in body tags and putting that in there and it does not work. When I alert the ows_description field, I can see it wrapped in div tags or with em and p tags in it and such.
What I don’t understand is why it briefly appears, then disappears.
What if I display the contents of a rich text in lets say a CQWP and want just the pure text, is that possible with jQuery?
My situation is that I display the title in one line and the body (rich text) on the next line, but because the rich text contains both and a ExternalClass Div, I get an extra empty line between the title and the body that I would like to remove.
Thanks,
audunms:
Sure, anything’s possible! What you’ll need to do is use the .unwrap() function to remove the enclosing div or simply select what is inside that containing div. Whichever way you do it, it’s a simple matter of parsing the right bits out of the DOM.
M.