Changing Inline Editing Wrapping Tag per field?

Question

To enable a component template for inline editing we add the Enable inline editing for content Template Building Block and optionally set the Default field HTML Tag, which defaults to <span>.

We also add the appropriate markup to the Output. For example, I understand we can use RenderComponentPresentation or RenderComponentField (in DWT), tcdl: tags, tridion: controls (Java) / tags (.NET), or output the inline editing JSON Markup directly.

I'd like to choose these fields based on the schema field or how its presented.

Is there a tag, parameter, setting, or configuration that lets me change the wrapping per field?

Background: I mainly want to choose between a span for inline HTML tags and a div for block-level elements to make XPM borders wrap correctly. For now, I'll try adjusting Staging-specific styles and maybe add an XPM-specific class as needed.

Answer 1

The Building Blocks that ship with Experience Manager will allow you to choose a single tag that is used for each field, so they are of no use to you.

When I found I needed more fine-grained control over the exact HTML, I decided to write some simple DWT function sources that only output the HTML comments that Experience Manager requires. By using these you'll have full control over your HTML, without having to worry about the exact syntax of the XPM command language too much.

<div class="ContentFull">
    @@MarkComponentPresentation()@@
    <h1>@@MarkComponentField('Title')@@@@Component.Fields.Title@@</h1>
    <div>@@MarkComponentField('Image')@@<img src="@@Image.ID@@"/></div>
    <div class="FullDescription">
        <div class="FullDescriptionText">
            @@MarkComponentField('Description')@@@@Component.Fields.Description@@
        </div>
    </div>
</html>

The function sources and their documentation can be found here: https://code.google.com/p/tridion-practice/wiki/TridionUI2012FunctionsForUseInHtmlTemplates