首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为一个div设置execcommand

为一个 div 设置 execCommand,可以使用 JavaScript 来实现。execCommand 是一个已经被废弃的 API,不建议在现代浏览器中使用。但是,如果您仍然需要使用它,可以使用以下代码:

代码语言:javascript
复制
// 获取 div 元素
var divElement = document.getElementById("yourDivId");

// 使用 execCommand 设置 div 的样式
divElement.contentEditable = true;
document.execCommand("bold", false, null);

请注意,这个代码可能在现代浏览器中无法正常工作。如果您需要更现代的方法来实现这个功能,建议使用 JavaScript 的 Range 和 Selection API,或者使用第三方库,如 Quill 或 CKEditor。

以下是一个使用 Range 和 Selection API 的示例:

代码语言:javascript
复制
// 获取 div 元素
var divElement = document.getElementById("yourDivId");

// 为 div 添加点击事件
divElement.addEventListener("click", function(event) {
  // 阻止默认行为
  event.preventDefault();

  // 创建 Range 对象
  var range = document.createRange();
  var selection = window.getSelection();

  // 选中 div 内容
  range.selectNodeContents(divElement);
  selection.removeAllRanges();
  selection.addRange(range);

  // 执行加粗命令
  document.execCommand("bold", false, null);
});

请注意,这个示例仅适用于单击事件。如果您需要在其他情况下执行加粗命令,可以根据需要修改代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 可编辑DIV设置光标位置

    平时我们使用文本框input, textarea时,我们有时候需要得到光标的位置或者说设置光标的位置. 但是文本框有个不足,就是不能满足我们插入图片或者其他的一些要求....所以有时候我们使用div来代替文本框. 今天为了搞定设置DI的光标位置.头疼啊,终于可以了,记录一下,网上资料不多. 首先要让DIV启用编辑模式.... 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。...下面说怎么获取或设置光标位置. 2个步骤 1:获取DIV中的光标位置 2:改变光标位置 var cursor = 0; // 光标位置 document.onselectionchange = function...character', lyTXT1.innerText.length - cursor); r.collapse(true); r.select(); } 通过上面的我们就可以将DIV

    6.6K40

    div设置height:100%;无效的原因

    有时我们会困惑为什么设置div的height:100%;没有效果,如下所示: ?...要解决这个问题,先的知道设置height:100%的原理,当你让一个元素的高度设置百分比高度时,是相对于父元素的高度根据百分比来计算高度。...所以当父元素没有高度时,height:100%也就没有高度值,所以我们来设置body高度。 ? 可见还是没有效果,原因跟上一个一样,其父元素也没有高度,所以我们来设置html的高度。 ?...class="wqh"> 进阶 html 的父元素可以理解成window,浏览器会将html填充完一个浏览器窗口。...但是子html的子元素的高度设置成百分比时,会按照html设置的高度值计算比例。(如下所示,html高度1000px;所以body的高度500px)。 ?

    12.1K20

    网站建设设置两个div div常见的布局方式

    div也就是division,是一种常用的HTML 网页当中的重要元素。主要作用是分割网页当中的文档。那么网站建设设置两个div 如何操作呢?...网站建设设置两个div 网站建设设置两个div 的方式和步骤可以参照以下内容。首先插入两个div 的标签,插入之后,创建一个长宽都是200px的标签,给它命名。...这时候看到了两个标签的位置是上下的,下一步就双击CSS 样式的其中一个标签,在CSS 的分类选项里面,将Float设置成为left,也就是向左边移动。这样就可以完成div 并排了。...这都是比较常见的div 布局。div 元素是一种不带特性的容器,它也是一个非常简洁的盒子,可以来布局HTML 网页。...以上就是网站建设设置两个div的相关内容,每一种div 布局方式的展现效果都是不同的,根据不同的网络效果来选择布局方式就可以。

    1.6K20

    html中div滚动条设置,DIV滚动条属性及样式设置方式「建议收藏」

    这里向大家描述一下DIV滚动条属性及样式设置,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场...DIV滚动条属性及样式设置 所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。...当div所定义的区域的内容达到一定程度时,在div标签里面嵌入css样式表,定义overflow的属性值,设置DIV滚动条相关的属性。...滚动条,根据内容自动扩撑区域的大小,即定义的区域无效 scroll总是显示滚动条 hidden没有滚动条,超出区域的内容不可见 auto根据内容自动判断是否添加滚动条 2.DIV滚动条颜色属性: face-color...滚动条的主要颜色,其中包含滚动按钮和滚动滑块 3.overFlow-xoverFlow-y visible却省值,没有DIV滚动条,根据内容自动扩撑区域的大小,即定义的区域无效 scroll总是显示滚动条

    7K20

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

    如果想要插入的子节点不可编辑,我们只需要把子节点的属性设置 contenteditable="false" 即可,就像这样: 这是可编辑的..., aValueArgument) 其中第一个参数就是一些命令名称,具体的可以查看 MDN;第二个参数写死 false 就行了,因为早前 IE 有这样一个参数,为了兼容吧,不过这个参数在现代浏览器中是没有影响的...这个知识点是很重要的,因为它让我们有了操纵光标的能力(比如插入内容之后设置光标的位置),不过这篇文章中我并没有去深入它,只是浅出?。 目标 开篇一顿扯,下面让我们抓紧时间做一个属于自己的富文本吧?...起步 首先一个富文本大体分为两个区域,一个是按钮区,一个是编辑区。所以它的大致结构就像下面这样: <!...在点击的图片上创建个大小一样的 div 如果点击的是一个图片,那我们就创建一个 div ,暂且把这个 div 叫做蒙层吧,顺便先看张示意图: 也就是动态创建一个蒙层(和图片一样大小)以及四个拖拽顶点,并定位到和图片一样的位置

    2K40

    前端富文本基础及实现

    在空白的 HTML 文档中嵌入一个 iframe,并将 designMode 属性设置 on,文档就会变成可编辑的,实际编辑的则是 iframe 内的 body 元素。...使用方式是在一个元素上添加 contenteditable 属性并设置 true,然后该元素会立即被用户编辑。...颜色值字符串(IE 使用这个命令设置文本背景色) bold 切换选中文本的粗体样式 null createLink 将选中内容转换为指向给定 URL的链接 URL 链接值,至少包含一个字符 fontSize...网络请求的富文本数据设置富文本容器的 innerHTML,即可展示富文本内容。...将这些内容汇总即可实现一个简单的前端富文本编辑器。 下方附上本文内容汇总的代码 demo ,内含基于 iframe 和 div 元素分别实现的富文本编辑器,功能简单,供读者参考。

    4.5K50
    领券