Question

更新：示例：Text Text 
在示例中，是否可以选择第二个＆＃34;文本＆＃34; 元素中的单词，然后单击按钮将项目符号点仅添加到选定的＆＃34;单词＆＃34;动态？

是否可以在Text内突出显示元素中的选定文字，并在动态按钮上为所选文字添加项目符号？

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

Fiddle

HTML：

＆＃13;

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

＆＃13;

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

<强> Fiddle 1

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

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

否则，如果您想要附加/编辑文本，那么您需要付出更多努力：

Fiddle 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);
      }
    }
    });
});

<强> Working Fiddle

Answer 2

是。有可能的。使用此answer中的类似示例，您可以考虑使用以下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。

修改

我还更新了代码，以便contenteditable设置为true的元素不会包含<li>元素。

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

Answer 3

你可以使用jquery插件。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

这里简单的解决方案可以正常使用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: