今天才知道有这个属性，真是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. ZOJ 4019 Schrödinger's Knapsack

    Schrödinger's Knapsack Time Limit: 1 Second      Memory Limit: 65536 KB DreamGrid has a magical knap ...

  2. 〖C语言学习笔记 〗(二) 数据类型

    前言 本文为c语言的学习笔记,很多只是留下来占位的 数据类型 助记:变量就是在内存中挖个坑并给这个坑命名,而数据类型就是挖内存的坑的尺寸 基础类型 整数类型: short int int long i ...

  3. Error: failed to execute 'C:\Keil\ARM\ARMCC'的解决办法

    在KEIL新建工程时,容易出现该问题,我查了一些资料,最终找到该问题解决方法: 第一步:在keil里的菜单栏依次选择Project->Manage->Components,Environm ...

  4. Json Schema简介

    1. 引言 什么是Json Schema? 以一个例子来说明 假设有一个web api,接受一个json请求,返回某个用户在某个城市关系最近的若干个好友.一个请求的例子如下: { "city ...

  5. [C++]指针/指针数组/数组指针/多维指针/单值指针/多值指针

    int main(){ //单值指针(指向单个值得指针,类同普通变量) int *px = new int; *px = 100; printf("%d",*px); delete ...

  6. Sqoop异常:Please set $ACCUMULO_HOME to the root of your Accumulo installation.

    shell-init: 获取当前目录时出错: getcwd: 无法访问父目录: 没有那个文件或目录chdir: 获取当前目录时出错: getcwd: 无法访问父目录: 没有那个文件或目录chdir: ...

  7. HTML5中<template>标签的详细介绍

    HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...

  8. 卷积神经网络(CNN)学习笔记1：基础入门

    卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01   |   In Machine Learning  |   9 Comments  |   14935  Vie ...

  9. 使用CSS将图像对齐

    相对于<img>元素的align特性来说,越来越多的网页设计人员使用float属性来对齐图像.可以采用两种方式来实现对齐.为了确保文本不会与图像的边缘接触,我们经常会给图像增加一个外边距. ...

  10. Django 聚合与查询集API实现侧边栏

    本文从Django官方文档总结而来,将聚合的主要用法和查询集的常见方法做一归纳. 聚合 1. 聚合的产生来源于django数据库查询,通常我们使用django查询来完成增删查改,但是有时候需要更复杂的 ...