今天才知道有这个属性,真是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. winform,WPF 释放内存垃圾,减少资源占用方法

    [System.Runtime.InteropServices.DllImport("kernel32.dll")]        public static extern boo ...

  2. 19. SpringBoot_web开发-使用外部Servlet容器&JSP支持

    還沒有web.xml,生  配置tomcat 嵌入式Servlet容器:应用打成可执行的jar 优点:简单.便携: 缺点:默认不支持JSP.优化定制比较复杂 使用定制器[ServerPropertie ...

  3. 高版本sonar安装遇到的坑-sonar 6.6

    最近安装了6.6版本的sonar,发现里面的坑还是很多,下面列举下遇到的坑 sonar插件地址:https://docs.sonarqube.org/display/PLUG/Plugin+Libra ...

  4. MySQL之当数据库数据源被锁(Table Metadata Lock)时的解决方案

    0.发生的原因分析:[hibernate的线程池连接导致了不能修改被锁定数据库的数据库型模式] 1.关掉hibernate的所有线程池(选择退出IDE或者其他办法) 2.查看被锁的进程ID:show ...

  5. luogu P4568 [JLOI2011]飞行路线

    传送门 看到免费次数\(k\)最多只有10,可以考虑构建\(k+1\)层的分层图,即每一层正常连边,上下两层对应点连边权为0的单向边,最后对所有层里面的\(di_t\)取\(\max\)救星了 #in ...

  6. HDU2444 The Accomodation of Students【匈牙利算法】

    题意: 有n个学生,有m对人是认识的,每一对认识的人能分到一间房,问能否把n个学生分成两部分,每部分内的学生互不认识,而两部分之间的学生认识.如果可以分成两部分,就算出房间最多需要多少间,否则就输出N ...

  7. History API:ScrollRestoration

    By Paul Lewis(设计和性能倡导者)   翻译:江天 使用history api管理url是非常棒的一件事,可以说这是一个好web app的极为重要的特点.但它有一个缺点,滚动位置虽然被存储 ...

  8. 2017-2018-2 20155303『网络对抗技术』Exp8:Web基础

    2017-2018-2 『网络对抗技术』Exp8:Web基础 --------CONTENTS-------- 一.原理与实践说明 1.实践具体要求 2.基础问题回答 二.实践过程记录 1.Web前端 ...

  9. python2 与 python3 语法区别

    python2 与 python3 语法区别 概述# 原稿地址:使用 2to3 将代码移植到 Python 3 几乎所有的Python 2程序都需要一些修改才能正常地运行在Python 3的环境下.为 ...

  10. Mean shift

    转载:http://blog.csdn.net/google19890102/article/details/51030884 然后引入opencv中的pyrMeanShiftFiltering函数: ...