Using PublishingWebControls:RichHtmlField in application page

Question

I'm trying to use a PublishingWebControls:RichHtmlField control in a custom application page inside SharePoint to use the built in SharePoint WYSIWYG editor. It's almost working but SharePoint has some javascript functionality built in to focus the first RichHtmlField on the page.

My control is the 3rd from the top and I don't want to move the control to the top. The other controls are regular asp.net controls like TextBox.

Setting the HasInitialFocus="FALSE" property doesn't work since if no RichHtmlField with the previously mentioned property was found set to TRUE the first RichHtmlField control gains focus and ribbon goes into "WYSIWYG" mode.

I've tried overriding the javascript doing this but wasn't able to. Do someone have a solution for this? Is there some other control I can use?

Answer 1

I found a property named AllowInitialFocus on BaseFieldControl which RichHtmlField is derived from (couple of levels down). It's protected virtual and always return true according to MSDN documentation. I had to override the control to make it return false but it seems to do nothing :( Only solution I can think of is override the JavaScript setting the focus. Does anyone know how to do it?

public class RichHtmlFieldOverride : RichHtmlField
{
    protected override bool AllowFirstFocus
    {
        get { return false; }
    }
}

and in the aspx

<%@ Register TagPrefix="PublishingWebControlsOverride" Namespace="***" assembly="***, Version=1.0.0.0, Culture=neutral, PublicKeyToken=***" %>
.
.
.
<PublishingWebControlsOverride:RichHtmlFieldOverride
    ID="mRhfOther"
    FieldName="PublishingPageContent"
    HasInitialFocus="False"
    ControlMode="New"
    MinimumEditHeight="5em"
    runat="server" />

Answer 2

How did you try to override the JavaScript? (I'm writing this because HasInitialFocus hasn't worked and is the obvious answer, although maybe could set it on another field, the first field instead as true?)

I would add and try this:

$('document').Ready(function() {
    $('#someother_element').focus();
});

This should work..

Otherwise run up Chrome, and profile the JavaScript , and watch for what bit of JavaScript is setting the focus. Then have some JavaScript that empties the function by setting it to a blank function.

var blankFunction = function() { };
functionName = blankFunction;

But be careful that it doesn't do something else as well.. You might want to duckpunch the original function out: Duck Punching Tutorial (This link will stay as long as Google so I'm not going to copy it out)

Another JavaScript alternative would be to set an event that fires once for focus, this would move the focus off the box then destroy the event. So if the above two fail I will write that out too.

Answer 3

Instead of using PublishingWebControls:RichHtmlField, can't you use SharePoint:InputFormTextBox

It is a replacement of multi-line Rich Text Box, and it doesn't require Ribbon! And I guess you should be easily able to set focus on this textbox...

document.getElementById('<%= myInputFormTextBox.ClientID %>').focus();

Or if that doesn't works, you can use JQuery... Since it renders iframe for the textbox, you might need to do something like:

$(function(){
    var editors = $("iframe[title='Rich Text Editor']");
    editors.focus();
});

You must reference JQuery library for this to work!

Answer 4

Beyond the issue you are currently facing, SharePoint's rich text controls have a number of issues, particularly with browsers other than Internet Explorer. As such, in most of my custom solutions I have opted to use third-party rich text controls.

For multilingual projects I primarily use TinyMCE (http://www.tinymce.com/) as it has great multilingual support in nearly all of the languages that SharePoint supports.

Another great option is CKEditor (http://ckeditor.com/).

Granted, this doesn't solve your problem with the SharePoint Rich Text control, however you would probably have less headaches using another rich text control.