Contenteditable Editing Only Plain Text - html

Question

I have a table that contains contenteditable=true cells.
I wish to insert a button into those cells but the problem is that I can backspace those buttons away and I don't want that too happen.
Here is what I am doing:
<table><tr>
<td contenteditable=true>Text Here
<button>Don't delete me!</button>
</td>
I don't want to create two spans inside the cell, one editable and one not, because I cant figure out how to make it fill the entire cell.

Answer 1

You can separate the button into another <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

Don't nest any elements inside an element with contenteditable unless you don't care about them being deleted. Nest a contenteditable element within the <td> or put the <button> outside of <td> and use position:relative or transform:translate over the <td>. This Snippet demonstrates three ways.
The second and third examples are fragile and can break easily, the first example is the best and most simplest.
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>