Custom text styles for rich text editors load forever

Question

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.

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.