Question

我有一个名为icon的字段，它是一个源自内容树中文件夹的下拉列表。我希望列表不仅可以显示文本值（显示在屏幕截图中），还可以使用图标字体并显示实际图标的外观。基本上从以下位置自定义内容编辑器的此字段的下拉列表：

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

到

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

是否有任何关于如何修改输入html以用于删除列表的文档，以及修改内容编辑器页面以加载其他链接（在本例中为字体文件）。

Answer 1

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

如果你想拥有look，那么代码也在Git上。

Answer 2

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

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

`<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."));
        }
    }
}

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

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

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

e.g。 数据源= / Sitecore的/内容/查找/ iconfonts＆安培; StyleClassField = IconClassName

要使用此新字段，请将上述代码编译为项目，切换到核心数据库，然后创建新字段类型 - 您可以复制位于/sitecore/system/Field types/Link Types/Droplink中的现有Droplink字段。删除现有的Control字段，而是将ASSEMBLY和CLASS字段设置为指向您的实现。

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

自定义字段的删除列表选项的html输出

2 个答案: