精华内容
下载资源
问答
  • 这样便可以简单实现一个可编辑的div,需要作为整体补课编辑的子元素contentEditable设置为false便可以实现回车之后一整个删除,但是此时控制地台会报一个警告,如下图 需要加上suppressContentEditabl

    当需求需要在文本输入中加入一些样式,并按删除键遇到某些样式的为多个文字整体删除,使用textArea是无法实现的,textArea中没有办法写单独样式,或者加入其他标签和组件。这时候就需要使用到contentEditable属性,将div或者一些其他标签可编辑。

    这样便可以简单实现一个可编辑的div,需要作为整体补课编辑的子元素contentEditable设置为false便可以实现回车之后一整个删除,但是此时控制地台会报一个警告,如下图

    需要加上suppressContentEditableWarning属性

     

    写个简单Demo

    当点击添加按钮的时候,输入框汇总的内容添加进输入框中,并带样式(这里的样式就用antd的Tag标签)

     

    content用来显示用,是个数组

    <div
       style={{ minHeight: '200px', width: '600px', border: '1px solid #c8c8c8', borderRadius: '3px' }}
       contentEditable={true}
       suppressContentEditableWarning
    >
       {this.state.content}
    </div>

    点击按钮的时候获取Input中的内容并将其push进数组中

    testClick = () => {
        const { ipt, content } = this.state
        this.setState((pre) => {
            return pre.content.push(<Tag closable contentEditable={false} key={content.length}>{ipt}</Tag>)
        })
    }
    
    iptChange = (e) => {
        this.setState({
            ipt: e.target.value 
        })
    }

    实现效果

    完整代码

    import React, { Component } from 'react'
    import { Tag, Button, Input } from 'antd'
    
    class Index extends Component {
        constructor(props) {
            super(props);
            this.state = {
                content: [],
                ipt: ''
            };
        }
    
        testClick = () => {
            const { ipt, content } = this.state
            this.setState((pre) => {
                return pre.content.push(<Tag closable contentEditable={false} key={content.length}>{ipt}</Tag>)
            })
        }
        iptChange = (e) => {
            this.setState({
                ipt: e.target.value
            })
        }
    
        render() {
            return (
                <div style={{ padding: 50 }}>
                    <div
                        style={{ minHeight: '200px', width: '600px', border: '1px solid #c8c8c8', borderRadius: '3px' }}
                        contentEditable={true}
                        suppressContentEditableWarning
                    >
                        {this.state.content}
                    </div>
    
                    <div>
                        <Button onClick={this.testClick}>添加</Button>
                        <Input onChange={this.iptChange} />
                    </div>
                </div>
            );
        }
    }

     

    展开全文
  • <div><p>1、进入平台管理-应用管理-应用分类,新建一个应用分类; 2、该分类无法编辑和删除,...均可编辑删除;</p><p>该提问来源于开源项目:kubesphere/kubesphere</p></div>
  • 5)修正上传文件、上传模板及上传媒体文件功能中文件无法删除的BUG! 6)调整了控件弹出窗口方式,部分功能模式窗口转换为Div+CSS窗口! 7)调整pathtype属性默认值为AbsoluteFull(绝对全路径)! 8)增加对VS2008...
  • 站点设置页面无法完成任何操作(新增,编辑删除等),一键导入点击后正常导入(需要刷新页面才能看到新导入站点) </li><li> 相关截图: </li></ul> <p>...
  • }#4开启/关闭属性{您不必删除元素完整CSS属性,只需将其关闭即可。 因此,您可以在属性为OFF或ON时检查元素样式}#5复制属性{您可以提供相同属性多个实例。 喜欢,提供“颜色:红色;颜色:绿色;颜色:蓝色;...
  • 4) 修正IE浏览器下禁用编辑源码的时候仍然可以编辑的BUG。 5) 修正非IE浏览器下无法禁用编辑源码的BUG。 6) 修正Opera浏览器下转换预览状态后出现内容显示不正确的BUG。 <br>2007/7/29 Version ...
  • excel使用

    2012-11-25 17:06:01
    (7) 在单元格中显示公式如果工作表中数据多数是由公式生成,想要快速知道每个单元格中公式形式,以便编辑修改,可以这样做:用鼠标左键单击“工具”菜单,选取“选项”命令,出现“选项”对话框,单击“视图...
  • ●前台作者详细信息页作者作品无法按日期查询,也无法显示所有作者作品列表。 ●子域名下页面在IE6下用AJAX访问标签时出现JS错误。 ●添加文章勾选“是否显示评论链接”,前台列表显示时不能在标题旁显示...
  • 销售商无法保证符合您提交订单中所有要求商品都有货;如您订购商品无货,您有权取消订单、解除合同,销售商亦有权取消订单、解除合同,若您已经付款,则为您办理退款。订单取消...
  • <div>前言 <p><a href="https://github.com/rackt/redux">redux</a> 是 facebook 提出 flux 架构一种优秀实现;而且不局限于为 react 提供数据状态处理。它是零依赖,可以配合其他任何框架或者...
  • NetCMS源码

    2013-04-17 10:09:34
    系统集成类同Macromedia Dreamweaver一样简单的可视模板编辑方式,批量设置属性,模板标签全面支持目前最受欢迎的DIV+CSS格式,支持批量绑定模板,完全做到轻松换肤。 自定义频道 用户根据自己的需要自定义数据...
  • NetCMSV170src

    2009-01-01 12:23:35
    系统集成类同Macromedia Dreamweaver一样简单的可视模板编辑方式,批量设置属性,模板标签全面支持目前最受欢迎的DIV+CSS格式,支持批量绑定模板,完全做到轻松换肤。 自定义频道 用户根据自己的需要自定义数据...
  • 5)修正上传文件、上传模板及上传媒体文件功能中文件无法删除的BUG! 6)调整了控件弹出窗口方式,部分功能模式窗口转换为Div+CSS窗口! 7)调整pathtype属性默认值为AbsoluteFull(绝对全路径)! 8)增加对VS2008...
  • 系统搭载Smarty模板引擎,支持自定义伪静态,前台模板采用DIV+CSS设计,后台界面设计简洁明了,功能简单易具有良好用户体验,稳定性好、扩展性及安全性强,面向中小型站点提供网站建设解决方案。 轻量级企业...
  • 系统内置的编辑器,使得添加影片介绍更加得心应手为广大电影站长助力。 后台采用用户名 用户密码 验证码方式(最大程度保证程序安全) 网站运营模式可以在后台一键切换(ASP动态/HTML静态) 网页生成是可以...
  • 内容可编辑 头像 另请参阅: 动机 非常棒(4000颗星以上),但是: 这是。 似乎无法维护。 它基于jQuery。 它代码就像“意大利面条”,很难阅读。 最终,我对失去了兴趣,最终创建了它。 import Editor ...
  • 系统搭载Smarty模板引擎,支持自定义伪静态,前台模板采用DIV+CSS设计,后台界面设计简洁明了,功能简单易具有良好用户体验,稳定性好、扩展性及安全性强,面向中小型站点提供网站建设解决方案。 轻量级企业...
  • 独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 蓝色博客网站 v1.0.zip

    2019-07-09 02:34:03
    独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 通用网站模板 v1.0.zip

    2019-07-09 03:41:06
    独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 办公家具网站 v1.0.zip

    2019-07-09 02:08:46
    独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 集团公司网站 v1.0.zip

    2019-07-09 03:41:15
    独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...
  • 独创模块编辑功能,自己设计独特模块(包括但不限于:脚本代码、ASP.NET代码、图片、文字等等,只要你想得到任何网页元素)供设计模板时使用。 独创全站图片即时替换功能,方便地替换网站中任何位置图片...

空空如也

空空如也

1 2 3 4 5
收藏数 96
精华内容 38
关键字:

可编辑的div无法删除