selenium处理contenteditable,selenium处理内嵌滚动条

http://www.itjxue.com  2023-01-06 10:44  来源:未知  点击次数: 

求助哈,div处理成contenteditable=true,传值到input中,格式和换行都没了,

把div的innerHTML放到input中,你不用管input的显示,把input的值放到数据库里即可。显示时把数据库中的值放到div中,input不支持富文本的显示,所以你从哪里取值再放回哪里即可

300分求教高手:中如何动态设置文本属性?

花了半小时~~给你个小例子。。。。。。。。。不知有帮助没。。。。

!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN"

HTML

?HEAD

??TITLE?Demo?for?DIV?editor?/TITLE

??META?NAME="Author"?CONTENT="Anbert"

?/HEAD

?BODY

????SCRIPT?LANGUAGE="JavaScript"

????!--

????????function?Exec(sCmd){????????

????????????var?cmd?=?"",bUserInterface?=?false,vValue?=?0;

????????????

????????????switch(sCmd){

????????????????case?'b':

????????????????????cmd?=?"Bold";

????????????????????break;

????????????????case?'i':

????????????????????cmd?=?"Italic";

????????????????????break;

????????????????case?'s':

????????????????????cmd?=?"FontSize";

????????????????????vValue?=?getFontSize();?

????????????????????break;

????????????????case?'c':

????????????????????cmd?=?"ForeColor";

????????????????????vValue?=?getFontColor();

????????????????????break;

????????????????//more........

????????????}

????????????document.selection.createRange().execCommand(cmd,bUserInterface,vValue);????????

????????}

????????function?execute(cmd){

????????????document.selection.createRange().execCommand(cmd);

????????}

????????function?getFontSize(){

????????????return?font_size.options[font_size.selectedIndex].value;

????????}

????????function?getFontColor(){

????????????//it's?not?a?real?color,just?show?how?to?use?the?command;

????????????return?"#"?+?fcolor.style.backgroundColor.toString(16);

????????}

????????function?forecolor(){????????????

????????????CDC.ShowColor();????????

????????????var?c?=?CDC.Color;

????????????var?obj?=?fcolor;

????????????obj.style.backgroundColor=c;????????

????????????Exec('c');

????????}

????//--

????/SCRIPT

BR

???button??onclick="Exec('b')"?粗体?/button?button??onclick="Exec('i')"?斜体?/button?

???select?onchange="Exec('s')"?id=font_sizeoption?value=1一号/optionoption?value=2二号/optionoption?value=3三号/optionoption?value=4四号/optionoption?value=5五号/optionoption?value=6六号/optionoption?value=7七号/option/select???

???button?id="fcolor"?style="width:40;background:black;cursor:hand;"?onclick="forecolor();"/button

???br?/br?/

???div?style="border:solid?1px?blue;width:100%;height:300;"?contentEditable="true"?id="titi"

????随着昨晚中国男篮的最后一枚金牌入账,声势浩大的中国代表团多哈之旅终于结束。在历经15天的激烈比拼后,中国代表团以165金、88银、63铜,共计316枚奖牌的总成绩,遥遥领先亚洲诸国。作为2008北京奥运会的前哨战,多哈亚运会不仅给中国体育健儿提供了宽广的平台,也为失利者找到反思的空间。毕竟,两年之后,北京奥运大戏拉开序幕;四年之后,广州亚运会接踵而至,留给他们的时间并不多......

???/div

???form?target="_blank"?action?=?""?input?type="hidden"?id="wd"?name="wd"input?type="submit"?onclick="wd.value=titi.innerHTML"/form

???OBJECT?ID="CDC"?CLASSID="CLSID:F9043C85-F6F2-101A-A3C9-08002B2F49FB"/OBJECT

?/BODY

/HTML

div设置contenteditable="true",即可编辑,但无法去除从网页粘贴过来内容的格式

div?contenteditable="true"?id="t"/div

script

var?d?=?document.getElementById(?"t"?);

document.addEventListener(?"keyup",?function()?{

d.innerHTML?=?d.innerHTML.replace(?/[^]*/g,?""?);

}?);

/script

在浏览器输入这段代码为什么就可以修改网页了?javascript:document.body.contentEditable='true';docume

javascript:document.body.contentEditable='true';这就是给body标签设置了contentEditable属性为true,也就是说body标签下的内容都被设置成了可编辑状态。

允许contentEditable属性的存在对浏览器来说是有很大好处的。

首先,界面设计师可以实时的观察网页的改动对显示效果的影响,方便做出调整。

其次,可以让浏览器作为程序界面来被使用,而不只是作为一个上网浏览的工具。用户可以只用浏览器就进行各种各样的数据处理和编辑,然后通过和js的结合,进行逻辑上的处理以及保存。

听说过最近google出的Chrome操作系统吗?这个操作系统里只有一个Chrome浏览器,所有程序都是在这个浏览器里运行的,程序的界面显示都是通过浏览器来呈现的,用户能够修改界面上的内容,就是通过相应元素的contentEditable属性来实现的。

为什么 ContentEditable 很恐怖

因为你可能必须要处理HTML所见即所得编辑的全部细节。比如格式的控制,比如回车后、删除后的DOM结构,拷贝粘贴的行为,甚至光标的移动控制等等。有时候工作量不亚于从头写一个编辑器。

(责任编辑:IT教学网)

更多

推荐照片处理文章