PDA

View Full Version : ActiveX save a file script to combine with rich text area



green
04-03-2009, 07:47 AM
I know Twey wouldn't like this activeX script here because of all the popups it would cause on the user's PC. But in this particular case the use is for an ebook which uses IE as an engine and there are no problems with browser security warnings.

My intentions are also innocent enough and I believe these two scripts (license free) could be useful to many Dynamic Drive visitors.

Script 1 (activeX) is to allow a user to save a retrieved .txt file to their own hard disk from within he ebook program - in this case to save personal notes in a Spanish language course.

Script 2 is a very simple rich text area to write the notes in.

My aim is to combine these scripts so that the notes made in Script 2 can be saved using Script 1 (activeX).

The problem is that in Script 1 the javascript is not dsigned for textareas in iframes and Script 2 uses iframes.

Request: Can someone help me replace the textarea in Script 1 with the iframe textarea in Script 2?

Here are the scripts, which I include in their entirety:

Script 1: save text to disk (activeX)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Local File I/O</title>
<script type="text/javascript">
<!-- // Begin
var ForReading = 1, ForWriting = 2, ForAppending = 8;
var objFSO = new ActiveXObject("Scripting.FileSystemObject");

function checkText(fld, btn) {
btn.disabled = false;
fld.onkeypress = null;
return true;
}
function checkFile(obj, div, btn, btn2, fld) {
div.innerHTML = '<p><b>File:</b><br><b>Size:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Last Modified:</b></p>';
btn.disabled = true;
btn2.disabled = true;
fld.value = '';
fld.onkeypress = new Function("return checkText("+
"document."+fld.form.name+"."+fld.name+","+
"document."+btn2.form.name+"."+btn2.name+")");
//
// if (obj.value.indexOf(":") != 1) {
// alert("Local file name must include a drive letter.");
// return false;
// }
var ary = obj.value.split("\\");
if (ary.length < 2) {
alert("Local file name must include a path.");
return false;
}
if (!/(\.txt)$/i.test(obj.value)) {
alert("Local file name must include the '.txt' extension.");
return false;
}
//
try {
objFile = objFSO.GetFile(obj.value);
} catch(e) {
if (e.message != "File not found") {
alert(e.message);
return false;
} else {
try {
if (confirm(obj.value+"\n"+
"does not exist. Click 'Ok' to create it.")) {
objFile = objFSO.CreateTextFile(obj.value);
objFile.Close();
objFile = objFSO.GetFile(obj.value);
} else {
return false;
}
} catch(e) {
alert(e.message);
return false;
}
}
}
fileSpecs(div, btn);
objFile = null;
return true;
}
function fileSpecs(div, btn) {
if (objFile.Size > 0) {
btn.disabled = false;
} else {
btn.disabled = true;
}
var str = '<p>';
str += '<b>File:</b> ' + objFile.Path + '<br>';
str += '<b>Size:</b> ';
if (objFile.Size < 1024) {
str += objFile.Size + ' bytes';
} else {
str += (objFile.Size/1024).toFixed(1) + ' Kbytes';
}
str += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
str += '<b>Last Modified:</b> ' + objFile.DateLastModified;
str += '</p>';
div.innerHTML = str;
}
function loadFile(btn, obj, div, fld) {
objFile = objFSO.GetFile(obj.value);
objStream = objFile.OpenAsTextStream(ForReading);
fld.value = objStream.ReadAll();
objStream.Close();
objStream= null;
fileSpecs(div, btn);
objFile = null;
return true;
}
function saveFile(btn, obj, div, fld, btn2) {
btn.disabled = true;
objFile = objFSO.GetFile(obj.value);
objStream = objFile.OpenAsTextStream(ForWriting);
objStream.Write(fld.value);
objStream.Close();
objStream = null;
objFile = objFSO.GetFile(obj.value);
fileSpecs(div, btn2);
objFile = null;
fld.value = '';
fld.onkeypress = new Function("return checkText("+
"document."+fld.form.name+"."+fld.name+","+
"document."+btn.form.name+"."+btn.name+")");
return true;
}
// End -->
</script>
</head>

<body>
<center>
<form name="myForm" onsubmit="return false;">
<table width="720">
<tr>
<td colspan="4">
<div id="fileSpec">
<p><b>File:</b><br><b>Size:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Last Modified:</b></p>
</div>
</td>
</tr>
<tr>
<td colspan="3" width="580" align="center" valign="top">
<textarea rows="25" name="fileArea" cols="70"
onkeypress="return checkText(this, btnSave);"></textarea> </td>
<td rowspan="2" width="140" valign="top"><p>This is a simple demonstration of
a browser-based local text file editor.&nbsp; Begin by clicking the <b>Browse</b>
button to select an existing text file from your local hard drive.&nbsp;
(In the Browse dialog, you may type in a new file name if
desired.)&nbsp; The selected file information is then displayed at the
top of the page.&nbsp; For an existing file, click the <b>Load</b>
button next.&nbsp; After editing, click the <b>Save</b> button to
complete the demonstration.</p></td>
</tr>
<tr>
<td align="left">
<input type="file" name="fileName" size="50"
onchange="return checkFile(this, document.getElementById('fileSpec'), btnLoad, btnSave, fileArea);"> </td>
<td align="center">
<input type="button" name="btnLoad" value="Load" disabled
onclick="return loadFile(this, fileName, document.getElementById('fileSpec'), fileArea);"> </td>
<td align="center">
<input type="button" name="btnSave" value="Save" disabled
onclick="return saveFile(this, fileName, document.getElementById('fileSpec'), fileArea, btnLoad);"> </td>
</tr>
</table>
</form>
</center>

</body>
</html>



Script 2 Rich text area. (THE SUBMIT BUTTON SHOULD BE REMOVED HERE as not required, of course.)

<html>
<head>
<title>Simple Javascript WYSIWYG Editor</title>
<script language="Javascript">
var Editor;

function Format(action)
{
Editor.execCommand(action, false, null);
}

function Colour(colour)
{
Editor.execCommand("forecolor",false, colour);
}

window.onload = function()
{
Editor = document.getElementById('textbox').contentWindow.document;
Editor.designMode = "on";
document.forms[0].onsubmit = function()
{
var text = document.getElementById('text');
text.value = Editor.body.innerHTML;
}
}


</script>



</head>
<body>
<form >
<div>
<input type="button" onclick="Colour('Green')" style="background-color:Green;" />
<input type="button" onclick="Colour('Red')" style="background-color:Red;" />
<input type="button" onclick="Colour('Blue')" style="background-color:Blue;" />
<input type="button" onclick="Colour('Black')" style="background-color:Black;" />
<input type="button" onclick="Format('bold')" value="B" />
<input type="button" onclick="Format('italic')" value="I" />
<input type="button" onclick="Format('Underline')" value="U" />
<input type="button" onclick="Format('justifycenter')" value="C" />
<input type="button" onclick="Format('justifyleft')" value="L" />
<input type="button" onclick="Format('justifyright')" value="R" /><br/>
<iframe id="textbox" style="width:300px; height:150px"></iframe><br/>
<input type="submit" value="Go" />
<input type="hidden" id="text" name="text" />
</div>
</form>
</body>
</html>


I look forward to any suggestions and invite visitors to use these scripts - the rich text area is particularly interesting due to its simplicity.