开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

单击粗体按钮后捕获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中当前选定的内容，并在控制台中打印出来。你可以根据需要修改处理选定内容的逻辑。

相关搜索:jQuery单击contenteditable div中的not working on按钮切换div的类以根据所单击的按钮显示/隐藏内容单击div中的嵌套按钮单击按钮/url时提醒DIV内容的Javascript 单击按钮后删除标记-它删除所需的内容单击按钮后反应中的重复组件单击按钮后如何获取Ace (代码编辑器)中的内容？单击按钮后显示或显示内容的代码在单击按钮后，使TextBox中的选定文本保持选中或聚焦状态在按钮单击时添加另一个div中包含内容的div

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

三种插件开发模式，带你玩废tinymce

当键入时在内容中匹配配置的字符串模式时，将触发自动完成器。Emoticons 和 Charmap 使用自动完成程序。...有关创建自动完成器的信息, 可以查阅: UI Components - Autocompleter. addButton() 注册一个新的工具栏按钮，该按钮在通过键盘导航控件单击或激活时执行命令。...呈现一个工具栏按钮，单击该按钮会打开一个浮动工具栏。注意：组工具栏按钮只能在使用浮动工具栏模式时使用。...该图标仅适用于为其配置的编辑器实例 addMenuButton() 注册一个新的菜单按钮。添加单击时打开菜单的工具栏按钮。...此侧边栏容器附加到编辑器的右侧，可以打开或关闭。注册后，将创建一个具有相同侧边栏名称的新工具栏切换按钮。

4.8K3 0

前端富文本基础及实现

文档变成可编辑后，就可以像使用文字处理程序一样编辑文本。效果如图：元素设置 contenteditable 第二种方式是使用 contenteditable 属性指定 HTML 文档中的元素。...如想删除后插入，可获取新的 Selection 对象，利用此时位置所在 dom 元素的方法插入对应的文字、元素。...颜色值字符串（IE 使用这个命令设置文本背景色） bold 切换选中文本的粗体样式 null createLink 将选中内容转换为指向给定 URL的链接 URL 链接值，至少包含一个字符 fontSize...将这些内容汇总即可实现一个简单的前端富文本编辑器。下方附上本文内容汇总的代码 demo ，内含基于 iframe 和 div 元素分别实现的富文本编辑器，功能简单，供读者参考。...方式政采云前端团队 ------------------------------

4.2K5 0

【译】用纯JavaScript写一个简单的MVC App

初始化设置这将是一个完全的JavaScript的应用程序，这就意味着所有的内容将通过JavaScript处理，而HTML在主体中仅包含一个根元素。 <!...在构造器中，我将设置我所需的全部内容。...Controller 最后，控制器是模型（数据）和视图（用户所见）之间的连接。到目前为止，下面就是控制器中的内容。...当你提交新的待办事项，单击删除按钮或单击待办事项的复选框时，将触发一个事件。视图必须监听那些事件，因为它是视图中用户的输入，但是它将把响应该事件将要发生的事情责任派发到控制器。...通过将数据持久保存在浏览器的本地存储中，我们可以使其更加持久，因此刷新后将在本地持久保存。

2K1 0

利用iframe简单实现富文本效果

原理实现可视化编辑，主要有两种方法【或者说是两种方式】 1、designMode 2、contentEditable contentEditable 刚开始在IE上实现，后来各大浏览器陆续支持contentEditable...Bold 切换当前选中区的粗体显示与否。 7. BrowseMode 目前尚未支持。 8. Copy 将当前选中区复制到剪贴板。 9....LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。 52....Outdent 减少选中区所在格式化块的缩进。 55. OverWrite 切换文本状态的插入和覆盖。 56. Paste 用剪贴板内容覆盖当前选中区。 57....Unlink 从当前选中区中删除全部超级链接。 77. Unselect 清除当前选中区的选中状态。

2K0 0

深入理解JavaScript中的事件传播机制：事件冒泡和事件捕获

;});当你单击按钮时，控制台将输出以下内容：Button Clicked!Inner Div Clicked!Outer Div Clicked!...;}, true);当你单击按钮时，控制台将输出以下内容：Outer Div Clicked!Inner Div Clicked!...在事件冒泡中，事件处理程序会按照它们被注册的顺序执行，也就是说，先注册的事件处理程序会先执行。相反，在事件捕获中，事件处理程序会按照它们被注册的相反顺序执行，也就是说，后注册的事件处理程序会先执行。...我们还使用事件捕获方式注册了两个事件处理程序，一个用于内部div，另一个用于外部div。当你单击按钮时，控制台将输出以下内容：Outer Div Clicked!Inner Div Clicked!...这是因为事件从文档的最外层开始向内传播，然后经过外部div、内部div和按钮，直到它到达按钮。结论在JavaScript中，事件冒泡和事件捕获是两种不同的事件传播方式。

