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.