基于IE的简单JS操作文件

最新推荐文章于 2022-03-08 08:00:00 发布

xjmeplws

最新推荐文章于 2022-03-08 08:00:00 发布

阅读量688

点赞数

本文链接：https://blog.csdn.net/xjmeplws/article/details/9314065

版权

在平时的工作中碰到需要翻译的文字，一般是写在word文档上，然后从word赋值到网页中，但是复制word的时候也需要已经设置好的一些样式和链接，到网页中难免会有一些误差，于是想到在本地建一个html文件，由翻译人员在网页中编辑并保存成html格式的内容，避免排版错误。

不过问题在于此代码仅支持IE。

编辑器使用的是kindeditor

先来一段JS：

var fso = new ActiveXObject("Scripting.FileSystemObject");

var fullfolder = window.location.pathname;                                 //获取当前文件
var folder = fullfolder.substring(0, fullfolder.lastIndexOf('/'));
folder = folder.substr(1);

var subfolder, sourcefolder;
//创建文件，标题为空则根据时间命名
function createfile(title, content)
{
	if(content!=""){
		folder_exist();
		var fileName = "";
		if(title == ""){
			var localDate = new Date();
			var localFullYear = localDate.getFullYear().toString();
			var localMonth = localDate.getMonth().toString();
			var localDay = localDate.getDate().toString();
			var localHour = localDate.getHours().toString();
			var localMinutes = localDate.getMinutes().toString();
			var localSeconds = localDate.getSeconds().toString();

			fileName = subfolder + "/" + localFullYear + localMonth + localDay + localHour + localMinutes + localSeconds + ".html";
		}else{
			fileName = subfolder + "/" + title + ".html";
		}

		file_create(fileName, content);
	}
}
//判断目标文件夹是否存在，不存在则创建
function folder_exist()
{
	subfolder = folder + "/a";
	if(!fso.FolderExists(subfolder)){
		fso.CreateFolder(subfolder);
	}
}
//在前台页面中jquery貌似不能改变kindedior的textarea值，所以在这里添加
function add_content(content)
{
	var main = "";
	main += '<textarea name="content" id="content" class="kindeditor">'+content+'</textarea>';
	main += '<script type="text/javascript">';
	main += 'var editor;';
	main += 'KindEditor.ready(function(K) {';
	main += '	editor = K.create(\'textarea[name=\"content\"]\', {allowFileManager : true,width:\'800\',height:\'280px\'});';
	main += '});';
	main += '</script>';
	return main;
}
//显示所有源文件
function show_allfile()
{
	sourcefolder = folder + "/b";
	if(!fso.FolderExists(sourcefolder)){
		fso.CreateFolder(sourcefolder);
	}
	var f = fso.GetFolder(sourcefolder);
	var fc = new Enumerator(f.files);
	var s = "";
	var num = 0;
	for (; !fc.atEnd(); fc.moveNext())
	{
		s += "<a id='item_" + num + "' href='javascript:;' οnclick=\"selectfile('item_" + num + "');\">" + fc.item() + "</a>";
		s += "<br />";
		num++;
	}
	return s;
}
//获取选择文件的信息并赋值
function selectfile(fileNum)
{
	var fileName = $("#" + fileNum).text();
	var a=fileName.substring(0,fileName.lastIndexOf('\\') + 1);
	var title = fileName.replace(a,"").replace(".html", "");
	var ts = fso.OpenTextFile(fileName);
	var con = ts.ReadLine();
	$("#title").val(title);
	$("#main").html(add_content(con));
}
//创建目标文件
function file_create(fullName, content)
{
	var f = fso.CreateTextFile(fullName, true);
	f.WriteLine(content);
	f.Close();
}
//提交
function submitInfo()
{
	if(confirm("Confirm to create a html file?")){
		var content = $(document.getElementsByTagName('iframe')[0].contentWindow.document.body).html();
		if(content == ""){
			alert("Content is empty.")
		}else{
			var title = $("#title").val();
			createfile(title, content);
		}
	}
}

这一段JS简单的操作了文件夹和文件，代码还有需要优化的地方

附上前台

<html>
<head>
<title>
本地文件管理
</title>
<script type="text/javascript" src="editor/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="editor/kindeditor-min.js"></script>
<script type="text/javascript" src="editor/lang/zh_CN.js"></script>
<script type="text/javascript" src="editor/fileedit.js"></script>
</head>
<body>
<div style="margin-left:auto; margin-right:auto; text-align:center; margin-top:20px; padding-bottom:20px; color:Green;">本地文件管理</div>
<div style="float:left; width:70%">
文件名:<input type="text" id="title" size="50" />
<br /><br />
内　容:<div id="main"></div>
</div>
<div style="float:left; width:20%;">
	请选择文件:<br />
	<div id="show_file" style="background-color:#eeeeee;">
	</div>
</div>
<div style="width:100%; float:left;"></div>
<div style="float:left; margin-left:20px; padding-top:15px;">
	<input type="button" value="Create File" οnclick="submitInfo()" />
</div>
<br /><br /><br /><br />
<div style="float:left;">
<p>
	说明:
</p>
<p>
	<a style="color:red;">    系统仅支持IE浏览器.</a>
</p>
<p>
	    生成的文件为html文件，文件名只需填写生成的文件名,不填则默认以当前时间为文件名，
</p>
<p>
	不需要加.html等任何后缀，生成的文件在当前目录下的"a"文件夹下，源文件在"b"目录下。
</p>
<p>
	对JS弹出的确认框请点击允许。
</p>
</div>
<script type="text/javascript">
$().ready(function(){
	$("#show_file").html(show_allfile()); 
	$("#main").html(add_content(""));
	}
	);
</script>
</body>
</html>

前台截图