如何创建一个按钮来用JS格式化<div>中的文本？
如何创建一个按钮来用JS格式化<div>中的文本？
提问于 2022-05-14 03:59:20
我试图用HTML制作一个基本的文本编辑器。到目前为止，我有一个可编辑的div标记，通过使用键盘快捷键，您可以格式化它。但是，我希望有几个按钮可以用粗体、斜体、下划线和改变文本的颜色。为此，我使用了基本的jQuery和JS。
到目前为止，我的代码(大致)如下：
$('.text-editor').each(function(){
this.contentEditable = true;
});div.text-editor {
width: 200px;
height: 200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-editor"></div>
回答 3
Stack Overflow用户
发布于 2022-05-14 05:17:09
这是一个简单的文本编辑器，有一些简单的按钮和键盘快捷键。希望它能帮到你
<html>
<head>
<title>Make simple text editor</title>
<meta charset="UTF-8" />
</head>
<body>
<div>
<button type="button" onclick="onItalic()">italic</button>
<button type="button" onclick="onBold()">bold</button>
<button type="button" onclick="onUnderline()">underline</button>
</div>
<textarea name="example" id="example_id" cols="30" rows="10"></textarea>
<script>
const textarea = document.getElementById("example_id");
function onItalic() {
textarea.style.fontStyle = "italic";
}
function onBold() {
textarea.style.fontWeight = "bold";
}
function onUnderline() {
textarea.style.textDecoration = "underline";
}
function onKeyboardShotcut(e) {
if (e.ctrlKey && e.key === "i") {
onItalic();
} else if (e.ctrlKey && e.key === "b") {
onBold();
} else if (e.ctrlKey && e.key === "u") {
onUnderline();
}
}
document.addEventListener("keyup", onKeyboardShotcut, false);
</script>
</body>
</html>
Stack Overflow用户
发布于 2022-05-14 05:17:24
您可以在jquery上尝试这种方法。
$('.text-editor').each(function(){
this.contentEditable = true;
});
$('.italic').click(function(){
$('.text-editor').css("font-style", "italic");
$('.text-editor').css("font-weight", "initial");
});
$('.bold').click(function(){
$('.text-editor').css("font-style", "initial");
$('.text-editor').css("font-weight", "bold");
});div.text-editor {
width: 50px;
height: 50px;
}
.text-editor:focus-within {
font-style: initial;
font-weight: initial;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="text-editor">Hello</div>
<button class="italic">Italic</button>
<button class="bold">Bold</button>
</body>
Stack Overflow用户
发布于 2022-05-14 07:51:59
您可以使用toggleClass()函数在类之间切换。可以通过为每个功能添加keyup事件来添加快捷键。在这里，我让alt+i代表意大利语，alt+b代表粗体，alt+u代表下划线。最后但同样重要的是，您可以添加<input type="color">来添加颜色选择器。
document.addEventListener("keyup", function(e){
if (e.altKey && e.key === "i") {
$('.text-editor').toggleClass('italic')
} else if (e.altKey && e.key === "b") {
$('.text-editor').toggleClass('bold')
} else if (e.altKey && e.key === "u") {
$('.text-editor').toggleClass('underline')
}
}, false);
$('.text-editor').each(function(){
this.contentEditable = true;
});
$('#italic-text').click(function(){
$('.text-editor').toggleClass('italic')
});
$('#bold-text').click(function(){
$('.text-editor').toggleClass('bold')
});
$('#underline-text').click(function(){
$('.text-editor').toggleClass('underline')
});
$('#color-picker').change(function() {
$('.text-editor').css('color', $(this).val())
})div.text-editor {
width: 150px;
height: 150px;
}
.bold {
font-weight: bolder;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
#color-picker {
height: 21px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="text-editor">Text Editor</div>
<button id="italic-text">Italic</button>
<button id="bold-text" >Bold</button>
<button id="underline-text" >Underline</button>
<input type="color" id="color-picker" value="#fff">
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72237252
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号