How to leverage Custom Styles & Markup Styles in the SharePoint 2010 CEWP (100% JavaScript Solution)

In short, with a RichHtmlField we can customize which Styles & Markup Styles 开发者_C百科appear in the drop down lists on the Ribbon. Using an OOTB Content Editor Web Part we cannot.

After interrogating / contrasting the RichHtmlField vs. CEWP (HTML/JavaScript emitted) I was indeed able to find a JavaScript solution.

While the RichHtmlField emits a Page Script to initialize the field control, the CEWP emits no such initialization script. Moreover, the RichHtmlField emits a significantly greater number of HTML Attributes than the CEWP does, and two of those attributes are PrefixStyleSheet and StyleSheet.

PrefixStyleSheet identifies the style sheet prefix being used in the drop down menu. StyleSheet is a server relative url to the branded css file.

So, with all these things being true, we should be able to initialize a CEWP with a branded stylesheet using jQuery:

<script type="text/javascript">
 ExecuteOrDelayUntilScriptLoaded(function() {

 // window.setTimeout(function() {

 $("div[RteRedirect]").each(function() {

    var id = $(this).attr("RteRedirect"),
        editSettings = $("#" + id);

    if(editSettings.length > 0 && editSettings[0].PrefixStyleSheet != 'yourcustom-rte') {
       editSettings[0]['PrefixStyleSheet'] = 'yourcustom-rte';
       editSettings[0]['StyleSheet'] = '\u002fStyle Library\u002fen-US\u002fThemable\u002fCore Styles\u002f<somecustomstylesheet>.css';
       RTE.Canvas.fixRegion(id, false);
    }

 });

// }, 2000);

}, "sp.ribbon.js");

</script>

I hope this helps someone. This code could go a lot of different directions. I'm merely presenting the fundamentals. If you add this to a master page inside an EditModePanel it will work cross site.

There is a timer in there as depending on the order of script loading something may mess with what you've done after you've done it. Let me know if this works / doesn't work for you.

Would be cool to keep a running tally of solutions to this problem somewhere.

Cheers,

M

---

believe it or not 4 years late this post was helpfull !

To make it work I had to change this :

 $("td[RteRedirect]").each(function() {

    var id = $(this).attr("RteRedirect"); 
        editSettings = $("#" + id);

Thank you