Jan 21

Enhance SharePoint rich text field

SharePoint 62 Comments »

When you use a rich text column in SharePoint, you obtain a pretty rendering with IE but a useless one with any other browser. This is due because SharePoint use an ActiveX to embed the Rich Text Editor. But we don't want a clumsy editor for our customers, we want to look professional.

  

Hopefully, Andy Pemberton proposes an easy solution described here to replace the ugly editor with tinymce.

I want to go one step further and:

  1. replace the IE editor too
  2. use tinymce each time a rich text field is met (NON_IE.js is not always called for pages under _layouts)
  3. deploy easily
  4. respect user's regional settings
  5. Support both Compatible and RichText mode for the rich text field.
  6. Remove the "Click for help about adding basic HTML formatting" message (easy) 

I choose another approach for deploying my patch. I add a template in 12\CONTROLTEMPLATES and override RichTextField template. SharePoint first loads the DefaultTemplates.ascx then load all the others ascx files presents in that folder. If you give your RenderingTemplate the same name as an existing one, yours is kept! Let's use this trick and add a small control to the existing template:

<%@ Control Language="C#" AutoEventWireup="false" %>
<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="my" Assembly="MyAssembly, Version=1.0.0.0, Culture=neutral, PublicKeyToken=xxxxxxx" Namespace="My.Controls" %>
<%@ Register Tagprefix="wssawc" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<SharePoint:RenderingTemplate ID="RichTextField" runat="server">
   <Template>
        <my:TinyMceTextField runat="server" />
        <span dir="<%$Resources:wss,multipages_direction_dir_value%>" id="originalEditorContainer"
            runat="server">
            <asp:TextBox ID="TextField" TextMode="MultiLine" runat="server" />
            <input id="TextField_spSave" type="HIDDEN" name="TextField_spSave" runat="server" />
        </span>
    </Template>
</SharePoint:RenderingTemplate>

 

TinyMceTextField control will inject the javascript code required to transform a textarea into a tinymce editor. We can fine tune our editor with more appropriate options such as the height of the textarea (based on NumberOfLines), use a different language than English …

/// <summary>
/// Extends the SPFieldMultilineText rendering to provide a better UX (no more limited to IE).
/// </summary>[ToolboxData("<{0}:TinyMceTextField runat=\"server\" />"),
AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal),
AspNetHostingPermission(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal)]
public class TinyMceTextField : Control
{
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);

        ClientScriptManager cs = this.Page.ClientScript;
        RegisterTinyMce(cs);
        BaseFieldControl fieldControl = (BaseFieldControl) this.Parent.NamingContainer;
        SPFieldMultiLineText rtField = fieldControl.Field as SPFieldMultiLineText;
        SPRichTextMode textMode = SPRichTextMode.Compatible;
        if (rtField != null) textMode = rtField.RichTextMode;

        TextBox textBox = FindHtmlTextBox(this.Parent);
        String script = String.Format("TinyMceConvert({0}, '{1}',{2});",
            textMode == SPRichTextMode.Compatible ? "MOSSBASIC" : "MOSSFULL",
            textBox.ClientID,
            rtField.NumberOfLines);
        cs.RegisterClientScriptBlock(base.GetType(),
            "tinymce" + this.UniqueID.GetHashCode().ToString("X"),
            script, true);
    } 

    private static TextBox FindHtmlTextBox(Control templateContainer)
    {
        Control control = templateContainer.FindControl("originalEditorContainer");
        if (control == null)
        {
            for (int i = templateContainer.Controls.Count - 1; i >= 0; i--)
            {
                if (templateContainer.Controls[i].FindControl("TextField") != null)
                {
                    control = templateContainer.Controls[i];
                    break;
                }
            }
        }
        return (TextBox) control.FindControl("TextField");
    }

 

    /// <summary>
    /// Register the tiny mce configuration featured by SharePoint.
    /// </summary>
    public static void RegisterTinyMce(ClientScriptManager cs)
    {
        cs.RegisterClientScriptInclude("tinymce", "/_layouts/tinymce/tiny_mce.js");
        cs.RegisterClientScriptInclude("sptinymce", "/_layouts/sptinymce.js");

        if (!cs.IsClientScriptBlockRegistered("tinymce_lang"))
        {
            // Localize the editor.
            // Other language packs are available at: http://tinymce.moxiecode.com/download_i18n.php

            CultureInfo ci = Thread.CurrentThread.CurrentCulture;
            String langPack = ci.TwoLetterISOLanguageName;
            if (langPack != "en")
            {
                String script = String.Format("MOSSBASIC['language']='{0}';MOSSFULL['language']='{0}';", langPack);
                cs.RegisterClientScriptBlock(typeof(Control), "tinymce_lang", script, true);
            }
        }
    }
}

 

