How do I prevent the contenteditable tag from being inherited in child elements?
<p>I have a simple <code>&lt;div contenteditable&gt;</code> with a <code>&lt;span&gt;</code> inside of it. The text inside of the <code>&lt;div&gt;</code> I want to be editable, but the <code>&lt;span&gt;</code> I do not want users to be able to edit. </p>

<p>Sample:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#editable {
  background-color: #ccc;
  padding: 5px;
  width: 400px;
  text-align: center;
}

span {
  background-color: green;
  color: white;
  padding: 2px;
  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="editable" contenteditable&gt;
  Sample text including a &lt;span&gt;FANCY TAG&lt;/span&gt; in the middle.
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The desired end result is a box where users can type in what they'd like, but have styled tags inline that are not editable. Since you cannot put <code>&lt;span&gt;</code> tags inside of <code>&lt;input type="text"&gt;</code> or <code>&lt;textarea&gt;</code> blocks, I'm left with using <code>&lt;div contenteditable&gt;</code>. </p>

<p>How do I make all the text inside the <code>&lt;div&gt;</code> editable <em>except for</em> the <code>&lt;span&gt;</code>? </p>