Suitable for use with multiple distinct editable areas? about contenttools HOT 1 CLOSED

You can certainly support multiple editable areas or regions (and I do so on a number of sites). Typically the way I tend to approach this is something like:

<ul>
    <li class="post">
        <div class="post__body" data-editable="1">
            <p>...</p>
        </div>
    </li>
    <li class="post">
        <div class="post__body" data-editable="2">
            <p>...</p> 
        </div>
    </li>
</ul>

Then for the save init/save code:

var editor = ContentTools.EditorApp.get();
editor.init('*[data-editable]', 'data-editable');

editor.bind('save', function (regions) {

    // The regions will be keyed against post Ids and so you can map changes in the content to the
    // individual posts.
    var payload = new FormData();
    for (var postId in regions) {
        if (regions.hasOwnProperty(name)) {
            payload.append(postId, regions[postId]);
        }
    }

});

You can of course store additional information against the region (e.g data-field-name="synopis") and access it from the HTML using document.querySelector('data-editable=' + postId).getAttribute('data-field-name'); That way you can have multiple editable regions within each post.

As for anchoring a tool bar to the top of each editable area that's not currently supported, the toolbox is anchored to the screen not the content.

from contenttools.