PDA

View Full Version : js for writing contentEditable text to xml

swmr
03-27-2003, 02:13 PM
I'm looking for a way to save contentEditable text
somewhere other than my userData cache.

This script allows me to save whatever I type into
a textarea to an xml file:

<script>

function save()

{var forWriting = 2;

var dataFile = "C://note.xml";

var ts;var fso =new ActiveXObject

("Scripting.FileSystemObject");

ts=fso.OpenTextFile

(dataFile,forWriting,true);

ts.Write(data.xml);

ts.Close();}

</script>

</head>
<body>

<xml id="data" src="C://note.xml"></xml>

<textarea dataSrc="#data" dataFld="text"
cols="45" rows="5"></textarea>

<br>

<input type="button" value="saveIt" onclick="save()">

=========
note.xml:
=========
<?xml version="1.0"?>

<note>

<text>[MY TEXT IS SAVED HERE]</text>

</note>

=========

The problem with a contenteditable <span or div>
is that the text is not written to the file: note.xml,
as it is when typed in a textarea.

THIS DOESN'T WORK:

<span contenteditable="true" dataSrc="#data" dataFld="text"></span>


So, I want to know if this next code for saving userData
can be adapted to work with something like I have above:

<style> .userData {behavior:url(#default#userdata);} </style>
<script for=window event=onload>
DoLoad();
</script>
<script for=window event=onbeforeunload>
DoSave();
</script>
<script>
function DoSave(){
foo.setAttribute("content", foo.innerHTML);
foo.save("EditContent");
}
function DoLoad(){
foo.load("EditContent");
content = foo.getAttribute("content");
if (content != null) foo.innerHTML=content;
}
</script>

is it the "innerHTML" bit that I'm missing, or what :confused:

..............................................................................
Skyzyx
03-27-2003, 11:07 PM
I wrote something like this yesterday. Using the Microsoft JScript Guide? Yeah... I copied their code too. Anyways, it's at home. I'm at work right now, so if you wait a few more hours, I should have something working for you...
swmr
03-28-2003, 07:21 AM
That sounds good. :)
swmr
04-03-2003, 10:33 PM
Skyzyx, I hope you weren't being facetious :eek:

If your "I wrote something like this yesterday" remark was sincere, I'm still interested ;)
swmr
04-07-2003, 10:06 PM
wait, don't leave me hangin'
come baaaaaaaaaaaack :D
Skyzyx
04-18-2003, 05:51 PM
Sorry! I forgot all about this post! Anyways, I hope this is what you're looking for. It works anyways.

You need to save this as a .hta file, and it can only run as a "program" on Windows with IE. It won't work on the web because of File System access security issues.


<html>
<head>

<HTA:APPLICATION ID="oWriteXML"
APPLICATIONNAME="Save Text to XML"
VERSION="1.0"
CAPTION="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="maximize">

<title>Write text and save to XML document</title>
<script language="JScript">
<!--

function saveXML(saveWhat, saveWhere)
{
document.getElementById('gen').innerHTML='Generating File...';

var fileSys = new ActiveXObject("Scripting.FileSystemObject");
var xmlFile=fileSys.CreateTextFile(saveWhere);

var allXML='';
allXML+=document.getElementById('formatPart1').innerHTML;
allXML+=saveWhat.value;
allXML+=document.getElementById('formatPart2').innerHTML;

xmlFile.write(allXML);
xmlFile.close();

document.getElementById('gen').innerHTML='Done. You may now close this window.';
}

//-->
</script>
</head>

<body>

<!-- This is how the text will be formatted in the XML file. Part 1 is what will
be generated before the text, while part 2 will be generated after the text.
The XMP tag does not eliminate whitespace like other tags do. -->


<xmp id="formatPart1" style="display:none;">
<?xml version="1.0"?>
<note>
<text>
</xmp>

<xmp id="formatPart2" style="display:none;">
</text>
</note>
</xmp>


<textarea name="text" id="text" rows="5" cols="40"></textarea><br />
<input type="button" value="Save to XML" onclick="saveXML(document.getElementById('text'), 'text.xml');" /><br />
<span id="gen"></span>

</body>
</html>


Sorry about the delay, and I hope this helps!
swmr
04-19-2003, 06:46 AM
:)
Thank you, I appreciate your effort, although, I
still don't get it. :confused:

My original question may have been too vague, or
I'm missing something obvious here:


your script works well, until I substitute
the textarea with a contentEditable DIV -
then the saved output reads "undefined":

--------------------------------

<?xml version="1.0"?>
<note>
<text>undefined</text>
</note>

---------------------------------

To be more specific,

I'm trying to save & bind the rich-text formatting (execCommands, etc.) to xml, just like it's done in my UserData folder--but without the limitation on file size.


