Integrating TinyMCE with SharePoint 2010

We use SharePoint as a CMS for some of our sites. In general the rich text editor (RTE) works pretty well, but the HTML output is ugly. Also we wanted a way to add custom formatting styles.

I read a few articles on customizing the RTE but it all just seamed too clunky and I really wanted something that would look good in SharePoint and in our MVC app. Check out this article if you are interested in customizing the MS RTE.

I’ve used Tiny MCE before with CRM 4.0 so I figured I would try it with SP2010. Its licensed under LGPL so it’s pretty non-invasive in the corporate world.

Overview

  1. Add a multi-line column with enhanced rich text. (You probably already have this)
  2. Create a TinyMCE configuration file in a document library
  3. Modify NewForm.aspx and EditForm.aspx to use TinyMCE.

Add a Multi-Line Column With Enhanced Rich Text

You probably already have rich text editor in SharePoint, but here is a reminder.

  1. List Settings
  2. Add Column
    • Multi-line text
    • Enhanced Rich Text

Create a TinyMCE Configuration File in a Document Library

You want to store your configuration in a document library so that it can be used in more than one location. We need to link to it in at least 2 pages, but you may want to use one config file on multiple lists and sites.

Also, it is convenient to open the document library with Windows Explorer and then open the file in Notepad++. This way you can edit/save it directly from the editor without having to upload. The file extension doesn’t really matter, I used txt.

Here is the output from my configuration file.

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

  //Use an $.each method to replace all RTEs
  $('div.ms-rtestate-write')
    .each(function(index, element){
 
      //Get rid of border and padding b/c its ugly
      $(element).parent().css('padding', '0px');
      $(element).parent().css('border', 'none');
 
      //Replace the RTE with TinyMCE
      var id = $(element).attr('id');
      tinymce.init({
        selector: '#' + id,
        setup: function(editor) {
          editor.on('change', function(e) {
            $('#' + id).html(editor.getContent());
          });
        }
      });
    });
  });
</script>

I excluded most of my TinyMCE configuration because you can find all of that on the API reference. I want to show the bare minimum to get this to work in SharePoint 2010.

I am loading TinyMCE and jQuery from CDN for simplicity but you can store it on you server if you like.

SharePoint 2010 is not using a hidden textarea like SharePoint 2007. It is actually embedding the content in the HTML DOM. That means we have to read the the editor content and and replace the DOM node. This onChange event does that for us. If you don’t include it your changes will not be saved.

setup: function(editor) {
  editor.on('change', function(e) {
    $('#' + id).html(editor.getContent());
  });
}

Modify NewForm.aspx and EditForm.aspx to use TinyMCE

You can do this in SharePoint designer or the browser. I will describe the Browser method.

  1. Disable the dialog for this list. This will allow us to edit the dialog pages in the browser.
    • List Settings -> Advanced Settings
      • Launch forms in dialog? = No
  2. On both NewForm.aspx and EditForm.aspx do the following steps. (To access each page simply start a new list item or edit an existing one)
    • Site Actions -> Edit Page
    • Add a Web Part
    • Media and Content -> Content Editor -> Add
    • Do not edit the content editor body directly, instead
      • Click Edit Web Part in the right panel
      • Paste a link to the config file created in step 2 into the Content Link input box
  3. (Optional) Re-enable the dialog for the list. I prefer the non-dialog version when using TinyMCE

Known Issues

  • You can still see the built in RTE controls in the ribbon if you click on the TinyMCE editor just right. I couldn’t figure out how to disable that but decided we can just ignore it in our environment.

Next Steps

This is outside of scope for this article since I am only focusing on SP2010 integration but here are a few links you may find useful.

Configuring TinyMCE in SharePoint 2007 is slightly different. Here is an article by Josh McCarty that describes it pretty well. I used it as a starting point to get my version working in 2010.

SharePoint REST Service Filters on Date Only, Not Time

I was recently working on a SharePoint master data management project and ran across a weird issue.

Using SharePoint’s REST services, I needed to select list items that were modified after the last sync job. My query looks like this:

http://localhost/mdm/_vti_bin/ListData.svc/Contacts?$filter=Modified gt datetime'2015-08-27T23:53:00Z'

The result: 0 Rows. After some troubleshooting, turns out that SharePoint ignores the time part of the query. I had to use a “ge” (greater than or equals) operator and filter the time part in memory.

Quick search of the webs confirmed my conclusion: http://itblog.wolthaus.net/2011/12/rest-filter-datetime

This is an inconvenience because I am working on a interval-based synchronization service, it means the same data will be loaded into memory all day long for further filtering.