[watermark]一、原理
iFram的designMode。这就是关键,在iFrame在打开DesignMode后,可以在浏览页面的同时对页面进行编辑,而且,可以是可视化的也可以是编码级的。比如字体设置,放表格加什么东东,就像这个论坛发帖这一部份。你可以作个最简单的设置,在你的页面上嵌入一个iframe ,通过
frames.你的iframe的ID.document.designMode = "On";
这样的脚本把它的designMode打开。
编辑完成后得存储。当然不用生成静态页面,那费空间又不好管理。存
数据库。把iFrame中编辑的代码提出来(在designMode下一个命令就可解决),至于上传的文件我们当然有链接在里面。把代码存入
数据库就可以了。
存了得给人看,那就更简单了,把存入的代码读出来显示就OK了,这里你想怎么显示就由你了。
二、示例:(这里我就就讲得更粗了,莫怪,我正上班!)
1.图片文件上传及嵌入
文件上传,网上大把
教程,不多说。如何嵌入进来是关键。 代码:
//插入图片对话框
function pic()
{message.focus(); //message 就是那个iFrame的ID,这里让它获得焦点
var range =message.document.selection.createRange();
//selection 代表了当前激活选中区,即高亮文本块,或文档中用户可执行某些操作的其它元素。它的CreateRange()方法就是创建一段html中的文本textRange。
var arr = ..........
// 这个就上传文件,属一无组件上传那一类问题,网上讲得多,我也不敷述了。 不过注意得把上传的那个文件的链接传过来到arr上。我这的arr返回了图片链接、大小、什么的信息。
if (arr != null){
var ss;
ss=arr.split("*") //把返回信息转成数组
a=ss[0];
b=ss[1];
c=ss[2];
d=ss[3];
e=ss[4];
f=ss[5];
var str1;
str1="
"
str1=str1+"
"+d+""
//生成代码
range.pasteHTML(str1);
//这是关键啦,pasteHTML是我们创建的这个textRange的方法,而这个range用它来把代码嵌入到我们那个iFrame中去。
}
else message.focus();
}
能传图片了,其它的也就可以传了,能显示的即时显示,不能显示的,大家也可以换个方式,比如有个带链接的图标代替……
这里把一切加东西的部份解决了!!!
[/watermark]