在情节CMS编辑模式中以下拉列表显示图标

Question

我需要在CMS编辑模式下显示图标和下拉列表，如下所示。我正在使用Episerver版本11.15.1.0

如果您有更好的建议/方法，请告知。

Answer 1

以防以后有人

 define([
    "dojo/_base/declare",
    "dojo/_base/array",
    "dojox/html/entities",
    "epi-cms/contentediting/editors/SelectionEditor"
],
function (
    declare,
    array,
    entities,
    SelectionEditor
) {
    return declare("alloy/editors/SelectionEditorHTML", [SelectionEditor], { 
       _setSelectionsAttr: function (newSelections) {           
          
          this.set("options", array.map(newSelections, function (item) {
                let svghtml="<div class='svg_icon'><svg style='width:1.5rem;height:1.5rem'> <use xlink:href='/build/spritemap/demo.spritemap.svg#"+item.value +"'></use></svg></div>";
                let html = entities.decode( "<div class='_drpmain'><div class='drptxt'>"+ item.text + "</div>") + entities.decode(svghtml)+"</div>";
                return {
                    label: html,
                    value: item.value,
                    selected: item.value === this.value || !item.value && !this.value
                };
            }, this));
        }
    });
});

需要

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
    public class SelectOneWithIconAttribute : Attribute, IMetadataAware
    {
        public virtual Type SelectionFactoryType { get; set; }
        public void OnMetadataCreated(ModelMetadata metadata)
        {
            if (metadata is ExtendedMetadata extendedMetadata)
            {
                extendedMetadata.ClientEditingClass = "alloy/editors/SelectionEditorHTML";
                extendedMetadata.SelectionFactoryType = SelectionFactoryType;
            }
        }
    }

我在这里粘贴答案，

 [SelectOneWithIcon(SelectionFactoryType = typeof(IconSelectionFactory))]        
 [CultureSpecific]      
 public virtual string Icon1 { get; set; }