How to edit only parts of the html and each part will have ckeditor/toolbar?

[jon9090]

📝 Ask a Question

I received an HTML template from the server like this:

<div>
    <div>This is not allowed to edit</div>
    <div class="foo">Not editable <div class="can-edit">Content editable</div></div>
    <div class="bar">Not editable <div class="can-edit">Content editable</div></div>
</div>

I want to restrict user editing to only the parts with the "can-edit" class. Each can-edit section should include its own editor toolbar.

Is it possible to achieve this with Angular?

<ckeditor [editor]="Editor" [data]="data"></ckeditor>

In other words, can I send the entire HTML to CKEditor and have it restrict editing to only the areas with the can-edit class, while providing a toolbar inside each can-edit div instead of a single toolbar at the top?

Here's the HTML content:

const html = `
<div>
    <div>This is not allowed to edit</div>
    <div class="foo">Not editable <div class="can-edit">Content editable</div></div>
    <div class="bar">Not editable <div class="can-edit">Content editable</div></div>
</div>
`;