And sptinymce.js is very similar to the Andy's additional code:

var MOSSBASIC = {
    theme : 'advanced',
    skin: 'o2k7',
    gecko_spellcheck : true,
    height: '300px',
    width: '420px',
    plugins : 'advlink,directionality',
    language: 'en',
    theme_advanced_buttons1: 'bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor,|,outdent,indent,|,numlist,bullist,|,link,charmap',
    theme_advanced_buttons2 : '',
    theme_advanced_buttons3 : '',
    theme_advanced_toolbar_location : 'top',
    theme_advanced_toolbar_align : 'left',
    extended_valid_elements : 'a[name|href|target|title|onclick],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],kbd,code',
    paste_create_paragraphs: false,
    paste_create_linebreaks: false
};

var MOSSFULL = {
    theme : "advanced",
    skin: "o2k7",
    gecko_spellcheck : true,
    height: "300px",
    plugins: 'advlink,directionality',
    language: 'en',
    theme_advanced_buttons1 : 'fontselect,fontsizeselect,|,bold,italic,underline,|,forecolor,backcolor,justifyleft,justifycenter,justifyright,justifyfull',
    theme_advanced_buttons2 : 'outdent,indent,|,numlist,bullist,|,hr,link',
    theme_advanced_buttons3 : '',
    theme_advanced_toolbar_location : 'top',
    theme_advanced_toolbar_align : 'left',
    extended_valid_elements : 'a[name|href|target|title|onclick],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],kbd,code',
    paste_create_paragraphs:false,
    paste_create_linebreaks:false
}; 

function RTE_TransferIFrameContentsToTextArea(strBaseElementID) {return;}
function RTE_TransferTextAreaContentsToIFrame(strBaseElementID) {return;}
function RTE_ConvertTextAreaToRichEdit(strBaseElementID) {return;}
function TinyMceConvert(mode, control, numLines){

    if (!browseris.ie5up || !browseris.win32 || IsAccessibilityFeatureEnabled())
        _spBodyOnLoadFunctionNames.push('removeNsRichHelp(\'' + control + '\')');
    if(numLines < 10)
        mode.height = (numLines * 12) + 'px';

    tinyMCE.init(mode);
    tinyMCE.execCommand('mceAddControl', false, control);
}

function removeNsRichHelp(control)
{
    var parent = byid(control).parentNode.parentNode;
    var children = parent.childNodes;

    parent.removeChild(children[0]);
    parent.removeChild(children[1]);
    for(i=children.length-1; i>2; i--)
        parent.removeChild(children[i]);
}

 

Deploy tinymce in 12\LAYOUTS\tinymce and sptinymce.js in 12\LAYOUTS\.

 

Enjoy Smile

Update: Solution source and package: SPRichTextFeature.zip (23.69 kb)  (solution updated with Part II)

Read part II: avoiding pitfalls while working with Compatible text mode.

 

Update 2 (HACK): as requested, here is the modified version of EditProfile.aspx for MySite. After some investigation, it appears they use Microsoft.SharePoint.Portal.WebControls.TextEditor which doesn't use the RichTextField template. I don't find another solution than modifying directly the aspx file!  editprofile.aspx (3.12 kb)

Tags: |

Comments

Mark

Posted on Wednesday, 4 February 2009 16:09

Nice item, just looking for this due to the fact that the default RTE is shit...no flash support and no word paste function..but for me it is not clear how to deploy this solution..i put the MyTemplate.aspx in the controltemplate, add the javascript file to layouts and add tinymce to the layout map...but what to do with the cs file Frown or did i something wrong..i still see the default RTE editor..