9562 1

用纯 JavaScript 撸一个 MVC 框架

mvc3 控制器最后，控制器是模型（数据）和视图（用户看到的内容）之间的链接。这是我们到目前为止控制器中的内容。...当你提交新的待办事项、单击删除按钮或单击待办事项的复选框时，将触发一个事件。视图必须侦听这些事件，因为它们是视图的用户输入，它会将响应事件所要做的工作分配给控制器。我们将为事件创建 handler。...首先，提交一个 handleAddTodo 事件，当我们创建的待办事项输入表单被提交时，可以通过按 Enter 键或单击“提交”按钮来触发。这是一个 submit 事件。...按照处理单击删除按钮的方式处理此方法，并调用模型方法。...现在我们可以将这些添加到视图的事件侦听器中。当你在 contenteditable 元素输入时，input 事件会被触发，离开contenteditable元素时，focusout 会触发。

3.2K4 1

在可编辑div中定位光标和设置光标

DOCTYPE html> 在可编辑div中定位和设置光标...id="edit" contenteditable> ...发送表情 // 发送表情的按钮 var sendEmoji = document.getElementById('sendEmoji...// 获取光标位置 var rangeStartOffset = range.startOffset; // 在光标位置处插入新的表情内容...textNode.insertData(rangeStartOffset, emojiInput.value); // 添加了新内容，将光标移动到新的位置

9.1K2 0

跨站脚本（XSS）备忘录-2019版

事件处理不需要用户交互的事件处理程序激活元素时触发(IE) 页面打印后触发（Chrome、Firefox、IE...draggable="true" contenteditable>drag medrop here 需要鼠标拖动...draggable="true" contenteditable>drag medrop here 需要作为价值的变化...\x09，\x0a，\x0d XSS 带有JavaScript协议的SVG中的Xlink命名空间 "> --> 带有base64的脚本src中的数据协议 <script src=data:text/javascript

6.2K1 0

浅析 JavaScript 中的事件委托

首先实现一个小功能：在单击 HTML 的按钮后，把消息输出到控制台。...按钮列表被迭代为 for (const button of buttons) ，并且每个按钮都被附加了一个新的侦听器。另外在列表中的按钮被添加或删除后，你必须还要手动删除或附加事件监听器。...事件传播当你单击下面 html 中的按钮时： Click...那么事件传播是怎样帮助捕获多个按钮事件的呢？该算法很简单：把事件侦听器附加到按钮的父级，并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。...你不需要把委托事件监听器直接附加到按钮上，而是可以委托父监听。单击按钮时，父元素的侦听器将会捕获冒泡事件（还记得前面所说事件传播吗？）。

2.6K3 0

如何在 Fedora 工作站上截图

屏幕截图工具 (gnome-screenshot) 这个应用程序专门设计用于在桌面系统中快速捕获并保存截图。 ...这些操作模式也有一些额外的选项。延迟截取：允许您指定要等多少秒才进行截图。它用于截取稍后才显示的内容。延迟抓取只能用于“截取整个屏幕”和“截取当前窗口”两种模式。...进行截图在设置了模式和选项后，按下截屏程序窗口右上角的“截屏”按钮。当你按下截图按钮后，该窗口就会隐藏, 所以它不会显示在你的屏幕截图中。...如果使用“截取选定区域”模式，按下“截屏”按钮后，你的鼠标指针将会变成十字光标型指针。只需单击并拖动选择截图区域即可。...按你的需要简单地修改文件名，并单击保存。截图还提供一个旁边的按钮，可以将截图复制到剪贴板。如果你想快速粘贴到另一个应用程序如 GIMP 或 Inkscape 进一步编辑的话，这很方便。

1.4K0 0

网页截长图截屏Google Chrom 插件 FireShot 分享 3000万人使用的网页截图插件

