为字段的下拉列表选项自定义 html 输出

Question

我有一个名为图标的字段，它是一个来自内容树中文件夹的下拉列表。我希望该列表不仅显示文本值（如屏幕截图所示），而且还使用图标字体并显示实际图标的外观。基本上为该字段定制内容编辑器的下拉列表来自：

<option value="gears">gears</option>

到

<option value="gears">gears <span class="my-icon-font-gears"></span></option>

是否有任何文档说明如何修改下拉列表的输出 html，以及如何修改内容编辑器页面以加载另一个 link，在本例中为字体文件。

Answer 1

建议您使用 Droplink 字段类型而不是 Droplist，因为值是由 GUID 存储的，如果 link 项是改名或移动。在任何情况下，您都需要一个自定义字段，继承自 Sitecore.Shell.Applications.ContentEditor.LookupEx（DropLink 字段类型）并使用您需要的自定义标记覆盖 DoRender() 方法。

无法嵌入 span 标签，因为 option tag cannot contain other tags 无效 HTML。添加它会导致浏览器将其删除。但是，您可以在选项本身上设置 class 并为其设置样式。

`<option value="gears" style="my-icon-font-gears">gears</option>`

下面是一些实现该字段的示例代码。

using System;
using System.Web.UI;
using Sitecore;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.Globalization;

namespace MyProject.CMS.Custom.Controls
{
    public class StyledLookupEx : Sitecore.Shell.Applications.ContentEditor.LookupEx
    {
        private string _styleClassField;
        private string StyleClassField
        {
            get
            {
                if (String.IsNullOrEmpty(_styleClassField))
                    _styleClassField = StringUtil.ExtractParameter("StyleClassField", this.Source).Trim();
                return _styleClassField;
            }
        }

        // This method is copied pasted from the base class apart from thhe single lined marked below
        protected override void DoRender(HtmlTextWriter output)
        {
            Assert.ArgumentNotNull(output, "output");
            Item[] items = this.GetItems(Sitecore.Context.ContentDatabase.GetItem(this.ItemID, Language.Parse(this.ItemLanguage)));
            output.Write("<select" + this.GetControlAttributes() + ">");
            output.Write("<option value=\"\"></option>");
            bool flag1 = false;
            foreach (Item obj in items)
            {
                string itemHeader = this.GetItemHeader(obj);
                bool flag2 = this.IsSelected(obj);
                if (flag2)
                    flag1 = true;
                /* Option markup modified with class added */
                output.Write("<option value=\"" + this.GetItemValue(obj) + "\"" + (flag2 ? " selected=\"selected\"" : string.Empty) + " class=\"" + obj[StyleClassField] + "\" >" + itemHeader + "</option>");
            }
            bool flag3 = !string.IsNullOrEmpty(this.Value) && !flag1;
            if (flag3)
            {
                output.Write("<optgroup label=\"" + Translate.Text("Value not in the selection list.") + "\">");
                output.Write("<option value=\"" + this.Value + "\" selected=\"selected\">" + this.Value + "</option>");
                output.Write("</optgroup>");
            }
            output.Write("</select>");
            if (!flag3)
                return;
            output.Write("<div style=\"color:#999999;padding:2px 0px 0px 0px\">{0}</div>", Translate.Text("The field contains a value that is not in the selection list."));
        }
    }
}

此字段添加自定义属性，允许您指定 linked 字段以用于样式 class。假设您在 linked 项上有另一个单行文本字段来指定 CSS class.

用法：按以下格式设置字段的来源属性：

Datasource={path-or-guid-to-options}&StyleClassField={fieldname}

例如Datasource=/sitecore/content/lookup/iconfonts&StyleClassField=IconClassName

要使用这个新字段，将上述代码编译到项目中，切换到核心数据库，然后创建一个新的字段类型——您可以复制位于 [=18= 中的现有 Droplink 字段].删除现有的 Control 字段，而是将 ASSEMBLY 和 CLASS 字段设置为指向您的实现。

您还需要将带有样式定义的自定义 CSS 样式表加载到内容编辑器中，您可以通过 following this blog post 实现。

Answer 2

我在市场上创建了一个执行类似操作的模块。你可以看看here。那里有一些文档解释了如何使用它。

代码也在Git如果你想要一个look。

为字段的下拉列表选项自定义 html 输出

Customize html output for a field's droplist options

html

css

sitecore

sitecore8