orchardcore-html

name

orchardcore-html

description

Skill for using HtmlBodyPart in Orchard Core. Covers HTML content editing, shape templates for Liquid and Razor, custom editor configurations, HTML sanitization, Trumbowyg and Monaco editors, and display/editor shape types. Use this skill when requests mention Orchard Core HTML Body, Use HtmlBodyPart for Rich Content Editing, Enabling HTML Body, Attaching HtmlBodyPart to a Content Type, Shapes, HtmlBodyPartViewModel Properties, or closely related Orchard Core implementation, setup, extension, or troubleshooting work. Strong matches include work with OrchardCore.Html, OrchardCore.Html.ViewModels, HtmlBodyPart, DataMigration, IContentDefinitionManager, WithPart, TitlePart, TypePartSettings, HtmlBodyPartSettings, ContentDefinition, ContentTypeSettings, ContentTypePartSettings. It also helps with Shapes, HtmlBodyPartViewModel Properties, HtmlBodyPart Properties, plus the code patterns, admin flows, recipe steps, and referenced examples captured in this skill.

Orchard Core HTML Body - Prompt Templates

Use HtmlBodyPart for Rich Content Editing

You are an Orchard Core expert. Generate code, templates, and configuration for the HTML Body module — enabling rich HTML content editing with multiple editor options.

Guidelines

• Enable the OrchardCore.Html feature to use HtmlBodyPart.
• HtmlBodyPart stores HTML content for rich text editing scenarios.
• Shape templates use the HtmlBodyPartViewModel model with Body and Html properties.
• HTML content can include Liquid tags that are processed before rendering.
• HTML input is sanitized by default when saved; disable via the Sanitize HTML part setting.
• Three built-in editors: Default (basic textarea), Wysiwyg (Trumbowyg WYSIWYG), and Monaco (source code editor).
• Custom editors are created by providing HtmlBodyPart_Option__{Name} and HtmlBodyPart_Edit__{Name} shape templates.
• All C# classes must use the sealed modifier, except View Models.
• All recipe JSON must be wrapped in the root { "steps": [...] } format.

Enabling HTML Body

{
  "steps": [
    {
      "name": "Feature",
      "enable": [
        "OrchardCore.Html"
      ],
      "disable": []
    }
  ]
}

Attaching HtmlBodyPart to a Content Type

public sealed class Migrations : DataMigration
{
    private readonly IContentDefinitionManager _contentDefinitionManager;

    public Migrations(IContentDefinitionManager contentDefinitionManager)
    {
        _contentDefinitionManager = contentDefinitionManager;
    }

    public async Task<int> CreateAsync()
    {
        await _contentDefinitionManager.AlterTypeDefinitionAsync("Page", type => type
            .DisplayedAs("Page")
            .Creatable()
            .Listable()
            .Draftable()
            .Versionable()
            .WithPart("TitlePart", part => part.WithPosition("0"))
            .WithPart("HtmlBodyPart", part => part
                .WithPosition("1")
                .WithEditor("Wysiwyg")
            )
        );

        return 1;
    }
}

Shapes

The following shapes are rendered when HtmlBodyPart is attached to a content type:

Shape Name	Display Type	Default Location	Model Type
HtmlBodyPart	Detail	Content:5	HtmlBodyPartViewModel
HtmlBodyPart	Summary	Content:10	HtmlBodyPartViewModel

HtmlBodyPartViewModel Properties

Property	Type	Description
Body	string	The content that was edited. It might contain tokens.
Html	string	The HTML content once all tokens have been processed.
ContentItem	ContentItem	The content item of the part.
HtmlBodyPart	HtmlBodyPart	The HtmlBodyPart instance.
TypePartSettings	HtmlBodyPartSettings	The settings of the part.

HtmlBodyPart Properties

Property	Type	Description
Body	string	Raw HTML content. May contain Liquid tags; prefer rendering the shape.
Content	JObject	The raw content of the part.
ContentItem	ContentItem	The content item containing this part.

