CODEWITHSUNDEEP
orchardcmsorchardcms-1.6
Rhapsody
Rhapsody

Reputation: 6077

Add Body Part to Custom Widget - Placement

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.

Upvotes: 1

Views: 1107

Answers (2)

Rhapsody
Rhapsody

Reputation: 6077

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)

Upvotes: 1

Ivan Ferić
Ivan Ferić

Reputation: 4763

When using TextField, you can use TinyMCE by specifying HTML flavor in the settings of the field.

To do that you can go to Content → (Content Types or Content Parts depending on which you are trying to change) → Select your ContentType or ContentPart → Expand the definition of the TextField you're using → Select HTML from the drop down menu next to Flavor → Click on Save button.

Upvotes: 2

Related Questions