Question

This time I’m struggling with my custom widget for Orchard.
It’s a simple content part with two fields:
– Background Color
– Size

I want to be able to add HTML content to this widget; so I added the Body Part. This part must be displayed within my widget. The result should be something like this:

<div class="size-small bg-color-red"> BODY PART HTML CONTENT </div>

But unfortunately, the Body Part is always displayed before or after my widget.

<Placement>
    <Place Parts_ContentTile="Content"/>
    <Place Parts_ContentTile_Edit="Content:7.5"/>
</Placement>

Not so nice ‘solution’:
A way to resolve this is to remove the body part and replace it with a simple text field. This text field is rendered at the desired position. But then the TinyMCE Editor is not available.

Update after comment from Ivan:
I tried to change both (Content Type and Content Part (separate)) but unfortunately, both times, the TextField content is displayed after the widget. Should that be fixed in the Placement.info?

Another option is to add a String field to my Widget Model. But then it is not possible to show the TinyMCE editor. Am I right?

So I’ve got the feeling that my expectations about widgets, content parts and placements are incorrect. Hopefully somebody here can point me in the right direction.

Answer 1

This post on SO from Mark Z was really helpfull to me!

I added a String property to my Model and added a new Database Migration:

public int UpdateFrom3()
{
   // Adds a new Content column
   SchemaBuilder.AlterTable("ContentTileRecord", table => table.AddColumn("Content", DbType.String));

   return 4;
}

After that I added the field to the Editor Part View:

@Script.Require("OrchardTinyMce")

<div class="editor-label">
   @Html.LabelFor(model => model.Content)
</div>

<div class="editor-field">
   @Html.TextAreaFor(model => model.Content, new { @class = "html tinymce" }) 
</div>

The Content Property is now displayed as a TextArea. Because of the classes ‘html and tinymce’ the TinyMCE editor is instantiated. (Don’t forget the Script.Require call)

Because of the fact that the Content property contains HTML, it is required to use the @Html.Raw helper to display the value of this property.

@Html.Raw(Model.Content)