Contenteditable 일반 텍스트 만 편집

Question

contenteditable = true 셀을 포함하는 테이블이 있습니다. 그 셀에 버튼을 삽입하고 싶지만 그 버튼을 백 스페이스 할 수 있다는 것이 문제입니다. 나는 그것이 전체 셀을 채울 수 있도록하는 방법을 알아낼 질수 있기 때문에

<table><tr> 
<td contenteditable=true>Text Here 
<button>Don't delete me!</button> 
</td> 

나는,이 개 세포 내부 스팬, 편집 하나 하나하지를 만들려하지 않습니다 여기에 내가 뭐하는 거지입니다.

Answer 1

버튼을 다른 <td>으로 분리 할 수 ​​있습니다.

Answer 2

td {border: dashed 1px red}

<table> 
 
    <tr> 
 
    <td contenteditable="true">Text Here 
 
     <td contenteditable="false"><button>Don't delete me!</button></td> 
 
     <td contenteditable="true">After button Text Delete me 
 
    </td> 
 
    </tr> 
 
</table>

은 당신이 그들을 삭제 것에 대해 중첩하지 contenteditable와 요소 내부에 요소를 상관하지 않습니다 않는 한. <td>에 contenteditable 요소를 중첩하거나 을 <td> 외부에두고 <td>에 대해 position:relative 또는 transform:translate을 사용합니다. 이 스 니펫은 세 가지 방법을 보여줍니다. 두 번째 및 세 번째 예제는 깨지기 쉽고 쉽게 손상 될 수 있습니다. 첫 번째 예제는 가장 간단하고 가장 단순합니다.

SNIPPET

.ghost { 
 
    position: relative; 
 
    right: 150%; 
 
    top: 14px; 
 
} 
 
.extended { 
 
    position: relative; 
 
    right: 12%; 
 
    vertical-align: top; 
 
} 
 
.bg { 
 
    position: relative; 
 
    right: 170%; 
 
    z-index: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.up { 
 
    position: relative; 
 
    right: 170%; 
 
    z-index: 1; 
 
} 
 
button { 
 
    display: block; 
 
} 
 
td { 
 
    min-width: 210px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <label contenteditable=true>Example 1</label> 
 
     <button>Don't delete me!</button> 
 
    </td> 
 
    <td class='extended' contenteditable=true> 
 
     Example 2 
 
    </td> 
 
    <td> 
 
     <button class='ghost'>Don't delete me!</button> 
 
    </td> 
 
    <td> 
 
     <div class='bg' contenteditable=true>Example 3</div> 
 
     <button class='up'>Don't delete me!</button> 
 
    </td> 
 
    </tr> 
 
</table>