contenteditable

http://www.w3school.com.cn/tags/att_global_contenteditable.asp

做编辑器经常用这个属性使得整个编辑区域所见所得

http://www.cnblogs.com/cskk/archive/2013/03/30/divs.html

这两天在研究编辑器的代码，这个所见即所得这个功能是怎么实现的，想了我好久

一按开始我看的是FCKEditor的代码后来没想通再后来我又去看SCEditor的代码

发现都有contenteditable这个属性，于是一搜索..

时间： 2024-10-06 06:59:27

contenteditable的相关文章

contenteditable实现可编辑的HTML标签

最近工作中遇到了一个小问题,让我学到了新的标签属性--contenteditable. 我需要实现的是手机端界面,特别简单的一个页面,如下图: 在我脑海里第一时间想到的应该就是一个form表单然后里面包裹着一个textarea标签这么简单吧,心想着这个界面顶多用十分钟就能搞定. 然后打开编辑器我就开始写了,代码如下: <form class='textbox' action="" method="post"> <textarea name=&quo

获取contenteditable区域光标所在位置信息

在我们使用contenteditable编辑时,有时需要光标位置的信息. <div contenteditable="true" style="min-height: 200px; width: 100%;-webkit-user-select: auto"></div> <script> if(s.anchorNode.parentElement.localName == 'div'){ actClass = s.anchorN

HTML5 contenteditable属性

HTML5 contenteditable属性: 此属性指定元素内容是否可编辑. 当元素中没有设置contenteditable属性时,元素将从父元素继承. 语法结构: <element contenteditable="true|false"> 浏览器支持: (1).IE浏览器支持此属性. (2).谷歌浏览器支持此属性. (3).火狐浏览器支持此属性. (4).Safari浏览器支持此属性. (5).Opera浏览器支持此属性. HTML4.01与HTML5之间的差异:

contenteditable支持度

contenteditable attribute (basic support) - Working Draft Global user stats*: Support: 86.71% Partial support: 0.32% Total: 87.03% Method of making any HTML element editable Resources: Demo page WHATWG blog post Blog post on usage problems IE Firef

contenteditable placeholder

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content.placeholder::after { content: '留下你想说的话吧'; color: #ccc; } </style> </head> <

实时监测contenteditable(可编辑文档)的内容发生改变

如果是文本框用onchange,oninput,onpropertychange都可以实时监控值发生变化,但是div设置了属性contenteditable(可编辑文档)就不管用了. 最简单的方法用oninput事件,可惜ie下支持度不好 addEvent(doc,'input',function(){ //do something... }); 那么自己实现一个: var oldValue = context.getSource(), newValue; ['blur','keyup','mo

HTML5新增的通用属性 - contentEditable属性

HTML5为大部分HTML元素增加了contentEditable属性,如果将该属性设置为true,则浏览器允许开发者直接编辑该HTML元素里的内容,并且支持"可继承"的特点,也就是如果一个HTML元素的父元素是可编辑的,那么它也是可编辑的. 示例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>contentEditable属性

HTML5之contenteditable属性

1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)contenteditable属性为false <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>contentEditable</title> </head> <ul contenteditable="

div的contenteditable和placeholder蹦出的火花

今天在做手机端发布描述内容时,需要实现换行,还需要有plachholder. 在文本框中换行自然想到了textarea. 问题似乎已经解决了,但是当内容发布后,在html中显示换行都丢失了. 这个时候就用到了contenteditable和placeholder <div class="con" contenteditable="true" placeholder="请输入描述内容..."></div> .con:empt