今天才知道有这个属性,真是out了。

不过以前一直没做编辑器有关的,毕竟开源的很多。

现在觉得开源的也不是这么好用,自己写写简单的吧

用了

<div class="content-box" contenteditable="true">

我们就能在这个div内部进行编辑了。

有人要问了,有textarea,还需要这个吗

当然,用它的好处就是能插入标签。

比如说图片和视频标签

配合Jquery的html方法就能获取里面的内容了

var content=$(".content-box").html();
console.log(content);

就这么多吧

contenteditable="true"让div可编辑的更多相关文章

  1. 使用contenteditable=true的div模拟textarea(vue2.0中使用,带placeholder且高度自动撑开)

    子组件: <template> <div class="item-address"> <span v-show="!hasAddress&q ...

  2. 使用div 的 contenteditable属性,实现输入编辑,输入 "#" 出现下拉选择

    文章原文:https://www.cnblogs.com/yalong/p/11883585.html 演示效果如下:   具体代码可以看 https://github.com/YalongYan/e ...

  3. contenteditable属性让div也可以当做输入框

    你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...

  4. 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

  5. <div>标签仿<textarea>。contentEditable=‘true’,赋予非表单标签内容可以编辑

    需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<texta ...

  6. 苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑

    问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-use ...

  7. div设置contenteditable="true" 光标消失:原因

    原因1:document.onselectstart= function(){return false;}; 原因2:父层设置了user-select:none 导致 子层设置了 contentedi ...

  8. IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

  9. IOS中div contenteditable=true无法输入

    在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是无法输入.加一个样式-webkit-user-sele ...

随机推荐

  1. 一个奇怪的SystemClock_Config问题解决方法

    一直在SystemClock_Config程序死掉,然后下载最新的STm32Cube从新创建项目成功了.

  2. 如何学好web安全

    web服务组件: 横向就是如图所示,纵向就是数据流:数据流说白了就是http协议. 举例: 1.如果在操作系统没有处理好,就产生了OS命令执行的安全问题: 2.如果在存储层的数据库中没有处理好,数据库 ...

  3. C# 时间戳与时间相互转化

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 时间戳d ...

  4. MySQL5.7使用错误解决:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)【取消或重设root密码】

    解决方法: 最简单方法: ⑴打开mysql中的my.ini(如果没有就将my-default.ini复制一份,并修改为my.ini): ⑵在[mysqld]下面空白行直接添加skip-grant-ta ...

  5. 以前的 Delphi版本

                    Delphi 1 Delphi 2 Delphi 3 Delphi 4 Delphi 5 Delphi 6 Delphi 7 Delphi 8 Delphi 2005

  6. SRS+flv.js打造兼容性较高的直播、点播平台

    **************************************************************************************************** ...

  7. SpringBoot整合Jdbc

    (1).添加相关依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...

  8. 简述JavaScript全局对象

    全局对象是JavaScript中非常重要的一类对象,它作为程序顶层(程序最顶端,不包括在任何函数之内)的上下文存在,JavaScript中的全局属性.全局函数都是通过全局对象来提供给程序的,比如 全局 ...

  9. eclipse自定义工具栏

    设置:1.Window2.Customize Perspective说明:Tool Bar Visibility定义菜单栏,Shortcuts定义右键new菜单

  10. Javascript构造函数的继承

    仅供学习参考,原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html 今天要介绍 ...