Добавить точку надписи в <p> если она выделена динамически?

Обновление: Пример: <p contenteditable="true">Text Text </p>
Возможно ли в этом примере выбрать второе "текстовое" слово в элементе <p> и нажать кнопку, чтобы добавить точку маркера только к выбранному "слову" динамически?

Возможно ли, в пределах <p contenteditable="true">Text</p> выделить выделенный текст из элемента <p> и добавить маркер к выбранному тексту нажатием кнопки динамически?

Если бы обновленная скрипка могла быть предоставлена, это было бы очень оценено, поскольку я все еще новичок в кодировании.

Fiddle

HTML:

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

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

<br>

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

Ответы

Ответ 1

Вы можете сделать это следующим образом, используя 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>

Ответ 2

Да. Возможно. Используя аналогичный пример из этого , вы можете использовать следующие JS. Логика состоит в том, чтобы обернуть выделенный текст с помощью элемента <li>.

$('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;
}

См. этот fiddle для рабочего примера.

Edit

Я также обновил код таким образом, что элементы без contenteditable, установленные в true, не будут иметь завершенный элемент <li>.

Обновлен fiddle и код (см. выше). Это должно быть то, что вы хотите.

Ответ 3

вы можете использовать плагин jquery.

$(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>

Ответ 4

Здесь простое решение будет работать нормально.

$(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>