Add Persistence to Your XML Data Islands (http://gethelp.devx.com/techtips/dhtml_pro/10min/10min0701/td070201-1.asp) is the only reference I've found that explains how to get the WSH to Bind & Save data to xml files...

I just haven't been able read between the lines well enough to work out the tricky parts.

:eek: HELP!
Skyzyx
04-19-2003, 08:43 PM
Oooh... that's alot of IE-proprietary XML data island stuff that, to be honest, is a bit over my head. I understand the logic more or less, but I'm running XP so the exact stuff you're working on (UserData and such) isn't the same here.

I wish I could help you more. You could try MSDN...
swmr
04-20-2003, 01:15 AM
Well, thanks anyway...

I have XP, as well, & just fyi, the UserData Behavior I referred to is outlined in this article:

Creating Editable Web Pages in Internet Explorer 5.5 (http://msdn.microsoft.com/library/en-us/dnmshtml/html/createwp.asp)

If i ever find an answer, or work it around myself (yeah, right!), I'll add to this thread...
swmr
04-26-2003, 03:47 AM
Success!!!
It turned out that the contentEditable data had to be filtered through a form field,
in order to get persisted as xml... that's the only thing that did it for me, anyway (wierd :rolleyes: )...
I'm not complaining, though, 'cause IT WORKS!:D

Here is my little test page, if anyone's interested:

<html><head>

<style type="text/css">

.content{
height:250px;width:500px;
background:window;
color:windowtext;
padding:2px;border:2px inset threedhighlight;
overflow:auto;word-wrap:break-word;}

.b{width:30px;font-weight:bold}
.i{width:30px;font-style:italic}
.u{width:30px;text-decoration:underline}

</style>

<script type="text/jscript">
function B(){document.execCommand("bold")}
function I(){document.execCommand("italic")}
function U(){document.execCommand("underline")}
function save()
{
var forWriting = 2;
var dataFile = "C://richText.xml";
var ts;
var fso =new ActiveXObject("Scripting.FileSystemObject");
ts = fso.OpenTextFile(dataFile,forWriting,true);
ts.Write('<note><text><![CDATA['+hidden_field.value+']]></text></note>');
ts.Close();
}
</script>

<xml id="data" src="C://richText.xml"></xml>

</head>

<body bgcolor="buttonface" onload="EditArea.innerHTML+=hidden_field.value">

<input type="hidden" id="hidden_field" dataSrc="#data" dataFld="text" />

<div align="center">

<br /><br />
<div align="left" id="EditArea" contenteditable="true" class="content">
<div></div></div>

<form>
<input type="button" title="Bold" value="b" class="b" onclick="B()" onfocus="EditArea.focus()" />

<input type="button" title="Italic" value="i" class="i" onclick="I()" onfocus="EditArea.focus()" />

<input type="button" title="Underline" value="u" class="u" onclick="U()" onfocus="EditArea.focus()" />
</form>

<input type="button" title="Write to file" value="Save" onclick="hidden_field.value=EditArea.innerHTML;save()" />
</div>

</body></html>
swmr
04-26-2003, 08:53 AM
Ok... :rolleyes:

that form-field wasn't actually necessary (silly me).

I just found that using the "DATAFORMATAS" attribute cuts out the middle-man, so to speak.

Here's a better example for saving editable content: :D

<html><head>

<style type="text/css">

.content{
height:250px;width:500px;
background:window;
color:windowtext;
padding:2px;border:2px inset threedhighlight;
overflow:auto;word-wrap:break-word;}

.b{width:30px;font-weight:bold}
.i{width:30px;font-style:italic}
.u{width:30px;text-decoration:underline}

</style>

<script type="text/jscript">
function B(){document.execCommand("bold")}
function I(){document.execCommand("italic")}
function U(){document.execCommand("underline")}

function save()
{
var forWriting = 2;
var dataFile = "C://richText.xml";
var ts;
var fso =new ActiveXObject("Scripting.FileSystemObject");
ts = fso.OpenTextFile(dataFile,forWriting,true);
ts.Write('<note><text><![CDATA['+EditArea.innerHTML+']]></text></note>');
ts.Close();
}
</script>

<xml id="data" src="C://richText.xml"></xml>

</head>

<body bgcolor="buttonface">
<div align="center">
<br /><br />
<div align="left" id="EditArea" contenteditable="true" class="content" dataSrc="#data" dataFld="text" dataformatas="html">
<div></div></div>

<form>
<input type="button" title="Bold" value="b" class="b" onclick="B()" onfocus="EditArea.focus()" />

<input type="button" title="Italic" value="i" class="i" onclick="I()" onfocus="EditArea.focus()" />

<input type="button" title="Underline" value="u" class="u" onclick="U()" onfocus="EditArea.focus()" />

</form>

<input type="button" title="Write to file" value="Save" onclick="save()" />
</div>

</body></html>
jrmevans
11-25-2005, 08:47 PM
Okay, so i know that this is a really old thread, and I don't know if anyone will answer this... but how do you access the information from the .xml file after the file has been created???


I am not "seeing" how to call the data... do I create a regular page with html, javascript etc, to access ... what information to I put to get the proper information back???

If anyone can help me that would be a great help. I have searched google and came across many articles, I just cant' seem to "sort" through it to get it to work... :)
jrmevans
11-26-2005, 06:18 AM
No one at all has any idea???

:(
CfJohnny
11-30-2005, 02:59 PM
I'm looking for a way to save contentEditable text
somewhere other than my userData cache.

This script allows me to save whatever I type into
a textarea to an xml file:

<script>

function save()

{var forWriting = 2;

var dataFile = "C://note.xml";

var ts;var fso =new ActiveXObject

("Scripting.FileSystemObject");

ts=fso.OpenTextFile

(dataFile,forWriting,true);

ts.Write(data.xml);

ts.Close();}

</script>

</head>
<body>

<xml id="data" src="C://note.xml"></xml>

<textarea dataSrc="#data" dataFld="text"
cols="45" rows="5"></textarea>

<br>

<input type="button" value="saveIt" onclick="save()">

=========
note.xml:
=========
<?xml version="1.0"?>

<note>

<text>[MY TEXT IS SAVED HERE]</text>

</note>

=========

..............................................................................
This works for the above note.xml file.
It does not work for deeper nested fields. How can this be solved.
E.g.

=========
note.xml:
=========
<?xml version="1.0"?>

<note>
<level1>
<text>[MY TEXT IS SAVED HERE]</text>
</level1>
</note>

=========

Thanks in advance.