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>

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>

• javascript
• jquery
• html
• css

• jsfiddle.net/srj26gw1/2 – cpr43 Commented Dec 17, 2015 at 6:06
• However, this code adds the bullet point to all <p> elements and not the selected text. – Dave Commented Dec 17, 2015 at 6:07
• Understood your Text is separated by newlines. If the second Text is selected, do you want to apply a bullet point to the entire text (e.g. • Text\nText) or Text\n• Text? – Jia Jian Goi Commented Dec 17, 2015 at 6:08
• For example: <p contenteditable="true">Text Text </p> Is it possible to select the second "text" and click the button to add a bullet point only to the selected text dynamically? – Dave Commented Dec 17, 2015 at 6:14

4 Answers 4

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

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.

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>

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>