📄 Multiple Editable Area Support

ContentBuilder.js supports editing content across multiple editable areas on the same page.

You can define multiple editable areas in your HTML like this:

<div class="section">
    <div class="container area1">
        <!-- Content for area 1 -->
    </div>
</div>

<div class="section">
    <div class="container area2">
        <!-- Content for area 2 -->
    </div>
</div>

Then initialize ContentBuilder once using the shared class (e.g., .container):

const builder = new ContentBuilder({
    container: '.container'
});

This tells ContentBuilder to make all elements matching .container editable.

Retrieving HTML from Specific Areas

To get the generated HTML from a specific area, use the html() method and pass the target container element:

let html1 = builder.html(document.querySelector('.area1')); // Get content of first area
let html2 = builder.html(document.querySelector('.area2')); // Get content of second area

Try the Example

You can test multiple editable areas by opening the provided example in the package:

• example3.html