动态突出显示时，将项目符号添加到<p>？

Question

更新：示例： <p contenteditable="true">Text Text </p>
在示例中，是否可以在<p>元素中选择第二个“文本”单词，然后单击按钮以仅动态地向所选“单词”添加项目符号？

---

是否有可能在<p contenteditable="true">Text</p>中突出显示<p>元素中的选定文本，并在动态按钮上单击选定文本的项目符号？

如果可以提供更新的小提琴，我将非常感激，因为我还不熟悉编码。

小提琴

HTML：

 <button> Apply Bullet Point to Selected Text </button> <p contenteditable="true"> Text Text </p> <br> <p contenteditable="true"> Text Text </p> 

Answer 1

您可以使用jQuery以下方式执行此操作：

 function getText() { if (window.getSelection) { return window.getSelection().anchorNode.parentNode; } return ''; } $(document).ready(function () { $('#btnClick').click(function () { getText().innerHTML = "\•" + 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> 

小提琴1

---

如果要用项目符号替换所选文本，请执行以下操作：

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

否则，如果您想要追加/编辑文本，那么您需要投入更多精力：

小提琴2

更新：

最后得到结果：

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

工作小提琴

Answer 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;
}

看一下这个小提琴的工作实例。

---

编辑

我还更新了代码，使得没有contenteditable设置为true元素不会包含<li>元素。

更新了小提琴和代码（见上文）。 这应该是你想要的。

Answer 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> 

Answer 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>