Olivier

Posted on Friday, 6 February 2009 06:09

Mark, you should compile a dll containing the CS file. From your question, I can tell you are not a developper, so I package my work in a feature you can download here: notesfor.net/file.axd?file=SPRichTextFeature.zip

1. install the package using stsadm
2. in your Central Admin, go to Application Management > Manage Web Application Features.
3. Active "Enhance Rich Text Field"
4. Do a Recycle App Pools or IIS Reset.

rimple

Posted on Sunday, 15 February 2009 09:56

hi .net is 2 much tuff language

Jim

Posted on Wednesday, 25 February 2009 10:46

Hi

I did the following steps but yet I do not see the SharePoint textarea as rich text in fire fox or IE. Please help?

Jim

Posted on Wednesday, 25 February 2009 10:46

Hi

I did the following steps but yet I do not see the SharePoint textarea as rich text in fire fox or IE. Please help?

1. install the package using stsadm
2. in your Central Admin, go to Application Management > Manage Web Application Features.
3. Active "Enhance Rich Text Field"
4. Do a Recycle App Pools or IIS Reset.

Olivier

Posted on Thursday, 26 February 2009 04:37

Hi Jim,

did you install youself tinymce in /_layouts/tinymce/tiny_mce.js ?

What do you see: nothing, an empty textarea or the default SP textarea ?

Stefan

Posted on Saturday, 28 February 2009 23:43

Hi,

nice job, but i have some problems to get it working (running german version of sharepoint services).
After installing the web application feature nothing happens, i got the crappy ms rte anymore. There are
also no injects in the html sourcecode.

How can i check if my installation was successfull (where should the files be located), or what can do get
this nice feature working.

I do the following steps:
1. Deploy tinymce to \12\TEMPLATE\LAYOUTS\tinymce\ and sptinymce.js to \12\TEMPLATE\LAYOUTS\
2. stsadm -o addsolution -filename SPTinyMceTextFeature.wsp
3. Open Central Administration -> Operations -> Solution management -> Deploy the sptinymcetextfeature.wsp
4. Application Management -> Manage Web Application Features -> Select Enhance Rich Text... -> Activate
5. Restart ISS

both /_layouts/sptinymce.js and /_layouts/tinymce/tiny_mce.js are accessable via browser

Thx for any help.

Olivier

Posted on Monday, 2 March 2009 04:24

Sorry, my fault ! I renamed my project to a more meaningfull name and build the wsp using WSP Builder and this one include my old dll. So when deploying the package, it fail to gac the dlls.
I fix that, re-test on a clean WSS install and now it works correctly. You can redownload the zip

Stefan

Posted on Monday, 2 March 2009 17:15

Hi again,

thank you very much for the updated solution, it works fantasticSmile

weblogs.asp.net

Posted on Saturday, 7 March 2009 09:49

Pingback from weblogs.asp.net

Links 2009-03-07 - Gunnar Peipman's ASP.NET blog

Linesh

Posted on Tuesday, 31 March 2009 15:07

Hi Oliver

I am new to SharePoint and web development. I am trying to embed ASCX control which uses EXTJs library and the call the ASCX control in Web Part. I can't seem to get it working. Web Part does show in Sharepoint but control does not render.

Is there anyway to call you get some help to get it working

thanks

Linesh

Olivier

Posted on Wednesday, 1 April 2009 08:47

Hi Linesh,

You know, SharePoint provides many different ways to code but one that is "SharePointable" is using TemplateBasedControl.
For example:

TemplateBasedControl ctrl = new TemplateBasedControl();
ctrl.TemplateName = "MyExtJsTemplate" ; // the name of your template as it stands in an ascx that resides in CONTROLTEMPLATES


Regardless the way you took, in your WebPart, override CreateChildControls and add these lines:

TemplateBasedControl ctrl = new TemplateBasedControl();
ctrl.TemplateName = "MyExtJsTemplate";
this.Controls.Add(ctrl);

or using classic asp.net way:

