Click to edit - Getting started - Examples

Click to edit

Start editing only after the user clicks the host element.

City weekend guide

Click the preview to start editing this block in place.

Update the hero copy, lead paragraph, and links without opening a separate admin screen.

Code

<div id="click-edit-actions" hidden>
    <button type="button" id="click-edit-save">Save</button>
    <button type="button" id="click-edit-discard">Discard</button>
</div>

<div id="entry">
    <h2>City weekend guide</h2>
    <p>Click the preview to start editing.</p>
</div>

const options = {
    clickToEdit: true
};
const app = Redactor('#entry', options);

document.getElementById('click-edit-save').addEventListener('click', () => {
    console.log(app.getContent());
    app.stop();
    app.start(options);
});

document.getElementById('click-edit-discard').addEventListener('click', () => {
    app.stop();
    app.start(options);
});