none
PrefixStyleSheet for ContentEditor web part? (Apply different styles within ContentEditor web part)

    질문

  • I'm inserting a ContentEditor web part onto a page on a Publishing Site. I would like to have the ContentEditor use specific styles other than the ones specified for the RichHtmlField on the page. Is there a way to specify a stylesheet prefix similar to what you can do for a RichHtmlField, e.g.:

    <PublishingWebControls:RichHtmlField ID="RichHtmlField1" FieldName="PublishingPageContent" HasInitialFocus="True" MinimumEditHeight="400px" PrefixStyleSheet="custom-rte" runat="server"/>
    

    I looked at the options for the ContentEditor web part but didn't see anything that fit the bill.

    Or, are there other ways to achieve the same goal? I've considered adding additional RichHTML fields to the page, but that would require adding fields to the page content type (or a child thereof), which I would prefer to avoid.

    Thanks for your suggestions.

    2011년 10월 4일 화요일 오후 10:09

답변

  • Hi Chris,

    This blog may help.
    http://mosshowto.blogspot.com/2009/12/sharepoint-2010-wiki-styles.html

    Best regards,
    Emir

    2011년 10월 7일 금요일 오전 8:32
  • Thanks Emir. One of the links on that blog provides a Javascript solution:

    http://stackoverflow.com/questions/7615767/how-to-leverage-custom-styles-markup-styles-in-the-sharepoint-2010-cewp-100-j

    The idea is to wait for the page to load and replace the default value of the PrefixStyleSheet attribute with your custom value. Although I would prefer a non-Javascript solution, I will definitely give it a try.

    2011년 10월 7일 금요일 오후 1:43
  • I added the following (taken from the Stack Overflow post above) to a page layout (it could also be added to a master page):

    <PublishingWebControls:EditModePanel runat=server id="EditModePanelCustomRteSyleSheet">
        <script type="text/javascript" src="/_layouts/jquery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript">
            ExecuteOrDelayUntilScriptLoaded(function() {
                $("div[RteRedirect]").each(function() {
                    var id = $(this).attr("RteRedirect"),
                    editSettings = $("#" + id);
                    if(editSettings.length > 0 && editSettings[0].PrefixStyleSheet != 'custom-rte') {
                        editSettings[0]['PrefixStyleSheet'] = 'custom-rte';
                    }
                });
            }, "sp.ribbon.js");
        </script>
    </PublishingWebControls:EditModePanel>
    


    This successfully changes the Styles and Markup Styles for the Content Editor Web Part's rich-text editor. Existing RichHtmlField elements on the page do not seem to be affected, so you can have multiple custom styles and markup styles. The code above will be applied to all Content Editor Web Parts on a page. If you want to apply it just to a specific web part zone, you can wrap the web part zone in a div, e.g.:

    <div class="customWebPartZone">
        <WebPartPages:WebPartZone 
            runat="server" 
            Title="CustomWebPartZone" 
            ID="CustomWebPartZone" />
    </div>
    


    And then change the jQuery selector from 

    $("div[RteRedirect]") 
    

    to

    $(".customWebPartZone div[RteRedirect]")
    


    2011년 10월 7일 금요일 오후 7:37

모든 응답

  • One thing I tried was wrapping the web part zone in div and applying a class to that:

    <div class="custom">
        <WebPartPages:WebPartZone 
            runat="server" 
            AllowPersonalization="true" 
            ID="CustomZone" 
            Title="Custom Zone" 
            Orientation="Vertical">
        </WebPartPages:WebPartZone>
    </div>
    
    

    Now I can override the default styles, e.g.:

    .custom .ms-rteElement-H3 { /* custom styles */ }

    However, I'd really like to be able to limit the Styles and Markup Styles available to the user. For example, there is no reason a user should ever need to use a Heading 1 (H1) element within this web part zone.

    2011년 10월 5일 수요일 오후 2:44
  • Hi Chris,

    This blog may help.
    http://mosshowto.blogspot.com/2009/12/sharepoint-2010-wiki-styles.html

    Best regards,
    Emir

    2011년 10월 7일 금요일 오전 8:32
  • Thanks Emir. One of the links on that blog provides a Javascript solution:

    http://stackoverflow.com/questions/7615767/how-to-leverage-custom-styles-markup-styles-in-the-sharepoint-2010-cewp-100-j

    The idea is to wait for the page to load and replace the default value of the PrefixStyleSheet attribute with your custom value. Although I would prefer a non-Javascript solution, I will definitely give it a try.

    2011년 10월 7일 금요일 오후 1:43
  • I added the following (taken from the Stack Overflow post above) to a page layout (it could also be added to a master page):

    <PublishingWebControls:EditModePanel runat=server id="EditModePanelCustomRteSyleSheet">
        <script type="text/javascript" src="/_layouts/jquery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript">
            ExecuteOrDelayUntilScriptLoaded(function() {
                $("div[RteRedirect]").each(function() {
                    var id = $(this).attr("RteRedirect"),
                    editSettings = $("#" + id);
                    if(editSettings.length > 0 && editSettings[0].PrefixStyleSheet != 'custom-rte') {
                        editSettings[0]['PrefixStyleSheet'] = 'custom-rte';
                    }
                });
            }, "sp.ribbon.js");
        </script>
    </PublishingWebControls:EditModePanel>
    


    This successfully changes the Styles and Markup Styles for the Content Editor Web Part's rich-text editor. Existing RichHtmlField elements on the page do not seem to be affected, so you can have multiple custom styles and markup styles. The code above will be applied to all Content Editor Web Parts on a page. If you want to apply it just to a specific web part zone, you can wrap the web part zone in a div, e.g.:

    <div class="customWebPartZone">
        <WebPartPages:WebPartZone 
            runat="server" 
            Title="CustomWebPartZone" 
            ID="CustomWebPartZone" />
    </div>
    


    And then change the jQuery selector from 

    $("div[RteRedirect]") 
    

    to

    $(".customWebPartZone div[RteRedirect]")
    


    2011년 10월 7일 금요일 오후 7:37
  • Hi, 

    Fisrt of all thanks to Emir for having referenced my post. 

    Chris, Emir,  I have quite rewritten it, it is much more clear now.

    I also have described the issue regarding the removal of the OOTB rte styles for the wiki page of a team site and had delivered a beta version of a custom CssLink control that is a good starting point for solving that. This beta can be used if you don't plan to use the SharePoint theme ans if there is a defaulturl specified...

    I don't know if you can use that for your concern, but here is the reference to the new section of my post:

    Second limitation of the wiki page in SharePoint 2010: it is very difficult to remove the OOTB RTE style

    and the reference to the codeplex project: 

    Custom CssLink control for the wiki pages of a SharePoint 2010 team site

    Hope that helps

     

     

     

     

     


    Marc Charmois - http://mosshowto.blogspot.com


    • 답변으로 제안됨 m. charmois 2011년 10월 31일 월요일 오전 9:59
    • 편집됨 m. charmois 2011년 10월 31일 월요일 오전 10:20
    2011년 10월 31일 월요일 오전 9:57