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

likepao 2006-09-25 04:30:01
我想做一个类似 Dreamweaver 这样的编辑器.但是眼下遇到一个问题请各位同仁指点一下!
鼠标在编辑区内选中一个对象(如一段文本或图片),会呈一种选中状态,当鼠标在编辑区外任意点一下时,编辑区内的选中状态就取消了.
请问有没有什么办法解决以上问题,当在编辑区内选中对象时,鼠标在编辑区外点击时,编辑区内部仍然能处于选中状态!!!
...全文
209 点赞 收藏 9
写回复
9 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
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
<!--
//==============================================
//function : fnSearch()
//comment : Search the text
//param : none
//return : none
//author : Fantiny
//Date : 10/21/2005
//==============================================
function fnSearch() {

var strBeReplaced;
var strReplace;

strBeReplaced = fm1.txtarea2.value;
strReplace = fm1.txtarea3.value;

fnNext();

fm1.txtarea1.focus();
oRange = fm1.txtarea1.createTextRange(); //Create a textRange for the Textarea


// Find the text by findtext method
for (i=1; oRange.findText(strBeReplaced)!=false; i++) {
if(i==intCount){
oRange.select(); // select the finded text
oRange.scrollIntoView(); // scroll the page and set the text Into View
break;
}
oRange.collapse(false); //
}
}

//==============================================
//function : fnSearch()
//comment : set the flag to the next textrange
//param : none
//return : none
//author : Fantiny
//Date : 10/21/2005
//==============================================
function fnNext(){

if (intCount > 0 && intCount < intTotalCount){
intCount = intCount + 1;
}
else{
intCount = 1 ;
}
}

//==============================================
//function : init()
//comment : initialize at page onload to get the count
//param : none
//return : none
//author : Fantiny
//Date : 10/21/2005
//==============================================
function init(){

var oRange ;
var strBeRepalced;

oRange = fm1.txtarea1.createTextRange(); //Create a textRange for the Textarea
strBeReplaced = fm1.txtarea2.value;

for (i=0; oRange.findText(strBeReplaced)!=false; i++) {
oRange.collapse(false); // Moves the insertion point to the end of the text range.
}

intTotalCount = i ;

}

//==============================================
//function : fnReplace()
//comment : replace the text of the selected textrange
//param : none
//return : none
//author : Fantiny
//Date : 10/21/2005
//==============================================
function fnReplace(){

var strReplace;

strReplace = fm1.txtarea3.value;

// if the textrange is exist, replace the text
if(oRange!= null && typeof(oRange)=="object" && intTotalCount > 0){
oRange.text = strReplace;
intCount = intCount - 1;
intTotalCount = intTotalCount - 1;
oRange = null;
}
}

function chk(){
oRange.select(); // select the finded text
oRange.scrollIntoView(); // scroll the page and set the text Into View
}
//-->
</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
你是不是遇到这种问题的,就是用户选择了某段文字,然后去菜单里边选择某个菜单项,结果经常一点击,原来编辑框中的选择就消失了?我解决这种问题的办法就是把要选择的菜单项不用文字形式,而是采用按钮形式,这样就解决了这个问题。但是如果用户才本页的其他地方点击或者选择问题,这是挡不住的。
回复
liufei8463 2006-09-25
果然有挑战.帮顶你顶拉!
回复
相关推荐
发帖
JavaScript
创建于2007-09-28

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2006-09-25 04:30
社区公告
暂无公告