I have created my own custom styles for rich text editors to replace the defaults. I have followed this blog post

Here's a sample css style

.lzpd-Style-Teaser {
-ms-name: "Teaser";
font-family: arial;
font-weight: bold;
font-size: 14px;
color: #000000;


The CSS file is registered using scriptlink on the masterpage:

<SharePoint:ScriptLink id="RTEForDialogs" language="javascript" name="~SiteCollection/Style Library/RTEforDialogs.js" OnDemand="false" LoadAfterUI="true" runat="server" Localizable="false"/>

Then I register my custom prefix using

ExecuteOrDelayUntilScriptLoaded(rte_dialog_pub, "sp.ui.rte.publishing.js"); 

function rte_dialog_pub() {
$(".ms-rtestate-write").attr('PrefixStyleSheet', 'lzpd-');
$(".ms-rtestate-write").attr('AllowParagraphFormatting', 'False');
$(".ms-rtestate-write").attr('AllowFonts', 'False');


But when I try to load the page in edit mode, I get a working on it animation in all text style fields. It only stops, when I click on the dropdown button next to them. Then I can use them. I can't figure out what is blocking the display after page load.

trying to load the styles

1 Answer 1


For completeness: I never saw the result in person, but I was told it was resolved by adding styles AND elements. It would only finish loading, when both types were defined.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.