动态高亮显示时，向<p>添加一个符号点？
动态高亮显示时，向<p>添加一个符号点？
提问于 2018-05-22 01:11:04
最新情况：例如：<p contenteditable="true">Text Text </p>
在示例中，是否可以在<p>元素并单击该按钮，只向选定的“Word”动态添加一个项目点？
是否有可能，在<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>
回答 2
Stack Overflow用户
发布于 2018-05-22 09:26:29
可以使用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>如果要用一个项目替换选定的文本，请执行以下操作：
getText().anchorNode.parentNode.innerHTML = "\u2022" + getText(); 否则，如果要附加/编辑文本，则需要对其进行更多的努力：
更新
最后得到结果：
$(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);
}
}
});
});Stack Overflow用户
发布于 2018-05-22 11:08:41
可以考虑使用以下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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008548
复制相关文章
相似问题