用透明的div /图像覆盖

Question

I want to make the contents of a content-editable div non-editable. Let's say I have a structure like:

<div contenteditable=true></div>

Now with some functionality the the structure will become

    <div contenteditable=true> <p class="x">abc</p> some text <p
 class="x">abc</p><p class="x">abc</p><p class="x">abc</p>  again
 editable continues</div>

I want to make the div partially non-editable (starting form first <p> tag to last <p> tag, so I decided to cover them with a transparent div. This works fine if the <p> tags are in continuation but if there is some text in between them, it is editable (it is not covered by transparent div).

Is there any solution to cover some content of content editable div with transparent div or to make it partially non-editable?

Note: I don't want to wrap all <p> tags with any other element.

Answer 1

您可以执行相反的操作-设置div contenteditable=false并用contenteditable=true将可编辑区域包裹在范围内