JS设计“网页在线编辑器”

为扩充佳誉网站管理软件的实际功能,今天大致性的设计了一个所见即所得的网页在线编辑器,只做了个雏形出来,目前所能做的仅仅是在“编辑”状态下写入HTML代码,在“预览”状态中时实查看代码效果,超乎想象的是预览状态下居然也能够运行JavaScript语句,呵呵,这个功能是喜忧参半:) 等有时间了再慢慢继续完善。暂时命名为“JarulyPage ”,版本:V1.0.2005.1019 Beta


1.编辑器窗体容器:

 <iframe id=editbox name=editbox style=width:100%;border:1px inset gray frameborder=no></iframe>


2.几个重要的功能函数:

 initOpenedFile(val):初始化编辑器,用btnOpenFile()函数打开文件获得文件内容并传递给val形参,在返回给全局变量OpenFileContent;
 OpenFileContent:用于接收初始化的、编辑过的,预览中的文件内容;
 viewOpenFile():将编辑器置于“预览”状态;
 editOpenFile():将编辑器置于“编辑”状态;
 SaveOpenFile():保存修改过的文件;


3.部分源码:

function initOpenedFile(val){
 obj.editbox.height=obj.yuping.height-10;
 editbox.document.designMode="On";
 editbox.document.open();
 editbox.document.write("<html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><link href=Style/FileEditor.css rel=stylesheet

type=text/css></head><body></body></html>");
 editbox.document.body.contentEditable="true"; 
 editbox.document.execCommand("2D-Position",true,true);
 editbox.document.execCommand("MultipleSelection", true, true);
 editbox.document.execCommand("LiveResize", true, true);
 editbox.document.body.innerText=val;
 OpenFileContent=val;
}

function viewOpenFile(){
 OpenFileContent=editbox.document.body.innerText.replace("< /script>", "</script>");
 editbox.document.designMode="Off";
 editbox.document.open();
 editbox.document.write(OpenFileContent);
 editbox.document.contentEditable="false";
 editbox.document.close();
 obj.save.disabled=true

}

function editOpenFile(){
 obj.save.disabled=false;
 initOpenedFile(OpenFileContent);
}


4.JarulyPage V1.0.2005.1019 Beta 已知的问题:

 # 编辑状态下,可以将IE中打开的网页内容直接复制以编辑器中,但点击“预览”后将会自动清除HTML格式;
 # 将文件内容中的“\n”替换成换行符;
 # 暂不能在“预览”状态下不解析HTML格式、JavaScript/JScript/VBScript/语句;

posted @ 2005-10-19 20:35  萍踪侠影  阅读(1611)  评论(1编辑  收藏  举报