Add a Bullet Point to <p> when highlighted dynamically?

Question

Update: Example: <p contenteditable="true">Text Text </p>
Is it possible, within the example, to select the second "text" word within the <p> element and click the button to add a bullet point only to the selected "word" dynamically?

---

Is it possible, within a <p contenteditable="true">Text</p> to highlight selected text from the <p> element and add a bullet point to the selected text on a button click dynamically?

If an updated fiddle could be provided, it would be very much appreciated, as I am still new to coding.

Fiddle

HTML:

<button>
Apply Bullet Point to Selected Text
</button>

<p contenteditable="true">
Text
Text
</p>

<br>

<p contenteditable="true">
Text
Text
</p>

Answer 1

You can do it the following way using jQuery:

function getText() {
    if (window.getSelection) {
        return window.getSelection().anchorNode.parentNode;
    } 
    return '';
}

$(document).ready(function () {
    $('#btnClick').click(function () {
        getText().innerHTML = "\u2022" + getText().innerHTML;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnClick">
Apply Bullet Point to Selected Text
</button>

<p id="text1" contenteditable="true">
Text
Text
</p>

<br>

<p id="text2" contenteditable="true">
Text
Text
</p>

Fiddle 1

---

If you want to replace the selected text with a bullet then do the following:

getText().anchorNode.parentNode.innerHTML = "\u2022" + getText();   

Otherwise if you want to append/edit the text, then you want to put more effort into it:

Fiddle 2

Updated:

At the end get the result:

$(document).ready(function () {
    $('#btnClick').click(function () {

    var selected = getText();
    if (selected.toString().length > 0) {
      if ($(selected.anchorNode.parentNode).attr('contenteditable')) {
        var bulletText = document.createTextNode(" \u2022 " + getText() );
        selected.getRangeAt(0).surroundContents(bulletText);
      }
    }
    });
});

Working Fiddle

Answer 2

Yes. It is possible. Using a similar example from this answer, you can consider using the following JS. The logic is to wrap the selected text with <li> element.

$('button').on("click", function(e) {
  var selected = getSelection();
  var range = selected.getRangeAt(0);
  if (selected.toString().length > 0) {
    // Check if parent element has contenteditable attr set to true.
    if ($(selected.anchorNode.parentNode).attr('contenteditable')) {
      var newNode = document.createElement("li");
      range.surroundContents(newNode);
    }
  }
  selected.removeAllRanges();
});

function getSelectedText() {
  var selectedText = '';
  if (window.getSelection) {

    selectedText = window.getSelection();
  } else if (document.getSelection) {
    selectedText = document.getSelection();
  } else if (document.selection) {
    // For IE prior to 9 as it does not support document.getSelection().
    selectedText = document.selection.createRange().text;
  } else return;
  return selectedText;
}

See this fiddle for a working example.

---

Edit

I've also updated the code such that elements without contenteditable set to true won't have the <li> element wrapped.

Updated fiddle and code (see above). This should be what you want.

Answer 3

Here the simple solution will work fine.

$(document).ready(function(){

   var lstEl;
  
  $("p").on('focus', function () {
       lstEl = $(this);
  });
  
  $("button").click(function(){
    if(!lstEl.hasClass("bult")){
      lstEl.addClass('bult')
      }
  })
})

.bult{
     list-style:disc outside none;
     display:list-item; 
  margin-left:10px
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button>
Apply Bullet Point to Selected Text
</button>

<p contenteditable="true">
Text
Text
</p>

<br>

<p contenteditable="true">
Text
Text
</p>

Answer 4

you can use jquery plugin.

$(function(){
        	$('button').on('click', function(){
          $('p').css({'display': 'list-item', 'margin-left':'25px'});
          
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Apply Bullet Point to Selected Text
</button>

<p contenteditable="true">
Text
Text
</p>

<br>

<p contenteditable="true">
Text
Text
</p>