title: Add a Bullet Point to <p> when highlighted dynamically?
body: <p><b>Update:</b> Example: <code>&lt;p contenteditable="true"&gt;Text Text &lt;/p&gt;</code><br>
  Is it possible, within the example, to select the second "text" word within the <code>&lt;p&gt;</code> element and click the button to add a bullet point only to the selected "word" dynamically? </p>
  
  <hr>
  
  <p>Is it possible, within a <code>&lt;p contenteditable="true"&gt;Text&lt;/p&gt;</code> to highlight selected text from the <code>&lt;p&gt;</code> element and add a bullet point to the selected text on a button click dynamically?</p>
  
  <p>If an updated fiddle could be provided, it would be very much appreciated, as I am still new to coding.</p>
  
  <p><a href="https://jsfiddle.net/srj26gw1/1/" rel="nofollow">Fiddle</a></p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;
  Apply Bullet Point to Selected Text
  &lt;/button&gt;
  
  &lt;p contenteditable="true"&gt;
  Text
  Text
  &lt;/p&gt;
  
  &lt;br&gt;
  
  &lt;p contenteditable="true"&gt;
  Text
  Text
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>