如何将自定义宽度应用于EPiServer属性的输入字段？

Question

在EPiServer 7.5中，我创建了一个NewsArticle模型，它具有各种文本字段的多个属性。其中一些属性具有StringLength限制。例如，新闻文章的标题是这样装饰的：

    [Display(
    Order = 10,
    Name = "Title (Headline)",
    Description = "The article's title (headline). Title also appears in the browser tab.",
    Prompt = "Article headline or title",
    GroupName = SystemTabNames.Content
    )]
    [Required]
    [StringLength(100)]
    public override string Title { get; set; }

添加新的NewsArticle页面时，我想将输入显示为比浏览器为元素显示的默认宽度字段更长的字段。

我可以在Add Field界面渲染时对该字段应用类或样式吗？或者是否有一些属性可以装饰房产，这将使它更长？

这是我所指的界面的屏幕截图。我想在该表单上使该标题字段更宽。

Answer 1

使用自定义EditorDescritor / UI提示很容易实现。

创建编辑器描述符（继承 EditorDescriptor ），覆盖 ModifyMetadata 方法，然后设置：

metadata.EditorConfiguration.Add（“style”，“width：300px”）;

这将为编辑器的“input”元素添加“style”属性，使文本框更宽。

例如，以下内容将此添加到所有字符串属性，而无需添加UIHint属性，使字符串属性的文本框宽度为300像素：

[EditorDescriptorRegistration(EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast, TargetType = typeof(string))]
public class WideTextboxEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);

        metadata.EditorConfiguration.Add("style", "width: 300px");
    }
}

Answer 2

这是我在Episerver 7.5及更高版本中自定义CMS编辑器视图外观的方法。

1. 创建一个文件EpiCustomizations.css并将其放在/ ClientResources / Styles /
中

2. 在您的情况下，将此CSS规则添加到该文件

   /* Widen the textbox input in the editor views */
   .Sleek .dijitTextBox:not(.epi-categoriesGroup):not(.dojoDndContainer):not(.dijitNumberTextBox ) {
       width: 600px !important;
   }
   

3. 编辑/创建module.config并将其放在根文件夹

中

4. 将其插入module.config以便注册样式表

   <module>
       <clientResources>
           <add name="epi-cms.widgets.base" path="Styles/EpiCustomizations.css" resourceType="Style" />
       </clientResources>
   </module>
   

注意：您可能需要根据您正在使用的Episerver版本调整CSS选择器。