toolbar = (ToolBar) Page.LoadControl("~/_controltemplates/ToolBar.ascx");
this.Controls.Add(toolbar);

If none works, paste your code here and I'll have a look.

I used ExtJs too but I write server controls for simplicity. I will publish soon a post about using ExtJs TreePanel inside SharePoint.

Olivier

Posted on Wednesday, 1 April 2009 08:52

Linesh, this may help you : http://www.codeplex.com/ExtJsExtenderControl

Chris

Posted on Wednesday, 8 April 2009 09:27

I seem to be missing something - maybe getting lost in translation.

I have COPIED the entire tinyMCE set of files from the tinyMCE site (including tiny_mce.js) to \12\TEMPLATE\LAYOUTS\tinymce\, deployed the solution as instructed and activated it - iisrested after that, yet all my Text Editors seem to still use the default MS one - is there something I am missing?

Cheers

Chris

Olivier

Posted on Thursday, 9 April 2009 05:21

Chris, the entire set of files shouldn't be copied. When you extract the zip, I don't need the "examples" folder in my server. So in the zip, only jscripts\tiny_mce\*  should be deployed to 12\TEMPLATE\LAYOUTS\tinymce\*.

Browse to this url to ensure a file exists:   http://yourserver/_layouts/tinymce/tiny_mce.js

Chris

Posted on Tuesday, 28 April 2009 10:53

Yep, that's there and the Feature is listed in "Manage Web Applications" - I've set it to Active but see nothing happening anywhere!

Thanks

Chris

Olivier

Posted on Tuesday, 28 April 2009 11:13

did you make a Recycle App Pools?

Chris

Posted on Tuesday, 28 April 2009 11:39

I've done several server re-starts (for other reasons) so the app pools are well and truly recycled.

Just checking I have the right version in the GAC - SPTinyMceTExtFeature V 1.0.0.0?

Would the fact we are running Server 2003 x64 have anything to do with it?

Chris

Olivier

Posted on Tuesday, 28 April 2009 12:15

Yes 1.0.0.0 is the latest version and the version of Windows has no incidence.
Have a look at the source code of the HTML page and ensure a <script src=> targets sptinymce.js and one for tiny_mce.js AND you can browse to them.

Secondly, look with Firebug or another debugging tools if the javascript function TinyMceConvert is called and is executed successfully.

Have you installed another solution to patch Rich Text Field (like editing NON_IE.js)?

Chris

Posted on Wednesday, 29 April 2009 06:12

Nope, still getting -

<script type="text/javascript" language="javascript" src="/_layouts/1033/HtmlEditor.js?rev=4XWA8Kb5sgUABjhVjOQOGA%3D%3D"></script>

In the generated code, which I guess is wrong.

Did I miss a step somewhere, I did what Stefan did in his step by step post.

Chris

Chris

Posted on Wednesday, 29 April 2009 07:56

Got it working fine in Wiki pages, but not in Text Boxes in normal pages - is this to be expected?

Phil

Posted on Wednesday, 29 April 2009 20:45

Olivier,
Can you provide some quick tips on how to change TinyCME's options.  Basic vs Full, toolbars, and add -in?

Thanks

Olivier

Posted on Thursday, 30 April 2009 04:31

Phil> in the sptinymce.js file, you can add options in MOSSBASIC and MOSSFULL. You can browse the TinyMCE wiki to have the list of plugins available: http://wiki.moxiecode.com/index.php/TinyMCE" rel="nofollow">http://wiki.moxiecode.com/index.php/TinyMCETonglugins
More options at: http://wiki.moxiecode.com/index.php/TinyMCE" rel="nofollow">http://wiki.moxiecode.com/index.php/TinyMCE:Configuration

Beware of the rich text mode you choose. For example, the tag HR (the horizontal bar used in Outlook to separate replies) is not accepted by SharePoint. Have a look at this post, that should help you: notesfor.net/.../...lls-with-Compatible-mode).aspx

Olivier

Posted on Thursday, 30 April 2009 04:44

Sorry for the url, they have been eated by the server.
Replace the Tong by ":_P"  (remove _)

and the Feedback-on-TinyMCE-xxx  is the last post on my blog.
Sorry again