捕获和编辑屏幕截图 FireShot是一款出色的免费工具，可用于在Windows PC上捕获网页。其易于使用的界面让您可以捕获页面的一部分、整个浏览器窗口，甚至是所有打开的选项卡的内容。...要捕获某些内容，您可以单击Web 浏览器中的 FireShot 图标并选择要执行的捕获类型。捕获后，您可以在编辑器窗口中对其进行编辑，该窗口带有大量工具可供选择。...如果您犯了错误，还有撤消和重做按钮。您可以以各种格式存储您的捕获和编辑，包括JPG、PNG、GIF、BMP和PDF。单击保存按钮选择您的保存位置和图像的格式类型。要上传您的图片，请单击上传按钮。...Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。 ...4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去，但是谷歌考虑用户的安全隐私，在用户松开鼠标后还会给予用户一个确认安装的提示。

3.9K2 0

【富文本】268- 富文本原理了解一下？

contenteditable 属性假如我们给一个标签加上 contenteditable="true" 的属性，就像这样：那么在这个...div 中我们就可以对其进行任意编辑了。...这个知识点是很重要的，因为它让我们有了操纵光标的能力（比如插入内容之后设置光标的位置），不过这篇文章中我并没有去深入它，只是浅出?。目标开篇一顿扯，下面让我们抓紧时间做一个属于自己的富文本吧?...操纵光标除了不好对图片进行处理外，光标应该也是一大坑，你可能不知道什么时候就失去焦点了，此时再点击按钮执行命令就无效了；有时你又需要还原或设置光标的位置，比如插入图片后，光标要设置到图片后面等等之类的...所以我们需要具有控制光标的能力，具体操作就是在点击按钮之前我们可以先存储当前光标的状态，执行完命令或者在需要的时候后再还原或设置光标的状态即可。

1.9K4 0

SI持续使用中

由于样式存在于层次结构中，因此每种格式设置属性都与父样式结合在一起以产生最终结果。例如，如果粗体=“ ON”，则添加粗体格式。如果粗体=“ OFF”，则从父样式属性中减去粗体格式。...添加样式单击此按钮添加新的用户定义样式。删除样式单击此按钮删除用户定义的样式。标准内置样式无法删除。加载… 单击此按钮可以从配置文件中加载新的样式表。...保存单击此按钮可将当前样式表设置保存到新的样式配置文件。该文件将仅包含样式属性，并且不包含可以存储在配置文件中的其他元素。如果加载此配置文件，则仅加载样式属性。...重启… 单击此按钮可将所有样式重置为出厂默认设置。自安装Source Insight以来，这将丢失您的所有更改。字体选项字体名称指示当前选择的字体。...包括在结果中... 单击此按钮可以指定搜索结果中包含哪些信息。搜索选项区分大小写指定搜索是否区分大小写。全字对于“查找引用”模式，此选项始终处于启用状态。

3.7K2 0

Windows中的键盘快捷方式大全

+ 单击某个任务栏按钮以管理员身份打开应用 Shift + 右键单击某个任务栏按钮显示该应用的窗口菜单 Shift + 右键单击某个已分组的任务栏按钮显示该组的窗口菜单 Ctrl + 单击某个已分组的任务栏按钮...+ 右键单击某个任务栏按钮显示该应用的窗口菜单 Shift + 右键单击某个已分组的任务栏按钮显示该组的窗口菜单 Ctrl + 单击某个已分组的任务栏按钮循环切换该组的窗口桌面上“远程桌面连接...向上键将选择内容或活动形状向上移动一个像素 Esc 取消选择内容 Delete 删除选择内容 Ctrl + B 将所选文本改为粗体 Ctrl + + 将画笔、直线或形状轮廓的宽度增加一个像素 Ctrl...Ctrl + C 将选择内容复制到剪贴板 Ctrl + V 从剪贴板粘贴选择内容 Ctrl + B 将所选文本改为粗体 Ctrl+I 将所选文本改为斜体 Ctrl + U 为所选文本添加下划线 Ctrl...在计算历史记录中向上导航向下键在计算历史记录中向下导航 Esc 取消编辑计算历史记录 Enter 编辑后重新计算计算历史记录 F3 在“科学型”模式下选择“度” F4 在“科学型”模式下选择“弧度”

5.6K2 0

HTML5全局属性汇总

3、contenteditable 属性 contenteditable 是 HTML5 中新增加的属性，，其用途是让用户能够修改页面上的内容。这个元素将会被隐藏 9、lang 属性 lang 属性用于说明元素内容使用的语言。...tabindex 设置为 - 1 的元素不会在用户按下 Tab 键后被选中。

9930 0

【Web技术】421- 富文本原理介绍