Shape Template (Liquid)

Override the detail display at Views/HtmlBodyPart.liquid:

<article>
    {{ Model.Html | raw }}
</article>

Override the summary display at Views/HtmlBodyPart.Summary.liquid:

<p>{{ Model.Html | strip_html | truncate: 200 }}</p>

Shape Template (Razor)

Override the detail display at Views/HtmlBodyPart.cshtml:

@model OrchardCore.Html.ViewModels.HtmlBodyPartViewModel

<article>
    @Html.Raw(Model.Html)
</article>

Editors

Editor Name	Description
Default	Basic HTML textarea for raw HTML editing.
Wysiwyg	Trumbowyg WYSIWYG editor with toolbar for rich editing.
Monaco	Monaco source code editor for HTML source editing.

Select the editor in the HtmlBody Part settings for each content type.

Custom Editor Declaration

To declare a new editor option, create a file named HtmlBodyPart-{Name}.Option.cshtml:

@{
    string currentEditor = Model.Editor;
}
<option value="MyCustomEditor" selected="@(currentEditor == "MyCustomEditor")">@T["My Custom Editor"]</option>

To render the editor UI, create a file named HtmlBodyPart-{Name}.Edit.cshtml:

@using OrchardCore.Html.ViewModels
@model HtmlBodyPartViewModel

<fieldset class="ocat-wrapper">
    <label asp-for="Body" class="ocat-label">@T["Body"]</label>
    <div class="ocat-end">
        <textarea asp-for="Body" rows="10" class="form-control"></textarea>
        <span class="hint">@T["The body of the content item."]</span>
    </div>
</fieldset>

Overriding Predefined Editors

File Name	Overrides
HtmlBodyPart.Edit.cshtml	The Default editor.
HtmlBodyPart-Wysiwyg.Edit.cshtml	The Wysiwyg editor.
HtmlBodyPart-Monaco.Edit.cshtml	The Monaco editor.

Sanitization

By default, all HTML input is sanitized when HtmlBodyPart is saved. To manage sanitization:

• Per content type: Uncheck Sanitize HTML in the HtmlBody Part settings.
• Globally: Configure the HTML Sanitizer module to adjust allowed tags and attributes.

Creating a Content Type with HtmlBodyPart via Recipe

{
  "steps": [
    {
      "name": "ContentDefinition",
      "ContentTypes": [
        {
          "Name": "Article",
          "DisplayName": "Article",
          "Settings": {
            "ContentTypeSettings": {
              "Creatable": true,
              "Listable": true,
              "Draftable": true,
              "Versionable": true
            }
          },
          "ContentTypePartDefinitionRecords": [
            {
              "PartName": "TitlePart",
              "Name": "TitlePart",
              "Settings": {
                "ContentTypePartSettings": {
                  "Position": "0"
                }
              }
            },
            {
              "PartName": "HtmlBodyPart",
              "Name": "HtmlBodyPart",
              "Settings": {
                "ContentTypePartSettings": {
                  "Position": "1",
                  "Editor": "Wysiwyg"
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

Creating Content with HtmlBodyPart via Recipe

{
  "steps": [
    {
      "name": "Content",
      "data": [
        {
          "ContentItemId": "[js:uuid()]",
          "ContentType": "Article",
          "DisplayText": "Welcome",
          "Latest": true,
          "Published": true,
          "TitlePart": {
            "Title": "Welcome"
          },
          "HtmlBodyPart": {
            "Html": "<p>Welcome to our site!</p>"
          }
        }
      ]
    }
  ]
}

Rendering HtmlBodyPart in Templates

Shortcodes and Liquid tags within HtmlBodyPart are automatically processed when the shape is rendered through Display Management.

Liquid

{{ Model.Content.HtmlBodyPart | shape_render }}

Razor

@await DisplayAsync(Model.Content.HtmlBodyPart)