Phil

Posted on Monday, 11 May 2009 11:08

All,
Does this work with IE8?  I have it workin w/ FireFox, Google and IE7, but in IE8 I get only the Microsoft default editor.

Thanks

Green Valley real estate

Posted on Sunday, 12 July 2009 11:00

Thanks a ton. I personally use Firefox but your efforts are great. Thanks for sharing it.

online poker

Posted on Wednesday, 22 July 2009 03:41

Hi,

Nice article......I really like this blog....Lot of useful programing codes we can find in  this blog

sulumits retsambew

Posted on Friday, 24 July 2009 13:04

thanks for this nice info, it's so useful for me.

one minute cure for all disease

Posted on Wednesday, 5 August 2009 05:35

I Googled for something totally different, but landed on your page and have to say thank you, a good read though.

dentist

Posted on Wednesday, 5 August 2009 08:43

I hope you will countinue your work. I want a blogengie blog as well. Try to implemet it.

suedentist

Posted on Wednesday, 5 August 2009 08:43

I just would like to thanks for the blog. Like it. Thanks.

Thomas

Posted on Thursday, 6 August 2009 05:16

There is obviously a lot to know about this.  I think you made some good points in Future also.

Thomas

Posted on Thursday, 6 August 2009 05:16

Excellent blog with lots of useful information. Are there any forums that you recommend I join?

Olivier

Posted on Friday, 7 August 2009 07:32

Sorry Thomas, I don't follow any forums but read a lots of blogs instead.

James

Posted on Wednesday, 12 August 2009 17:24

I deployed solution in my local machine (single). It deployed successfully. But I donot see Feature in Manage Farm Features (Web Application Features).

I am using WSPbuilder too. Help me out

James

Posted on Wednesday, 12 August 2009 17:35

Sorry delete this message and my previous msg. I got solution. I was looking wrong place to feature active.

Jac

Posted on Thursday, 13 August 2009 03:19

Hi, i have a little problem. I try this steps:
---------------
1. Deploy tinymce to \12\TEMPLATE\LAYOUTS\tinymce\ and sptinymce.js to \12\TEMPLATE\LAYOUTS\
2. stsadm -o addsolution -filename SPTinyMceTextFeature.wsp
3. Open Central Administration -> Operations -> Solution management -> Deploy the sptinymcetextfeature.wsp
4. Application Management -> Manage Web Application Features -> Select Enhance Rich Text... -> Activate
5. Restart ISS
----------------------

NOW I CANT SEE THE TOOLBAR (new,actions,setings) IN LIST AND DOCUMENT LIBRARY.

Any ideas ??

Jac

Posted on Thursday, 13 August 2009 03:28

It happens in all the site o the server far !!

Randy

Posted on Thursday, 13 August 2009 09:56

Will this work for MySites too?. Because I activated on all web applications including Mysites. But I dont see this TinyMCE. Even I went to ViewSource. There also I don't see source for TinyMCE.

any idea

halloween accessories

Posted on Saturday, 15 August 2009 19:21

I can only say thanks, this post has actually helped me with something ;)

rapid-dev.net

Posted on Tuesday, 18 August 2009 13:50

Pingback from rapid-dev.net

RenderingTemplates for EditProfile.aspx – Which RenderTemplate uses the MySite? | rapid-DEV.net

Learn & Master Guitar

Posted on Thursday, 20 August 2009 04:13

Thank you for sharing this fine post. Very inspiring!

Olivier

Posted on Thursday, 20 August 2009 10:49

Randy> I take a look with Reflector about the code and they don't use the RichTextField but an obscur control called: Microsoft.SharePoint.Portal.WebControls.TextEditor.

If you decompile the code of TextEditor, you can see they hard-code the call to their ActiveX. So if you REALLY want tinymce in your EditProfile.aspx, you should edit that page (yuk!)

// Register Tiny Mce (this method take care of localization)
TinyMceTextField.RegisterTinyMce(this.Page);

<script type="text/javascript">TinyMceConvert(<textboxID>, MOSSBASIC);</script>

anand

Posted on Tuesday, 25 August 2009 01:18

