Question

每当编辑图片时（即使没有触摸任何高度或宽度），它也会添加：

style="height: 123px; width: 123px;"

编辑前：

<p><img alt="" height="123" width="123" src="~/media/123" /></p>

编辑后：

<p><img alt=""  
src="~/media/123;h=123&amp;w=123" style="height: 123px; width: 123px;" /></p>

问题在于Sitecore混淆了样式的高度和宽度以及图片的响应性，有没有办法删除它？

Answer 1

以一致的方式删除这些属性的最佳方法是通过覆盖此默认管道来剥离图像渲染上的属性：Sitecore.Pipelines.RenderField.GetImageFieldValue。

以下是如何做到的：

首先将以下类添加到您的解决方案中：

namespace Custom.Business.SC.Extensions.Pipelines.RenderField
{
    using System;

    using HtmlAgilityPack;

    using Sitecore;
    using Sitecore.Diagnostics;
    using Sitecore.Pipelines.RenderField;

    /// <summary>Class that renders a rich text field with removed image dimensions.</summary>
    public class GetFieldValue : Sitecore.Pipelines.RenderField.GetFieldValue
    {
        /// <summary>The process method.</summary>
        /// <param name="args">The render field arguments.</param>
        public new void Process(RenderFieldArgs args)
        {
            base.Process(args);

            // Do not modify output if the field is not a rich text field,
            // or if the page is in page editor mode
            if (args.FieldTypeKey != "rich text" || string.IsNullOrEmpty(args.FieldValue) || Context.PageMode.IsPageEditorEditing)
            {
                return;
            }                       

            // stripping dimension attributes from images
            Profiler.StartOperation("Stripping dimension attributes from image field: " + args.FieldName);
            args.Result.FirstPart = this.StripImageDimensions(args.Result.FirstPart);
            Profiler.EndOperation();
        }

        /// <summary>The strip image dimensions.</summary>
        /// <param name="text">The text.</param>
        /// <returns>The <see cref="string"/>.</returns>
        private string StripImageDimensions(string text)
        {
            if (string.IsNullOrWhiteSpace(text))
            {
                return text;
            }

            var outText = text;
            try
            {
                var doc = new HtmlDocument();
                doc.LoadHtml(outText);
                this.StripAttribute(doc, "width");
                this.StripAttribute(doc, "height");
                this.StripAttribute(doc, "style");
                outText = doc.DocumentNode.WriteContentTo();
            }
            catch (Exception)
            {
            }

            return outText;
        }

        /// <summary>The strip attribute.</summary>
        /// <param name="doc">The doc.</param>
        /// <param name="attribute">The attribute.</param>
        private void StripAttribute(HtmlDocument doc, string attribute)
        {
            // HtmlAgilityPack returns null instead of an empty collection when the query finds no results.  
            var nodes = doc.DocumentNode.SelectNodes(string.Format("//img[@{0}]", attribute));
            if (nodes == null || nodes.Count.Equals(0))
            {
                return;
            }

            foreach (var node in nodes)
            {
                node.Attributes[attribute].Remove();
            }
        } 
    }  
}

现在使用适当的配置条目将默认管道替换为上面的自定义管道。包含文件是最佳做法，但我添加了两个示例以尝试清楚。

从app_config / include / custom.config文件中修补的示例。

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
            <sitecore>
              <pipelines>
                <renderField>
                  <processor type="Custom.Business.SC.Extensions.Pipelines.RenderField.GetFieldValue,     Custom.Business"
                    patch:instead="*[@type='Sitecore.Pipelines.RenderField.GetImageFieldValue, Sitecore.Kernel']" />
                </renderField>
              </pipelines>
            </sitecore>
    </configuration>

或者替换web.config中的条目：

<renderField>
  <processor type="Sitecore.Pipelines.RenderField.SetParameters, Sitecore.Kernel" />
  <processor type="Sitecore.Pipelines.RenderField.GetFieldValue, Sitecore.Kernel" />
  <processor type="Sitecore.Pipelines.RenderField.GetTextFieldValue, Sitecore.Kernel" />
  <processor type="Sitecore.Pipelines.RenderField.ExpandLinks, Sitecore.Kernel" />
  <!--<processor type="Sitecore.Pipelines.RenderField.GetImageFieldValue, Sitecore.Kernel" />-->
  <processor type="Custom.Business.SC.Extensions.Pipelines.RenderField.GetFieldValue, Custom.Business" />
  <processor type="Sitecore.Pipelines.RenderField.GetLinkFieldValue, Sitecore.Kernel" />
  <processor type="Sitecore.Pipelines.RenderField.GetInternalLinkFieldValue, Sitecore.Kernel" />
  <processor type="Sitecore.Pipelines.RenderField.GetMemoFieldValue, Sitecore.Kernel" />
  <processor type="Sitecore.Pipelines.RenderField.GetDateFieldValue, Sitecore.Kernel" />
  <processor type="Sitecore.Pipelines.RenderField.GetDocxFieldValue, Sitecore.Kernel" />
  <processor type="Sitecore.Pipelines.RenderField.AddBeforeAndAfterValues, Sitecore.Kernel" />
  <processor type="Sitecore.Pipelines.RenderField.RenderWebEditing, Sitecore.Kernel" />
</renderField>

现在您应该可以像往常一样将图像插入到富文本字段中。在内容编辑器中查看html视图时，图像仍将显示高度和宽度。但是，一旦您在网站上查看内容，您就会看到属性已被条带化。

Answer 2

您可以在Sitecore富文本编辑器中删除标记

参考：Sitecore Rich Text Editor Series

在RTE的引擎盖下是Telerik RadEditor。这个控件有   一个名为“StripFormattingOnPaste”的属性，描述于此   teleriks网站：   StripFormattingOnPaste Property

编辑提供了许多不同的内容   剥离标签的方法

或更好地使用单独的图像字段/类型，而不是在富文本编辑器中添加图像。

我们删除了什么

高级功能 - 我们没有包含诸如“插入表单字段”之类的项目，因为这仅适用于超级用户。他们可以使用其他   意味着创建表单（例如营销人员的Web表单）。我们也是   假设高级用户可能正在编辑   HTML直接。

模糊功能 - 例如插入日期/时间不是我们大多数客户会使用的，所以除非每天都有   需要这个，不值得包括。

“请勿触摸” - 我们为标题设置了特定的CSS样式，因此我们不希望用户有能力使用   文本，所以我们删除了这些功能

参考：Customizing Sitecore's rich text editor for better usability

Sitecore内容编辑器 - 添加样式

2 个答案: