求助高手!!问题有挑战性!!!!

likepao 2006-09-25 04:30:01

我想做一个类似 Dreamweaver 这样的编辑器.但是眼下遇到一个问题请各位同仁指点一下!
鼠标在编辑区内选中一个对象(如一段文本或图片),会呈一种选中状态,当鼠标在编辑区外任意点一下时,编辑区内的选中状态就取消了.
请问有没有什么办法解决以上问题,当在编辑区内选中对象时,鼠标在编辑区外点击时,编辑区内部仍然能处于选中状态!!!

...全文

232 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

fantiny 2006-09-27

打赏
举报

<html>
<head>
<title>ContentEditable Demo</title>
<script>
// Makes button look sunken when button is clicked
function BtnDown()
{
window.event.srcElement.style.borderStyle = "inset";
}

// Makes button look raised when button is released
function BtnUp()
{
window.event.srcElement.style.borderStyle = "outset";
}

// Executes commands depending on which button has been pushed
function Toggle()
{
// get button label
text = window.event.srcElement.innerText;

if (text == "ContentEditable")
{
if (document.all("edit").contentEditable == "true")
{
document.all("edit").contentEditable = "false";
window.event.srcElement.style.borderStyle = "outset";
}
else
{
document.all("edit").contentEditable = "true";
window.event.srcElement.style.borderStyle = "inset";
}

return;
}

else if (text == "Bold")
document.execCommand("Bold");

else if (text == "Italic")
document.execCommand("Italic");

else if (text == "FontColor")
{
theColor = document.all.fontcolor.value;
if (theColor != "")
document.execCommand("ForeColor", false, theColor);
}

else if (text == "FontSize")
{
theSize = document.all.fontsize.value;
if (theSize != "")
document.execCommand("FontSize", false, theSize);
}

else if (text == "FontName")
{
theName = document.all.fontname.value;
if (theName != "")
document.execCommand("FontName", false, theName);
}

else if (text == "InsertImage")
{
theImg = document.all.imagepath.value;
if (theImg != "")
document.execCommand("InsertImage", false, theImg);
}

window.event.srcElement.style.borderStyle = "outset";
}
</script>
<style>
#edit {
position:absolute;
top: 25;
left: 225;
width: 350;
height: 350;
border:solid;
border-style:ridge;
border-width:5;
background-color:white;
}
.btn {
border:solid;
border-style:outset;
border-width:thin;

font-weight:bold;
padding:2;
color:white;
background-color:#336699;
cursor:default;
}

</style>
</head>

<body bgcolor="#cc9966" unselectable="on">

<div unselectable="on">
<br>

<span unselectable="on" class="btn" onmouseup="Toggle();" style="border-style:inset">ContentEditable</span>
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">Bold</span>
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">Italic</span>
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontColor</span>
<input type="text" id="fontcolor" size="10" value="red">
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontSize</span>
<input type="text" id="fontsize" size="1" value="7">
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontName</span>
<input type="text" id="fontname" size="14" value="comic sans ms">
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">InsertImage</span>
<input type="text" id="imagepath" size="14" value="/workshop/graphics/cone.jpg">
<br><br>
</div>

<div id="edit" contentEditable="true">
<p>This text is inside the editable region.</p>
</div>

</body>
</html>

二楼の五号 2006-09-27

打赏
举报

<body>

<script>
document.body.onmouseover=function(){
event.srcElement.className="与众不同的样式";
}
</script>

</body>

wideroad 2006-09-26

打赏
举报

我觉得可以这样来解决，所有的编辑功能都是通过编辑器上的那些工具按钮提供的，我们可以在那些需要进行更多操作的按钮的点击事件中保存现在的textrange，这样就能解决这个问题

likepao 2006-09-26

打赏
举报

2楼说的有点对.但是鼠标移到编辑区外是为了输入文本框,而改变选中对象的属性,所以不能用按钮!就像我们网页编辑用的 Dreamweaver FX2004 一样.
要不大家把QQ号留下吧.咱们进一步讨论一下!

likepao 2006-09-26

打赏
举报

这么做的话太局限了,要是输入连接.或是改变高度或宽度什么的就太麻烦了!
哪位朋友还有没有更好的办法!!

fantiny 2006-09-25

打赏
举报

我这个只有点击search按钮后的选择范围符合你的要求，不过你可以自己改一下。
把你的选择的范围作为一个range来保存

fantiny 2006-09-25

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var oRange; // save the current textrange
var intCount = 0; // this pos of current textrange in the total count
var intTotalCount = 0; // total count

</SCRIPT>
</HEAD>
<BODY onload="init()" onclick="chk()">
<FORM METHOD=POST name="fm1">
<textarea NAME="txtarea1" ROWS="20" COLS="50">
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
</textarea>
<TEXTAREA NAME="txtarea2" ROWS="20" COLS="50"> will be </TEXTAREA>
<TEXTAREA NAME="txtarea3" ROWS="20" COLS="50"> has been </TEXTAREA>
<input type="button" value="search" onclick="fnSearch()">
<input type="button" value="Replace" onclick="fnReplace()">
</FORM>

</BODY>
</HTML>

wideroad 2006-09-25