contenteditable 태그가 하위 요소에서 상속되지 않게하려면 어떻게해야합니까?

Question

간단한 <div contenteditable>의 내부에 <span>이 있습니다. <div>의 텍스트를 편집하고 싶지만 <span> 사용자가 편집 할 수 없도록하고 싶습니다.

샘플 :

#editable { 
 
    background-color: #ccc; 
 
    padding: 5px; 
 
    width: 400px; 
 
    text-align: center; 
 
} 
 

 
span { 
 
    background-color: green; 
 
    color: white; 
 
    padding: 2px; 
 
    
 
}

<div id="editable" contenteditable> 
 
    Sample text including a <span>FANCY TAG</span> in the middle. 
 
</div>

원하는 최종 결과는 사용자가 원하는 것을 입력 할 수 있지만 편집 할 수 없습니다 태그 인라인 스타일 한 상자입니다. <input type="text"> 또는 <textarea> 블록 안에 <span> 태그를 넣을 수 없기 때문에 <div contenteditable>을 사용합니다.

<div> 내 모든 텍스트를 <span>을 제외하고 편집하려면 어떻게해야합니까? 편집에서 span tag 따라서이 방지 사용자에게 contenteditable="false" 추가

Answer 1

당신의 span tag.

#editable { 
 
    background-color: #ccc; 
 
    padding: 5px; 
 
    width: 400px; 
 
    text-align: center; 
 
} 
 

 
span { 
 
    background-color: green; 
 
    color: white; 
 
    padding: 2px; 
 
    
 
} 
 

<div id="editable" contenteditable> 
 
    Sample text including a <span contenteditable="false">FANCY TAG</span> in the middle. 
 
</div>