我正在尝试用 JavaScript 制作一个文本编辑器,它具有各种功能,例如加粗文本和斜体以及其他一些功能。当用户点击其中任何一个时,他们选择的任何内容都将被相应地编辑。现在我能够获取选定的文本,甚至可以在文本前后放置强标签,但是当我这样做时,文本不会变粗,只会看到标签。如何使文本加粗?对不起,我无法提供代码,因为它太多太乱了。感谢阅读查询!另外,如果你知道任何可以帮助我解决这个问题的 JavaScript 库,那么你可以向我推荐。
document.getElementById("button").addEventListener("click",
() => {
let text = document.getElementById("text").innerText
let selection = window.getSelection();
let boldText = "<strong>" + selection + "</strong>"
document.getElementById("text").innerText = text.replace(selection, boldText)
})
<div id="text">
The dog barks and runs around.
</div>
<button id="button">Make selected text bold</button>
我使用内部文本而不是内部 html 来重现问题
答案 0 :(得分:2)
您正在使用 innerText
来替换哪个是错误的,因为我们要更改 html,因此请使用 innerHTML
。
代码:
document.getElementById("button").addEventListener("click",
() => {
let text = document.getElementById("text").innerText
let selection = window.getSelection();
let boldText = "<b>" + selection + "</b>"
document.getElementById("text").innerHTML = text.replace(selection, boldText) //use innerhtml instead of innertext
})
<div id="text">
The dog barks and runs around.
</div>
<button id="button">Make selected text bold</button>
答案 1 :(得分:0)
这是我用来在单击按钮时更改为输入文本的一些代码
<input type="text" id="sign" value="">
<p style = "font-family: 'Dancing Script', cursive; font-size:50px;"
id="signOutput"></p>
<button onclick="signFunction()">Output Signature</button>
<script>
function signFunction() {var x = document.getElementById("sign").value;
document.getElementById("signOutput").innerHTML = x;
}
</script>