contenteditable 属性假如我们给一个标签加上 contenteditable="true" 的属性，就像这样：那么在这个...div 中我们就可以对其进行任意编辑了。...这个知识点是很重要的，因为它让我们有了操纵光标的能力（比如插入内容之后设置光标的位置），不过这篇文章中我并没有去深入它，只是浅出?。目标开篇一顿扯，下面让我们抓紧时间做一个属于自己的富文本吧?...操纵光标除了不好对图片进行处理外，光标应该也是一大坑，你可能不知道什么时候就失去焦点了，此时再点击按钮执行命令就无效了；有时你又需要还原或设置光标的位置，比如插入图片后，光标要设置到图片后面等等之类的...所以我们需要具有控制光标的能力，具体操作就是在点击按钮之前我们可以先存储当前光标的状态，执行完命令或者在需要的时候后再还原或设置光标的状态即可。

1K2 0

使用 React Hooks 时需要注意过时的闭包!

组件安装后，useEffect()调用 setInterval(log, 2000)计时器函数，该计时器函数计划每2秒调用一次log()函数。在这里，闭包log()捕获到count变量为0。...之后，即使在单击Increase按钮时count增加，计时器函数每2秒调用一次的log()，使用count的值仍然是0。log()成为一个过时的闭包。...快速单击2次按钮。计数器仅更新为1，而不是预期的2。每次单击setTimeout(delay, 1000)将在1秒后执行delay()。delay()此时捕获到的 count 为 0。...这是因为第二次单击的delay()闭包中已捕获了过时的count变量为0。...再次快速单击按钮2次。计数器显示正确的值2。

1.9K3 0

造一个 react-contenteditable 轮子

的回答：当时试了一下确实很好玩，于是每次都可以在妹子面前秀一波操作，在他们惊叹的目光中，我心里开心地笑了——嗯，又让一个不懂技术的人发现到了程序的美，咳咳。...一直以来，我都觉得这个属性只是为了存在而存在的，然而在今天接到的需求之后，我发现这个感觉没什么用的属性竟然完美地解决了我的需求。一个需求需求很简单，在输入框里添加按钮就好了。...这种功能一般用于邮件群发，这里的按钮“姓名”其实就是一个变量，后端应该要自动填充真实用户的姓名，然后再把邮件发给用户的。...那用 div 包裹呢？也不对：div 不能输入啊，唉，谁说不能输入的？contentEditable 属性就是可以让用户手动输入的。...解决方法是在 componentDidUpdate 里把光标重新放到最后就可以了，每次渲染后光标回到最后的位置。

1.7K2 0

wangEditor-基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费(1)

--可使用 min-height 实现编辑区域自动增加高度--> 48 49 请输入内容 50 51 52...71 editor1.customConfig.menus = [ 72 'head', // 标题 73 'bold', // 粗体...// onblur 178 editor2.customConfig.onblur = function (html) { 179 // html 即编辑器中的内容...// onfocus 184 editor2.customConfig.onfocus = function () { 185 // html 即编辑器中的内容...editor2.customConfig.pasteFilterStyle = false; 191 192 // 忽略粘贴内容中的图片 193 editor2.customConfig.pasteIgnoreImg

1.6K6 0

Win10 快捷键大全（史上最全）「建议收藏」

Ctrl + Shift + N 创建一个新文件夹 Num Lock + 星号 (*) 显示选定文件夹下的所有子文件夹 Num Lock + 加号 (+) 显示选定文件夹的内容 Num Lock +...徽标键 + Ctrl + F4 关闭你正在使用的虚拟桌面任务栏键盘快捷方式按此键执行此操作 Shift + 单击某个任务栏按钮打开某个应用，或快速打开应用的另一个实例 Ctrl + Shift...+ 单击某个任务栏按钮以管理员身份打开应用 Shift + 右键单击某个任务栏按钮显示该应用的窗口菜单 Shift + 右键单击某个已分组的任务栏按钮显示该组的窗口菜单 Ctrl + 单击某个已分组的任务栏按钮...应用中的键盘快捷方式在许多应用（如照片、Groove 和地图）中，当你将鼠标指针悬停在某个按钮上时，工具提示中就会显示快捷方式。...+ 2 设置双倍行距 Ctrl + 5 将行距设置为 1.5 Ctrl + A 全选 Ctrl + B 将所选文本改为粗体 Ctrl + C 将选择内容复制到剪贴板 Ctrl + D 插入 Microsoft

15.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