Add enclosing tag for only UnOrdered list from Ric

问题:

I need to style UL's coming from Rich Text Editor in Sitecore. I am trying to find out if there is a class that I can add to all UL's coming from Sitecore's Rich Text Editor.

Thanks in Advance Ashok

回答1:

The easiest solution is just to wrap your FieldRenderer with an HTML element with appropriate class applied in code:

<div class="rich-text">
    <sc:FieldRenderer ID="frRichTextField" runat="server" FieldName="MyFieldName" />
</div>

And then add in some CSS styles to handle your UL's within this:

.rich-text ul {
    /* add in your styling */
}

You can also use the before and after properties of the FieldRenderer to pass in your tag:

<sc:FieldRenderer ID="frRichTextField" runat="server" FieldName="MyFieldName" 
    Before="<div class='rich-text'>" After="</div>" />

EDIT:

If you wanted to be more drastic then you could add in your own renderField pipeline processor to ensure your control is always wrapped with the required tag or you could make use of the enclosingTag property and patch the AddBeforeAndAfterValues pipeline instead:

namespace MyCustom.Pipelines.RenderField
{
    public class AddBeforeAndAfterValues
    {
        public void Process(RenderFieldArgs args)
        {
            Assert.ArgumentNotNull((object)args, "args");
            if (args.Before.Length > 0)
                args.Result.FirstPart = args.Before + args.Result.FirstPart;
            if (args.After.Length > 0)
            {
                RenderFieldResult result = args.Result;
                string str = result.LastPart + args.After;
                result.LastPart = str;
            }
            if (args.EnclosingTag.Length == 0 || args.Result.FirstPart.Length <= 0 && args.Result.LastPart.Length <= 0)
                return;

            // check if a css class paramter has been passed in
            string cssClass = args.Parameters.ContainsKey("class") ? args.Parameters["class"] : String.Empty;
            // add the class to the enclosing tag property
            args.Result.FirstPart = StringExtensions.FormatWith("<{0} class='{1}'>{2}", (object)args.EnclosingTag, cssClass, (object)args.Result.FirstPart);
            args.Result.LastPart = StringExtensions.FormatWith("{0}</{1}>", (object)args.Result.LastPart, (object)args.EnclosingTag);
        }
    }
}

Patch the Sitecore config file:

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"
               xmlns:set="http://www.sitecore.net/xmlconfig/set/">
  <sitecore>
    <pipelines>
      <renderField>
        <processor type="Sitecore.Pipelines.RenderField.GetLinkFieldValue, Sitecore.Kernel"
                   set:type="MyCustom.Pipelines.RenderField.AddBeforeAndAfterValues, MyCustom.Pipelines" />
      </renderField>
    </pipelines>
  </sitecore>
</configuration>

And then call the FieldRenderer with the EnclosingTag set and pass in your class parameter:

<sc:FieldRenderer ID="frRichTextField" runat="server" FieldName="MyFieldName" 
    EnclosingTag="div" Parameters="class=rich-text" />

This really doesn't add much over using the before/after properties though and I would generally try to stay away from overwriting default Sitecore processors to save heartache when upgrading.

回答2:

You could either tap into relevant pipelines or update your sublayouts so that you always have a fixed class around every instance of the rich text field rendering:

<div class="rtf">
    <sc:Text ID="scContent" runat="server" FieldName="Content" />
</div>

You will have to make sure as a developer that all current and future instances of rich text field renderings are enclosed by a tag with this class. You could then include in the global CSS, a common style for this class.

.rtf ul {
    ...
    ....
}

If you don't want to have to add this wrapper for every single rtf rendering, you could tap into a relevant pipeline. (Note - this might be a better approach with regard to code maintainability)

You could choose to use one of the two:

• renderField pipeline or the
• saveRichTextContent pipeline

So you would add a new processor for either of these pipelines, in which you could access the text within rich text fields only and process that as you please (easier to manipulate the html using the html agility pack)

If you use renderField pipeline - the text within the rich text field in sitecore will not change, the code you write will execure only while rendering the field - in preview / page editor or normal mode.

Using saveRichTextContent pipeline on the other hand, will update the in the rich text field when the content author clicks on save (after entering the text) in content editor mode.

You can see the following examples for these:

renderField - http://techmusingz.wordpress.com/2014/05/25/unsupported-iframe-urls-in-sitecore-page-editor-mode/ (Sample of HtmlUtility is also present here - instead of selecting all tags, you could select all and add your desired class attribute.)

saveRichTextContent - http://techmusingz.wordpress.com/2014/06/14/wrapping-rich-text-value-in-paragraph-tag-in-sitecore/

Hope this helps.

回答3:

Best practice would be to just add the Class to the Rich Text Editor for use in the Editor.

There are lots of good articles on doing this. Here are a couple: http://sitecoreblog.blogspot.com/2013/11/add-css-class-to-richtext-editor.html http://markstiles.net/Blog/2011/08/13/add-css-classes-to-sitecore-rich-text-editor.aspx

These are minimal changes that provide you with the ability to put the styling ability in the hands of the Content Author, but still controlling what styles and classes they can use inline.