contenteditable="true"让div可编辑

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

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

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

用了

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

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

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

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

比如说图片和视频标签

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

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

就这么多吧

时间: 2024-11-05 13:43:51

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

【重要重要】如何在div是contentEditable=true的里面获取光标的位置,并在光标位置处插入内容。焦点位置插入指定内容

为什么要在contentEditable=true的div里面获取光标呢?因为这篇文章https://blog.csdn.net/qq_33769914/article/details/85002918我们知道想在一个内容里面插入一个新的内容,如果这个新的内容是段html代码.最后显示的是有样式的.那么用input是无法实现的. 所以我们考虑用contentEditable=true的div.在这里面输入的html就没问题啦.————————————————版权声明:本文为CSDN博主「夏天想」

input、textarea、div(contenteditable=true)光标定位到最后

1.针对input.textarea //定位input.textarea function po_Last(obj) { obj.focus();//解决ff不获取焦点无法定位问题 if (window.getSelection) {//ie11 10 9 ff safari var max_Len=obj.value.length;//text字符数 obj.setSelectionRange(max_Len, max_Len); } else if (document.selection)

&lt;div&gt;标签仿&lt;textarea&gt;。contentEditable=‘true’,赋予非表单标签内容可以编辑

需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<textarea>标签.但是标签高度不会随文本高度自动撑开,而是出现滚动条.使用JS动态计算文本内容高度赋予<textarea>标签高度. 2.使用<div>或者<p>.<span>等非表单标签,通过赋予其contentEditable='true'属性,是其获得内

可编辑DIV (contenteditable=&quot;true&quot;) 在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

h5新属性,可编辑的段落 contenteditable=“true”

HTML 5 全局 contenteditable 属性 HTML 5 全局属性 实例 一段可编辑的段落: <p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> 亲自试一试 定义和用法 contenteditable 属性规定是否可编辑元素的内容. HTML 4.01 与 HTML 5 之间的差异 contenteditable 属性是 HTML5 中的新属性. 语法 <element contentedit

vue 中contenteditable=&quot;true&quot;添加可编辑属性后v-model双向绑定失效的解决办法

在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现): <td class="width90" contenteditable="true" v-html="name3.LastProduct" @blur="name3.LastProduct=$event.target.inner

苹果手机IOS中div contenteditable=true无法输入

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

让DIV可编辑、可拖动

版权声明:本文为博主原创文章,未经博主允许不得转载. 1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可以让div编程可编辑状态 2.可拖动: $('#move').draggable(); 使用jQuery UI的draggable可以让div变成可拖动状态,但是如果两个属性同时应用就会出现可编辑功能失效的状况. 3.可编辑.可拖动: <

div可编辑框,去除粘贴文字样式&#128516;

上个月做了个聊天的需求(网页版的).说到聊天都想到输入框,说到输入框都会想到input,但是input标签是不支持插入图片的(包括areatext标签).查阅了一些资料就看到div标签有一个属性contenteditable,这个属性设置为true的话,div会变成可编辑状态,非常神奇,而且是可以插入图片的. 之所以写这篇文章当然不是只为了说这个简单的事情啦.因为开发的时候会遇到一个事情,就是复制别的地方的带样式的文字的时候,粘贴到div里,特么会把样式带上,可把我烦死了.各种查阅资料怎么去除样