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

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

1.编辑器窗体容器：

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/语句；

秒客网

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

相关文章