从UL中的富文本编辑器中仅为UnOrdered列表添加封闭标记

时间:2014-07-14 09:00:30

标签: sitecore sitecore7

我需要使用Sitecore中的Rich Text Editor来设计UL。我试图找出是否有一个类可以添加到来自Sitecore的富文本编辑器的所有UL。

先谢谢 阿肖克

3 个答案:

答案 0 :(得分:3)

最简单的解决方案就是将FieldRenderer包含一个HTML元素,并在代码中应用适当的类:

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

然后添加一些CSS样式来处理你的UL:

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

您还可以使用FieldRenderer的beforeafter属性传入您的代码:

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

修改

如果您想要更加激烈,那么您可以将自己的renderField管道处理器添加到ensure your control is always wrapped with the required tag,或者您可以使用enclosingTag property并修补AddBeforeAndAfterValues管道改为:

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);
        }
    }
}

修补Sitecore配置文件:

<?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>

然后使用EnclosingTag设置调用FieldRenderer并传入您的类参数:

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

虽然使用before / after属性并没有多大帮助,但我通常会尝试远离覆盖默认的Sitecore处理器以在升级时节省心痛。

答案 1 :(得分:0)

您可以使用相关的管道或更新子布局,以便在富文本字段呈现的每个实例周围始终有一个固定的类:

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

作为开发人员,您必须确保富文本字段呈现的所有当前和未来实例都包含在具有此类的标记中。 然后,您可以在全局CSS中包含此类的常用样式。

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

如果您不想为每个rtf渲染添加此包装器,您可以使用相关的管道。 (注意 - 关于代码可维护性,这可能是一种更好的方法)

您可以选择使用以下两者之一:

  • renderField 管道 或者
  • saveRichTextContent 管道

因此,您可以为这些管道中的任何一个添加新处理器,您可以在其中访问富文本字段中的文本并随意处理(使用html敏捷包更容易操作html)

如果您使用 renderField 管道 - sitecore中富文本字段内的文本不会更改,您编写的代码只会在渲染字段时执行 - 在预览中/页面编辑器或普通模式。

另一方面,使用 saveRichTextContent 管道,当内容作者在内容编辑器模式下点击保存(输入文本后)时,将更新富文本字段

您可以看到以下示例:

renderField - http://techmusingz.wordpress.com/2014/05/25/unsupported-iframe-urls-in-sitecore-page-editor-mode/(此处还提供了HtmlUtility的示例 - 您可以选择所有标记,而不是选择所有标记,并添加所需的类属性。)

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

希望这有帮助。

答案 2 :(得分:0)

最佳做法是将类添加到富文本编辑器以在编辑器中使用。

有很多关于这样做的好文章。这是一对夫妇: 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

这些是最小的更改,使您能够将样式功能置于内容作者手中,但仍然可以控制内联使用的样式和类。