Contenteditableプレーンテキストのみを編集する

Question

contenteditable = trueのセルを含むテーブルがあります。 私はそれらのセルにボタンを挿入したいと思いますが、そのボタンをバックスペースで離すことができ、それも起こりたくないという問題があります。ここ は、私がやっているものです：

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

私はそれが全体のセルを埋めるようにする方法を見つけ出すカントので、私はセル、編集可能な1つずつではない、内部の2つのスパンを作成する必要はありません。

Answer 1

ボタンを別の<td>に分けることができます。

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>

Answer 2

あなたがそれらが削除されて気にしない場合を除きない巣contenteditableを持つ要素内の任意の要素を実行してください。 <td>内にcontenteditable要素をネストするか、またはを<td>の外側に置き、<td>を超えてposition:relativeまたはtransform:translateを使用します。このスニペットは3つの方法を示しています。 2番目と3番目の例は壊れやすく、簡単に破損する可能性があります。最初の例は最も簡単で最も簡単です。

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>