87,907
社区成员
发帖
与我相关
我的任务
分享如何为在线编辑器添加图片。跟传统用法有别，请指教,高分送上。
如何为在线编辑器添加图片。跟传统用法有别，请指教
流行的在线编辑器是采用以下的原理实现的，但插入图片的时候去只能是引入网络地址上的图片，最近我想改进一下，想把它改成引用本地图片的而且在STRUTS上使用。实现方案中有一个约束，必须要使用<input type=file>来引用图片，这样后台方能接收到这个上传的图片，而<input type=file>也有一个约束就是不能通过代码去动态改变它的值，否则表单会拒绝访问。
目前大部份的功能都实现了，只留如下一个很难解决的难道。望各位指点。
需求描述：
用户通过单击<input type=file>选定图片后，图片会自动插入到光标原来在编辑器中的选定位置。也就是说，如果用户在单击<input type=file>前光标在某一个表格的单元格里，则插入图片后，图片必须插入在这个单元格中。
我想了好久都没做成，请各位帮帮忙。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> html编辑器教程 </TITLE>
<script language="javascript">
<!--
function init()
{
olEditor.document.open();
olEditor.document.write("<div><i>HTML</i><b>编</b><font color=red>辑</font><u>器</u></div>");
olEditor.document.close();
olEditor.document.designMode="on"; //加上这个普通的iframe就可以变成一个在线编辑器了
}
function LoadDate(date)
{
olEditor.document.body.innerHTML = date;
}
function InsertDate(date)
{
olEditor.focus();
olEditor.document.selection.createRange().pasteHTML(date);
olEditor.focus();
}
// -->
</script>
</HEAD>
<BODY onload="init()">
<input type="text" name="myInsertDate" value="被插入数据<img src=http://www.openlab.net.cn/forum/olEditor/images/toolbar/face.gif>" size="60"/><input type="button" value="将数据插入编辑器中的光标位置" onclick="InsertDate(document.all.myInsertDate.value)"><br />
<input type="text" name="myLoadDate" value="被装载数据，支持<font color=blue>HTML</font>" size="60"/><input type="button" value="将数据装载到编辑器中" onclick="LoadDate(document.all.myLoadDate.value)">
<iframe id="olEditor" width="100%" height="400" SCROLLING ="yes"></iframe>
</BODY>
</HTML>
流行的在线编辑器是采用以下的原理实现的，但插入图片的时候去只能是引入网络地址上的图片，最近我想改进一下，想把它改成引用本地图片的而且在STRUTS上使用。实现方案中有一个约束，必须要使用<input type=file>来引用图片，这样后台方能接收到这个上传的图片，而<input type=file>也有一个约束就是不能通过代码去动态改变它的值，否则表单会拒绝访问。
目前大部份的功能都实现了，只留如下一个很难解决的难道。望各位指点。
需求描述：
用户通过单击<input type=file>选定图片后，图片会自动插入到光标原来在编辑器中的选定位置。也就是说，如果用户在单击<input type=file>前光标在某一个表格的单元格里，则插入图片后，图片必须插入在这个单元格中。
我想了好久都没做成，请各位帮帮忙。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> html编辑器教程 </TITLE>
<script language="javascript">
<!--
function init()
{
olEditor.document.open();
olEditor.document.write("<div><i>HTML</i><b>编</b><font color=red>辑</font><u>器</u></div>");
olEditor.document.close();
olEditor.document.designMode="on"; //加上这个普通的iframe就可以变成一个在线编辑器了
}
function LoadDate(date)
{
olEditor.document.body.innerHTML = date;
}
function InsertDate(date)
{
olEditor.focus();
olEditor.document.selection.createRange().pasteHTML(date);
olEditor.focus();
}
// -->
</script>
</HEAD>
<BODY onload="init()">
<input type="text" name="myInsertDate" value="被插入数据<img src=http://www.openlab.net.cn/forum/olEditor/images/toolbar/face.gif>" size="60"/><input type="button" value="将数据插入编辑器中的光标位置" onclick="InsertDate(document.all.myInsertDate.value)"><br />
<input type="text" name="myLoadDate" value="被装载数据，支持<font color=blue>HTML</font>" size="60"/><input type="button" value="将数据装载到编辑器中" onclick="LoadDate(document.all.myLoadDate.value)">
<iframe id="olEditor" width="100%" height="400" SCROLLING ="yes"></iframe>
</BODY>
</HTML>
...全文
请发表友善的回复…
发表回复
tpf9000 2004-12-03
- 打赏
- 举报
不懂，学习
lienzhu 2004-12-03
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> html编辑器教程 </TITLE>
<script language="javascript">
<!--
.....
var rep
function rec()
{
rep=olEditor.document.selection.createRange()
}
function ExtractFileExt(path)
{
var start=path.lastIndexOf(".");
var len=path.length;
return path.substring(start+1,len).toLowerCase();
}
function checkimg()
{
olEditor.focus();
var imgpath=document.all.image.value
if(ExtractFileExt(imgpath)!="gif" && ExtractFileExt(imgpath) != "jpg")
{
alert("图片格式只能为gif或jpg，请重新上载！");
return false;
}
rep.pasteHTML("<img src='" + imgpath +"'>");
olEditor.focus();
}
// -->
</script>
</HEAD>
<input type="file" name=image onmousedown="rec()" onchange="checkimg()">
<br>
定义一个全局变量记录位置rep=olEditor.document.selection.createRange()
当编辑窗体使去焦点时就记录到rep,插入时调用rep;
<HTML>
<HEAD>
<TITLE> html编辑器教程 </TITLE>
<script language="javascript">
<!--
.....
var rep
function rec()
{
rep=olEditor.document.selection.createRange()
}
function ExtractFileExt(path)
{
var start=path.lastIndexOf(".");
var len=path.length;
return path.substring(start+1,len).toLowerCase();
}
function checkimg()
{
olEditor.focus();
var imgpath=document.all.image.value
if(ExtractFileExt(imgpath)!="gif" && ExtractFileExt(imgpath) != "jpg")
{
alert("图片格式只能为gif或jpg，请重新上载！");
return false;
}
rep.pasteHTML("<img src='" + imgpath +"'>");
olEditor.focus();
}
// -->
</script>
</HEAD>
<input type="file" name=image onmousedown="rec()" onchange="checkimg()">
<br>
定义一个全局变量记录位置rep=olEditor.document.selection.createRange()
当编辑窗体使去焦点时就记录到rep,插入时调用rep;
marcoleung 2004-12-03
- 打赏
- 举报
解决办法我在别的地方找到了，有兴趣的朋友请参考以下网址
http://www.webuc.net/MyProject/uptest/
http://www.webuc.net/MyProject/uptest/
marcoleung 2004-12-03
- 打赏
- 举报
TO:李强
这个方法我试过了，是不行的，按照MSDN上说，SELECTION同一时间只会有一个。因为现在焦点会在两个文档中切换，因此是不可行的。
这个方法我试过了，是不行的，按照MSDN上说，SELECTION同一时间只会有一个。因为现在焦点会在两个文档中切换，因此是不可行的。
wasg 2004-12-02
- 打赏
- 举报
关注.
