我有一些令人满意的段落，我希望能够在双击时使某些单词加粗下划线。当我双击某个单词时，会选中该单词并显示带有3个选项的工具提示。但是，单击工具提示选项后，选择将消失，并且不会对文本进行任何更改。
问题是： 1）如何加粗所选文本？
（问题2并不重要或必要。） 2）如何选择受影响的文本？
javascript中的javascript优先使用解决方案。
以下是代码：
var allpara = document.querySelectorAll('p');
[].forEach.call(allpara, function(para) {
para.addEventListener('click', showTooltip, false);
});
var tooltip = document.getElementById('tooltip');
function showTooltip(e) {
tooltip.style.display = 'block';
}
var tooltipOptions = document.querySelectorAll('.tooltip-option');
[].forEach.call(tooltipOptions, function(options) {
options.addEventListener('click', function(e) {
console.log(e.target.id);
document.execCommand('bold');
}, false);
});body {
position: relative;
}
#tooltip {
display: none;
position: fixed;
background: black;
color: white;
width: 120px;
font-size: 2em;
border-radius: 4px;
top: 10px;
right: 150px;
}
.tooltip-option {
width: 35px;
margin-left: 10px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="notepad">
<p class="notepad-paragraph" contenteditable="true">This is my text-ed</p>
<p class="notepad-paragraph" contenteditable="true">itor. This is what I have</p>
<p class="notepad-paragraph" contenteditable="true">built till no</p>
<p class="notepad-paragraph" contenteditable="true">w. Now I am building it fur</p>
<p class="notepad-paragraph" contenteditable="true">ther. This is fun.</p>
</div>
<div id="tooltip">
<span id="tooltip-bold" class="tooltip-option">B</span>
<span id="tooltip-und" class="tooltip-option">U</span>
<span id="tooltip-red" class="tooltip-option">R</span>
</div>
</body>
答案 0 :(得分：1)
如果您更改了工具提示中的<span>＆＃39;到<button>你的解决方案已经有效了！
只要您的编辑器样式按钮是输入类型元素，所选文本就会保持选中状态。
无论如何都改变了你的代码片段 - id现在已经包含了execCmd所需的命令 - 所以underline和italic也可以。
在js部分中，您只需将execCMD行更改为：document.execCommand(this.id);
var allpara = document.querySelectorAll('p');
[].forEach.call(allpara, function(para) {
para.addEventListener('click', showTooltip, false);
});
var tooltip = document.getElementById('tooltip');
function showTooltip(e) {
tooltip.style.display = 'block';
}
var tooltipOptions = document.querySelectorAll('.tooltip-option');
[].forEach.call(tooltipOptions, function(options) {
options.addEventListener('click', function(e) {
console.log(e.target.id);
document.execCommand(this.id);
}, false);
});body {
position: relative;
}
#tooltip {
display: none;
position: fixed;
background: black;
color: white;
width: 120px;
font-size: 2em;
border-radius: 4px;
top: 10px;
right: 150px;
}
.tooltip-option {
margin-left: 10px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="notepad">
<p class="notepad-paragraph" contenteditable="true">This is my text-ed</p>
<p class="notepad-paragraph" contenteditable="true">itor. This is what I have</p>
<p class="notepad-paragraph" contenteditable="true">built till no</p>
<p class="notepad-paragraph" contenteditable="true">w. Now I am building it fur</p>
<p class="notepad-paragraph" contenteditable="true">ther. This is fun.</p>
</div>
<div id="tooltip">
<button id="bold" class="tooltip-option">bold</button>
<button id="underline" class="tooltip-option">underline</button>
<button id="italic" class="tooltip-option">italic</button>
<button id="undo" class="tooltip-option">undo</button>
</div>
</body>
答案 1 :(得分：0)
有趣的问题。我们必须将所选文本转换为span元素，否则我们无法设置我们选择的文本的样式。
Sooo几个小时后，我得到了这个有缺陷的代码XD
目前，大胆的功能是硬编码....
跨多行选择不起作用。
两个方向的选择都有效，但不能跨多行。
document.addEventListener('DOMContentLoaded', function() {
//Function for setting togglable buttons
var buttons = document.getElementById("tools");
var bold = false;
var underline = false;
buttons.addEventListener('click', function(e) {
elem = e.target;
if (elem.dataset.active == "active") {
elem.dataset.active = "";
switchTool(elem, false);
} else {
elem.setAttribute("data-active", "active");
switchTool(elem, true);
}
});
//Function for chaning what tool we are using.
function switchTool(element, bool) {
if (element.id == "bold") {
bold = bool;
} else if (element.id == "underline") {
underline = bool;
}
console.log(element.id + " " + bool.toString());
}
function replace(s, start, end, replace) {
return s.substr(0, start) + replace + s.substr(end, s.length);
}
function selectText(e) {
var elem = e.target;
if (window.getSelection) {
var selObject = window.getSelection();
var anchorOffset = selObject.anchorOffset;
var focusOffset = selObject.focusOffset;
var elemHtml = elem.innerHTML;
var selectText = '<span class="bold">' + selObject.toString() + "</span>";
if (anchorOffset > focusOffset) {
elem.innerHTML = replace(elemHtml, focusOffset, anchorOffset, selectText);
} else {
elem.innerHTML = replace(elemHtml, anchorOffset, focusOffset, selectText);
}
}
}
document.getElementById("Select-Text").addEventListener("mouseup", selectText);
});.butt {
border: 2px solid black;
background-color: white;
font-size: 20px;
border-radius: 5px;
box-shadow: 2px 2px 1px 0px gray;
margin-left: 5px;
cursor: pointer;
}
.bold {
font-weight: bold;
font-size: 1.2em;
}
.underline {
text-decoration: underline;
}
.butt[data-active="active"] {
box-shadow: inset 1px 1px 1px black;
}<pre id="Select-Text">This is a lot of text
Lorem ipsum dolar si amet Lorem ipsum dolar si
amet Lorem ipsum dolar si amet Lorem ipsum dolar
si amet Lorem ipsum dolar si amet Lorem ipsum
dolar si amet Lorem ipsum dolar si
amet Lorem ipsum dolar si amet
Lorem ipsum dolar si
amet Lorem ipsum
dolar si amet</pre>
<h3>Togglable tools:</h3>
<div id="tools">
<button class="butt" id="bold">Bold</button>
<!--button class="butt" id="underline">Underline</button-->
</div>