今天才知道有这个属性，真是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. java元注解 @Retention注解使用

    @Retention定义了该Annotation被保留的时间长短: 1.某些Annotation仅出现在源代码中,而被编译器丢弃: 2.另一些却被编译在class文件中,注解保留在class文件中,在 ...

  2. web4.0基本配置

    const path = require('path');//引入路径包 const HWP = require('html-webpack-plugin');//引入自动产出html包 const ...

  3. Java Web之路（一）Servlet

    前言 执行过程 Servlet 生命周期.工作原理:http://www.cnblogs.com/xuekyo/archive/2013/02/24/2924072.html Servlet的生命周期 ...

  4. JS堆栈与拷贝

    一.堆栈的定义 1.栈是一种特殊的线性表.其特殊性在于限定插入和删除数据元素的操作只能在线性表的一端进行. 结论:后进先出(Last In First Out),简称为LIFO线性表.栈的应用有:数制 ...

  5. php 利用root 权限执行shell脚本

    http://blog.csdn.net/lxwxiao/article/details/8513355 也可以指定某个shell文件不需要密码 www-data ALL=(ALL) NOPASSWD ...

  6. 最小费用流（km的另一种使用思路）

    题目链接:https://cn.vjudge.net/contest/242366#problem/L 大体意思就是:h代表旅馆,m代表人,人每走动一个需要一个金币,行动只有两个方向,水平或者竖直.问 ...

  7. Android中实现延时执行操作的几种方法

    1.使用线程的休眠实现延时操作 new Thread() { @Override public void run() { super.run(); Thread.sleep(3000);//休眠3秒 ...

  8. mysql一次查询，返回多个统计结果

    1.sum(if) select sum(if(status=1,1,0)) as s1_count,sum(if(status=2,1,0)) as s2_countfrom order; 2.co ...

  9. Dom4j向XML中增加节点与属性——（四）

    先获取到节点,然后在节点山添加Element 添加节点 添加属性 设置开始标签与结束标签的值book.addElement("描述").addAttribute("nam ...

  10. ubuntu14.04 放开串口权限

    可以用如下命令查看串口信息: ls -l /dev/ttyUSB*来查看相关的信息. 但是普通用户没有usb操作权限(函数open()打不开串口:refused),如果我们想在ROS程序里面打开串口, ...