Hi How to get rich text field value in code as i need to merge two rich text fields into single field. Please help me

Olivier

Posted on Tuesday, 25 August 2009 03:01

anand> what do you want to do : merge in client-side or in server-side ? The latter can be done in many ways : ItemEventReceiver, override SaveButton, SPFieldCalculated (msdn.microsoft.com/en-us/library/bb862071.aspx), ...

Dentist Eastbourne

Posted on Thursday, 24 September 2009 06:06

Thank you for a very enlightening and informative post, it seems a shame that certain types use these posts for link building campaigns, and neglect to read....

many thanks from the uk

Daniel Smile

aidan

Posted on Thursday, 29 October 2009 06:31

Is there any way to get this working with Content Editor Webparts?

Olivier

Posted on Friday, 30 October 2009 02:14

aidan> this is hard. No template to override nor any single page to patch. The toolparts are inserted by code-behind and text editor actived through javascript.
If you really need it, I would recommond creating your own WebPart that embed ContentEditorWebPart (facade pattern) and provides some js patch to activate the tinymce plugins.

Vicky Phillips

Posted on Friday, 30 October 2009 06:04

There also I don't see source for TinyMCE.

Olivier

Posted on Friday, 30 October 2009 07:27

Vicky> Right, for copyright reason, I prefer not redistributing TinyMCE's source. But you can still take them on http://tinymce.moxiecode.com/

McDonalds Free Coupons

Posted on Thursday, 12 November 2009 19:25

I have been wondering how to do this!  thanks for sharing.  Very informative.

Venu

Posted on Wednesday, 23 December 2009 18:19

I have Added Solution & Activated Feature on Central Admin. Unfortunately I am not able to see tinyMCE Editor for my Wiki Page.

Could you please help me.

Venu

Posted on Monday, 28 December 2009 20:09

Hi,

I am trying to open .ascx file from "\12\TEMPLATE\FEATURES\SPTinyMceTextFeature\TinyMceTextTemplates.ascx". Unfortunately I am not able to see control in Design mode. I am getting Error as "Error Creating Control-RichTextField. Object Reference not set to an instance of an object". Because of this error I am not able to see the TinyMce control on my Wiki Page.

Thank You for your help.

Addiction Recovery Pennsylvania

Posted on Monday, 8 February 2010 03:05

Thanks for the post mate.

Max

Posted on Thursday, 11 February 2010 23:59

Hi
Deployed and work fine in IE
Dont work in Firefox

Any ideas ?

Thank you

Max

Max

Posted on Monday, 15 February 2010 10:08

Hi

Problem with relative links
I use the SP image library to publish in an e-mail text + images. Unfortunately in this case the "http://myserver" get stripped.
How can I keep only absolute links ?

Thank you

Max

Olivier

Posted on Tuesday, 16 February 2010 02:28

Max> if the image comes from a SharePoint site, SharePoint strips the url. This is related with SPUrlZone and the way sharepoint deals with them.
For example: in a wiki article, you add an image (intranet zone). When your customer visits your page (internet zone), SharePoint replace the image links otherwise, your customer will not be able to access your url.

Max

Posted on Tuesday, 16 February 2010 09:42

Olivier

What would be the method to avoid the URL Stripping by Sharepoint ?

Thank you

Max

Olivier

Posted on Tuesday, 16 February 2010 16:38

Don't even think about it, there is no workaround here. SharePoint has its mysteries...

Max

Posted on Friday, 19 February 2010 00:43

Hi Olivier

Found a very simple solution copy the html from the RTE to a simple text field.
Now I face an other problem using Jquery i cant find the ID or a selector for the content of the tinyMCE

Sugestion welcome

Thanks

Max

Olivier

Posted on Friday, 19 February 2010 06:55

Max> you should use both jQuery and the api of tinymce. In my file sptinymce.js, there is some code for that operation. See my second post on tinymce: Feedback on tiny mce and SharePoint

(at the end of the post)

Max

Posted on Friday, 19 February 2010 20:21

Olivier

Thank you very much this is a very nice Job !

Max

Add comment




  Country flag

biuquote
Loading