Life, SAP, Consulting, Programming, Coding, ASP.NET, Sharepoint, MVC, Javascript, PHP, WebDesign, CSS, HTML

Recently a client was finding it difficult to edit HTML in a publishing page when the HTML was lengthy and went over a page in the browser. Basically the floating toolbar of the Rich Text Editor (RTE) in SharePoint went out of view as the page scrolled down.


I could think of three possible solutions…

Enable the PopupEditorMode of the RichHtmlField control.

Write some script to keep the floating toolbar in view

Change the CSS so that the HTML editor didn’t grow over a certain size and a scroll bar appeared.

Enable the ‘popup mode’ of the HTML editor


This is relatively straight forward and solves the problem. Basically you have to set the PopupEditorMode property on your RichHtmlField.

<PublishingWebControls:RichHtmlField id=”Content” PopupEditorMode=”true” FieldName=”…


There are a few problems with this approach. Firstly you have to visit every PageLayout to change the declaration of the RichHtmlField control. This can be a pain when you have 20-30 layouts in your publishing site.


Secondly, it slows down the page editing as you have to wait for the dialog to display each time you want to edit a field on a page. And lastly the WYSIWYG experience isn’t as good as with floating toolbar.


In order to save visiting every layout and so that you can try changing the behavior without all the effort I have created a javascript file which reverses the PopupEditorMode property. Adding this javascript file to your master page will cause every HtmlFieldControl to display a popup, unless the PopupEditorMode is True.

<script src=”/switchHtmlPopupMode.js”></script>


Upload the javascript file to your site and add the SCRIPT tag to your .master page. Ensure the SRC attribute points to the location of the uploaded .js file. All your editors should now popup.

Keep the floating HTML editor toolbar in view


Unfortunately this is not available OOTB and so I had to write some javascript to enable this. You can download the javascript for this solution and add it to your master page…

<script src=”/scrolltoolbar.js”></script>


When added to your master page or layout it will ensure that any HTML editor toolbar will stay in view even when your page scrolls. This means that as you are editing your page the floating toolbar will move down with you as you type, ensuring you always have access to its functionality.


To add this to your page simply copy the scrolltoolbar.js up to your site (using SharePoint designer) and add the SCRIPT tag above to your .master layout…ensuring that the SRC attribute points to the correct location.


Adding this script file also has the benefit of ensuring the floating toolbar is always visible when you try to edit HTML at the bottom of the RTE editor and the top of the RTE is scrolled out of view.

Changing the CSS of the editor


This I have to say was not my favorite of the solutions. I think that getting this to work correctly in all situations would be very difficult and as such have not tried it.


I have asked a ‘CSS guru’ to have a look at this when he has a spare five minutes. If he comes up with anything I will post it here.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: