文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
    时间不限
    最近一周
    最近一月
    最近三月
  • 来自专栏快乐阿超

    contenteditable

    只要给html标签添加一个属性叫contenteditable，即可点击进行编辑： <div contenteditable>ruben

    23120编辑于 2022-08-21
  • 来自专栏IT杂症

    Html5中contenteditable

    H5中新增的一个属性： 让标签可以编辑的属性 contenteditable="true" 即使是一个div也可以编辑文字；

    <

    45950编辑于 2023-10-18
  • 来自专栏前端开发随笔

    Html新特性contenteditable自定义富文本

    <div id="editer" contenteditable @input="getEditer($event)">

    <!

    1.2K20发布于 2020-09-02
  • 来自专栏海怪的编程小屋

    造一个 react-contenteditable 轮子

    contentEditable 属性就是可以让用户手动输入的。 下面就带大家手写一个 react-contenteditable 的轮子吧。 style={{ height: 300 }} value={value} onChange={onChange} />

    ); } 重新再认识一下 contentEditable : (e: ContentEditableEvent) => void // 值改动的回调 } class ContentEditable extends Component<Props> { lastHtml class ContentEditable extends Component<Props> { private lastHtml: string = this.props.value || '' class ContentEditable extends Component<Props> { ...

    2.1K20编辑于 2022-03-29
  • 来自专栏前端迷

    contenteditable跟style标签可真是天生一对

    contenteditable是html的一个全局属性，可以大致理解为"可以使一个元素处于可编辑状态"，像极了textarea，不过还是存在许多不足跟问题，比如没有change钩子等，本文不作深入探讨❌ 01 开胃 使一个div可以进行内容编辑： <div contenteditable>点击我进行编辑

    ? 因此有如下代码： <head> <style contenteditable> html { background-color: #f1f1f1; } </style ，想要在页面上编辑style元素，必须要满足以下两点： style元素必须放在body元素内 style元素要设置display: block; 于是代码变成了这样： <body> <style contenteditable

    1.9K21发布于 2019-08-15
  • 来自专栏码艺坊

    HTML 标签中的 `contenteditable` 属性详解：从原理到实战

    一、contenteditable 属性是什么？contenteditable 是 HTML 的一个全局属性（Global Attribute），意味着它几乎可以应用在任何 HTML 标签上。 基本语法<div contenteditable="true">这是一个可编辑的 div

    <p contenteditable="false">这是一个不可编辑的段落

    <span contenteditable inherit：继承父元素的 contenteditable 值。如果省略值，只写 contenteditable，默认等价于 true。 简单示例<h2 contenteditable="true">点击这里编辑标题<p contenteditable="true">这是一个可编辑的段落。 在表格中使用 <td contenteditable="true">单元格1 <td contenteditable="true">

    1.2K21编辑于 2025-09-10
  • 来自专栏全栈程序员必看

    h5作品介绍_editable联动

    <div contenteditable="true">我是一个div

    那么会出现一个神奇的效果。(文字可以编辑) 语法也很简单。 contenteditable=”true” （可以编辑） contenteditable=”false” （不可以编辑） 如果是嵌套关系的呢？ <div contenteditable="true"> 我是一个div1
    我是div2,没有contenteditable属性
    你会发现，即使是嵌套关系 ，里面的标签也没有contenteditable 属性，也是可以编辑的，这又是为啥呢？ <div contenteditable="true"> <span contenteditable="false">姓名：小明
    <span contenteditable

    41420编辑于 2022-09-16
  • 来自专栏亦枫的大佬之路

    可输入文字的div标签

    代码： <div class='input' contenteditable placeholder='请输入文字'>

    /**css样式*/ .input{ 解释 contentEditable 属性用于设置或返回元素的内容是否可编辑。 当我们在标签里面加入了contentEditable属性，这个标签就会变为可编辑状态。 扩展 切换 元素的编辑状态： var x = document.getElementById("myP"); if (x.contentEditable == "true") { x.contentEditable ; } else { x.contentEditable = "true"; button.innerHTML = "p 元素内容不可编辑!"; }

    3.1K10发布于 2020-03-19
  • 来自专栏前端桃园

    用最简洁的 CSS 实现 10 种现代布局

    <div class="box coral" contenteditable> :)
    .ex1 .parent
    <div class="section yellow" contenteditable> Min: 150px / Max: 25% < /div> <div class="section purple" contenteditable> This element takes the second grid position
    <header class="blue section" contenteditable>Header <main class ="coral section" contenteditable>Main</main> <footer class="purple section" contenteditable>Footer

    1.4K52发布于 2020-07-16
  • 来自专栏前端皮小蛋

    实现一个简单的编辑器

    接管所有事件，有自己的排版引擎 Google Docs 光标 kix-cursor-caret 输入 docs-texteventtarget-iframe contenteditable 金山文档 光标 什么是 contenteditable HTML中的 contenteditable 的属性可以打开某些元素的可编辑状态．也许你没用过 contenteditable 属性．甚至从未听说过． contenteditable 我们最常用的输入文本内容便是 inpu t与t extarea ，使用 contenteditable 属性后，可以在 div , table , p , span , body ,等等很多元素中输入内容 即通过 contenteditable 可以让普通的元素实现可编辑状态。 2. 什么是 Selection Selection 对象表示用户选择的文本范围或插入符号的当前位置。 三、总结 对于绝大多数的编辑需求，依赖于 contenteditable 去实现已经可以很好的满足。

    1.3K20发布于 2021-02-07
  • 来自专栏安全泰式柑汁

    XSS Cheat Sheet

    <x contenteditable onfocus=alert(1)>focus this! <x contenteditable oninput=alert(1)>input here! <x contenteditable onpaste=alert(1)>paste here! <brute contenteditable onblur=alert(1)>lose focus! <brute contenteditable onfocus=alert(1)>focus this! <brute contenteditable oninput=alert(1)>input here! <brute contenteditable onpaste=alert(1)>paste here!

    2.5K20发布于 2020-08-07
  • 来自专栏Czy‘s Blog

    深感一无所长，准备试着从零开始写个富文本编辑器

    需要注意的是我们在这里指的是ContentEditable实现的编辑器，如果是自绘选区的编辑器则不一定需要这部分设计。 <div contenteditable style="outline: none">

    <span contenteditable ContentEditable ContentEditable是HTML5中的一个属性，可以让元素变得可编辑，再配合上内置的execCommand就是我们上边聊的最基本DEMO。 在React节点中加入ContentEditable后，会出现类似下面的warning: <div contentEditable suppressContentEditableWarning <div contenteditable="false"> <div contenteditable="true">123
    <div contenteditable="true">456

    80010编辑于 2025-05-22
  • 来自专栏云前端

    富文本编辑器开发简介

    window.onload= function(){ frames['demoDesignMode'].document.designMode = 'on'; } </script> contenteditable contenteditable='true'设置元素和它包含的元素可以编辑。 * 区分contenteditable和contentEditable。contenteditable是元素的特性，而contentEditable是对象的属性。 ">打开富文本编辑</button> <button id="btn2">关闭富文本编辑</button> <script> btn1.onclick = function(){box.contentEditable = true;} btn2.onclick = function(){box.contentEditable = false;} </script> 命令 document.execCommand

    5.4K20发布于 2020-06-15
  • 来自专栏HTML5学堂

    2016.07 第3周 群问题分享

    HTML+CSS 怎么实现输入框高度自适应 2016.07.18~2016.07.22 核心内容 contenteditable 问题解析 因为textarea不支持自适应高度，就是定好高度或者是行数之后 contenteditable 属性规定是否可编辑元素的内容。 可能我们还是第一次见到这个属性contenteditable，如一个普通的元素上加上contenteditable="true"就实现可编辑状态，就出现光标了。 如 <div contenteditable="true">

    效果： ? contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。 HTML代码 <div class="wrap" contenteditable="true">
    CSS代码 .wrap { width: 400px; min-height

    1.1K80发布于 2018-03-13
  • 来自专栏不为人知的前端技巧

    user-modify跟style标签可真是天生一对?

    [5531211-b71cbd48561dd566.jpg] 前来挖墙脚的是html中的contenteditable，他是一个全局属性，可以大致理解为"可以使一个元素处于可编辑状态"，像极了textarea ，不过还是存在许多不足跟问题，比如没有change钩子等，本文不作深入探讨❌ 开胃 使一个div可以进行内容编辑： <div contenteditable>点击我进行编辑

    [strip] 因此有如下代码： <head> <style contenteditable> html { background-color: #f1f1f1; } </style ，想要在页面上编辑style元素，必须要满足以下两点： style元素必须放在body元素内 style元素要设置display: block; 于是代码变成了这样： <body> <style contenteditable

    71240发布于 2019-08-12
  • 来自专栏安全泰式柑汁

    长亭WAF XSS防护绕过小记

    <x contenteditable onfocus=alert(1)>focus this! <x contenteditable oninput=alert(1)>input here! <x contenteditable onpaste=alert(1)>paste here! <brute contenteditable onblur=alert(1)>lose focus! <brute contenteditable onfocus=alert(1)>focus this! <brute contenteditable oninput=alert(1)>input here! <brute contenteditable onpaste=alert(1)>paste here!

    7K50发布于 2020-10-27
  • 来自专栏鱼的爱情看不出泪水

    JS 修改网页大法 - 一段代码，编辑整个网页~

    javascript:document.body.contentEditable='true'; document.designMode='on';! msn1dai 疏影试过了，很有效 或： javascript: document.body.contentEditable = 'true';document.designMode = 'on'

    7K20编辑于 2023-03-03
  • 来自专栏前端历劫之路

    前端开发中这些小技巧，你知道几个？

    在非IE浏览器可以运行 浏览器变成文本编辑器 地址栏输入： data:text/html, <html contenteditable> 控制台输入： document.body.contentEditable title> <style type="text/css"> style{ display: block; } </style> </head> <body> <style contentEditable

    48610发布于 2021-12-01
  • 来自专栏苏生不惑

    那些你可能不知道的浏览器奇技淫巧

    浏览器秒变编辑器 浏览器地址栏中输入 data:text/html, <html contenteditable>回车直接变编辑器，这里可以直接输入字符进行编辑了。 ? 编辑网页 打开网站，地址栏输入javascript:void(document.body.contentEditable='true');当然也可以直接在控制台输入 document.body.contentEditable

    1.2K10发布于 2020-07-21
  • 来自专栏call_me_R

    7 个少见但有用的 HTML 属性

    Contenteditable contenteditable 是一个全局的属性（对于所有的 HTML 元素都适用），它可以使得 HTML 的可被用户编辑。 <div contenteditable="true">I'm a cool editable div ;)

    当然，如果你想使得整个文档的内容都可以编辑，你可以直接使用 document.designMode -- 检查 --> <p contenteditable="true" spellcheck="true"> Thanks furr checkinng my speling :)

    5.

    65740编辑于 2022-04-15
    • 第 2 页第 3 页第 4 页第 5 页第 6 页第 7 页第 8 页第 9 页第 10 页第 11 页
    点击加载更多

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

    领券