单击粗体按钮后捕获contenteditable div中的选定内容
，可以通过以下步骤实现：
- 首先，为粗体按钮添加一个点击事件的监听器。
- 在点击事件的处理函数中，获取到包含contenteditable div的元素。
- 使用JavaScript的Selection对象来获取当前选定的内容。
- 如果选定的内容不为空，可以将其存储到一个变量中，或者进行其他需要的操作。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>捕获选定内容示例</title>
<style>
.contenteditable-div {
border: 1px solid #ccc;
padding: 10px;
min-height: 100px;
}
</style>
</head>
<body>
<div class="contenteditable-div" contenteditable="true">
这是一个可编辑的div元素。
</div>
<button id="bold-button">粗体</button>
<script>
document.getElementById('bold-button').addEventListener('click', function() {
var contenteditableDiv = document.querySelector('.contenteditable-div');
var selection = window.getSelection();
var selectedText = selection.toString().trim();
if (selectedText !== '') {
// 在这里可以对选定的内容进行处理，比如存储到变量或执行其他操作
console.log('选定的内容：', selectedText);
}
});
</script>
</body>
</html>在上述示例中，当点击"粗体"按钮时，会捕获contenteditable div中当前选定的内容，并在控制台中打印出来。你可以根据需要修改处理选定内容的逻辑。
相关·内容
我试图在一个可内容编辑的div中获取选定的文本，但到目前为止，我尝试的任何内容都不起作用。:(以下是我到目前为止的代码： html <html> </head> <div class="toolbar">
<span class="tool bold&q
浏览 22提问于2020-09-11得票数 0
回答已采纳
我想用一个内容可编辑的div创建一个小的WYSIWYG文本编辑器。为此，我使用window.getSelection()检索选定的文本，当我单击按钮(按钮粗体)时，我执行一个函数，在所选文本周围添加粗体标记。但是我不知道javascript代码(没有JQuery)可以添加粗体标记。这里我的代码：
<input type="button"
浏览 6提问于2016-01-30得票数 7
回答已采纳
1回答
停止单击文本以取消选定内容
、、、、
对于粗体按钮，我不是有一个按钮，而是尝试使它在屏幕顶部附近有几个跨度，并且每一个都有您可以对文本做的事情，例如bold、italic、underline等等，当您单击一个按钮时，我希望它切换一下，如果contenteditablediv中选定的文本是粗体、斜体或下划线的话。但是，当用户单击spans时，它会取消contenteditable div</em
浏览 2提问于2014-06-02得票数 3
回答已采纳
我和contentEditable和execCommand混在一起，我试着让它在按下按钮的时候，
document
浏览 1提问于2011-03-21得票数 3
回答已采纳
1回答
Firefox中的内容可编辑问题
、、、、
我使用的是一个div，其中的contenteditable属性设置为true，以便完成这个任务(对于这个特定的项目，我不能使用contenteditable )。此可内容div嵌套在另一个不可满足的div中。在使用execCommand应用格式时，我遇到了以下两个问题，包括字体样式和大小，以及粗体、斜体和下划线：
当选择div中的</em
浏览 2提问于2010-06-01得票数 2
1回答
可编辑div元素内的鼠标事件
、、、、
我正在开发一个简单的html文本编辑器，我使用了一个将contenteditable设置为true的div来实现这一点。
我有一些按钮(粗体，斜体，...)它允许用户修改文本。我希望根据每个命令的状态更新这些按钮的状态，因此，如果光标位于粗体文本中，则按钮的图像应显示粗体处于打开状态。我可以通过keyup事件来实现这一点，所以在每次keyup时，
浏览 0提问于2011-11-22得票数 0
回答已采纳
我想要更改选定文本的css属性的内容。我通过window.getSelection()获得选择的内容；使粗体选定的文本和理解所选文本的最佳方法是粗体，然后使其正常。用必需的标记替换不起作用。因为类似的文本可以在内容上。在我看来很复杂。我在找最好的练习。
浏览 2提问于2015-10-13得票数 1
回答已采纳
我使用fontawesome.com添加了一个粗体图标，并使用该图标制作了一个按钮。使用execCommand，我尝试让粗体按钮在单击按钮后编辑文本区域中的选定文本。但是代码不起作用。f7ac85e141.js" crossorigin="anonymous"></script> <body>
&
浏览 4提问于2019-11-15得票数 1
我有以下代码演示可内容编辑属性和一个按钮，将注入粗体文本到段落的内容可编辑区域。我的问题是如何将焦点返回到我在单击粗体后离开的地方，如果您突出显示一些文本，然后单击粗体，它会将这些文本加粗，但焦点将不再存在。如果您不选择任何内容并单击粗体，也会发生同样的情况，焦点将消失，如果您再次单击上次停止
浏览 1提问于2009-08-22得票数 13
3回答
我认为我非常了解JavaScript，但后来我想到了富文本编辑器(如CKeditor )的工作原理，然后意识到我对此一无所知。我假设这些按钮是通过JavaScript连接到文本区域的，但它是如何标记的呢？
web上的富文本编辑器有什么特别之处吗?还是只有很多花哨的js？
浏览 4提问于2011-11-02得票数 4
我正试图用contentEditable div编写一个wysiwyg编辑器，在处理粗体(和斜体)时，我在Firefox中遇到了麻烦。当选中div中的所有文本时，execCommand(‘粗体’)在div中工作，但当我试图获取该内容的HTML时，HTML不会显示任何格式。style="width: 300px; border: 1px solid #000000;&quo
浏览 3提问于2011-08-05得票数 1
回答已采纳
我试着写一个简单的网页文本编辑器。我想做的是让用户在文本区域(或类似文本区域的输入)上键入，然后用鼠标或shift键选择文本，然后单击一个按钮来应用基于颜色的效果。我的问题如下：
谢
浏览 2提问于2015-06-01得票数 0
回答已采纳
我想用react.js中的可内容div从头开始制作一个编辑器div是可编辑的，但是如何添加一个按钮使选定的文本粗体化呢？我尝试了“document.execCommand(‘粗体’，假的，空的)；”，但不能使它工作。, false, null); }}&
浏览 11提问于2020-09-07得票数 0
回答已采纳
REACT JS :我正在尝试为我的项目制作简单的编辑器，它可以使文本变得粗体、斜体和下划线<div className="inputBox" contentEditable>some text here to play with</div> <div className=&
浏览 1提问于2018-11-04得票数 1
如果被选中，我想切换B标签：<p><b>Zeffer !</b></p><button id="bold">Bold</button>
浏览 2提问于2016-04-02得票数 0
1回答
我对网络开发很陌生，我以前从未从事过与网络相关的项目，但在这个学者项目中，我必须从头开始创建一个所见即所得的网络编辑器。到目前为止，我已经学习了HTML、CSS和javascipt，我打算攻击Jquery，并阅读web编辑器(如TinyMce)的源代码，让我开始学习并了解我必须做的事情。问题是TinyMce对我来说太复杂了，我需要一个比它简单得多的网络编辑器。所以，如果你能帮我取一个名字，我会非常感激的：)
浏览 0提问于2016-02-02得票数 2
回答已采纳
我有一个div，即contenteditable属性为true，我还有另一个div，它的作用类似于一个按钮我遇到的</e
浏览 1提问于2019-07-10得票数 1
我很难在我的contentEditable div上执行一个“加粗”的命令。我在这里尝试了很多类似问题的解决方案，但都无济于事。solid;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<divclass=&quo
浏览 4提问于2019-05-27得票数 2
我有一个带有contenteditable=true的div和一个用于更改文本div选定文本onclick的按钮。Div可编辑：样式选项
<div</e
浏览 0提问于2017-09-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
