如何將自定義寬度應用於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 Page界面中呈現時，我可以將該類或樣式應用於該字段嗎？ 或者是否有一些可以裝飾房產的房產會使房間更長？

這是我所指的界面的屏幕截圖。 我想在該表單上使該標題字段更寬。

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選擇器。