iframe and saving contents

Kiths · May 30, 2010

Hi,

I am building a rich text editor. I use Iframe as text area to type.
I created my own virtual keyboard to type letters.

IE: when I press on the virtual keyboard it displays the letter in the iframe.
Safari: It does not work.

I want to get this working in safari.

Also, I am trying to save this text entered in the iframe into a file. I am unable to do this. In IE, I am not able to retrieve the content I type.

Can anyone suggest a way to do this?

Thanks,
K

vacunita · May 30, 2010

Without seeing any code its hard to say. At best I could guess your JS is browser specific. At worst I could assume you may have some unseen errors.

But at the end I'd be just guessing.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Kiths · May 30, 2010

So I have an input box ( Name)
Then I have a category drop down box.
Then I have a text area (iframe)
Below that I have a virtual keyboard created; when I click on button it appears in iframe.

So as I said, it works in IE but not in Safari and I would like to know how to save iframe contents into a file.

CSS:

openPage.css

body
{
font-size: 15px;
font-weight: normal;
font-family: calibri;
background-color:black;
color:yellow;

}

.style1 {
margin-top: 11px;
margin-left: 11px;
}

#iTextArea {
width:200px;
height:200px;
background-color:white;
border:thick;
border-color:black;
border-bottom-color:gray;
overflow:auto;
text-wrap:break-word;
font-family:Arial, Helvetica, sans-serif;
color:black;
display:inline;
}

#dToolBar{
width:220px;
height:100px;
}

#dToolBar input{
width:20px;

}

**********************************************

<html>
<head>
<title> New note page </title>
<link rel="stylesheet" href="openPage.css" type="text/css" >
<script type="text/javascript">

initialized = false;

function Init()
{

iTextArea.document.designMode = 'On';
// var dDiv= this.document.getElementById("iTextArea");
// dDiv.contentEditable = true;
createKeyboard();

}

//var frmvalidator = new Validator("myForm");
//frmvalidator.addValidation("Name","maxlen=20","Max length for Name is 20");

function keyValue(val)
{

if(!initialized)
{
tFrame = document.getElementById("iTextArea");
if(tFrame.contentDocument)
{
// Firefox, Opera
doc = tFrame.contentDocument;
}
else if(tFrame.contentWindow)
{
// Internet Explorer
doc = tFrame.contentWindow.document;
}

else if(tFrame.document)
{
// Others?
doc = tFrame.document;
}
doc.open();
initialized = true;
}

doc.write(val);

if(!initialized)
{
doc.close();
}

}

function boldTxt()
{
iTextArea.document.execCommand('bold', false, null);
}

function italicTxt()
{
iTextArea.document.execCommand('italic', false, null);
}

function underlineTxt()
{
iTextArea.document.execCommand('underline', false, null);
}

function insertUnorderedList()
{
iTextArea.document.execCommand('insertunorderedlist', false, null);
}

function insertOrderedList()
{
iTextArea.document.execCommand('insertorderedlist', false, null);
}

function justifyFull()
{
iTextArea.document.execCommand('justifyfull', false, null);
}

function txtFont(txtFont)
{
if(txtFont !='')
iTextArea.document.execCommand('fontname', false, txtFont);
}

function txtSize(txtSize)
{
if(txtSize !='')
iTextArea.document.execCommand('fontsize', false, txtSize);
}

function cancelButton()
{
onclick="history.go(-1)";
}

KB = [ // US Standard Keyboard
[["`", "~"], ["1", "!"], ["2", "@"], ["3", "#"], ["4", "$"], ["5", "%"], ["6", "^"], ["7", "&"], ["8", "*"], ["9", "("], ["0", ")"], ["-", "_"], ["=", "+"], ["Bksp", "Bksp"]],
[["Tab", "Tab"], ["q", "Q"], ["w", "W"], ["e", "E"], ["r", "R"], ["t", "T"], ["y", "Y"], ["u", "U"], ["i", "I"], ["o", "O"], ["p", "P"], ["[", "{"], ["]", "}"], ["\\", "|"]],
[["Caps", "Caps"], ["a", "A"], ["s", "S"], ["d", "D"], ["f", "F"], ["g", "G"], ["h", "H"], ["j", "J"], ["k", "K"], ["l", "L"], [";", ":"], ["'", '"'], ["Enter", "Enter"]],
[["Shift", "Shift"], ["z", "Z"], ["x", "X"], ["c", "C"], ["v", "V"], ["b", "B"], ["n", "N"], ["m", "M"], [",", "<"], [".", ">"], ["/", "?"], ["Styles", "Styles"]],
[[" ", " "]]
];

//font = [ // US Standard Keyboard
// ["B", "makeBold()"],

function createKeyboard()
{
// create an array
//create a div.. min max for kb or
// creata a div inside html and insert all buttons to it
// <input type="button" onClick="typeM(this.value)" value="q">
var prependButtonStr = "<input type='button' onClick='keyValue(this.value)' value='";
var appendButtonStr = "'/>";
// bold.// shift/// caps// font
var buttonStr ="" ;//= prependButtonStr + KB[0][4][1] + appendButtonStr;
// alert(buttonStr);

KB0 =KB[0];
for(i=0; i<KB.length; i++)
{
for(j=0; j<KB.length; j++)
{
buttonStr += prependButtonStr + KB[j][0] + appendButtonStr;
}
}

var dDiv= this.document.getElementById("dToolBar");
dDiv.innerHTML += buttonStr;
// alert(buttonStr.value);
// iTextArea.document.write(buttonStr.value);
}

function toggleDisplay(id, divID, msg){
var dDiv= this.document.getElementById("iTextArea");

if (divID.style.display != "none")
{
divID.style.display="none";
id.value="Keyboard";
dDiv.style.height="300px";
}
else
{
divID.style.display="block";
id.value="Preview";
dDiv.style.height="200px";
}
}

function WriteToFile()
{
var str ="";
str = "<category>" + document.getElementById("Category ").value + "<category>";
str += "<name>" + document.getElementById("name").value + "<name>";
// str += " "+ document.getElementById("iTextArea").innerHTML;
alert(str);

//document.execCommand("SaveAs",false,str);
document.execCommand("SaveAs");

/*
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.CreateTextFile("c:\\Test.txt", true);

fh.WriteLine("Some text goes here...");
fh.Close();
// after saving go back the previous screen
*/ history.go(-1);

}

// works only in IE..
function m()
{
iTextArea.document.write("m");
}

function OpenFile() {
document.getElementById('iTextArea').src= 'file:///' + document.newNote.fileBrowse.value;

//window.location= 'file:///' + document.newNote.fileBrowse.value;
}
</script>
</head>

<body onLoad="Init()">
<form id="newNote" action="" name="myForm" method="get">

<div class="cHeading" id="dHeading" >
<img id ="dBack"src="Images/CancelButton.jpg" onclick="history.go(-1)" />
<B><span id="dTitle" align="center" > iNOTE App </span></B>
<img id="dTitleIcon" src="Images/NotesIcon.png" alt="App Icon" width="20" height="20" />
<img id="dDone"src=Images/DoneButton.jpg onclick="WriteToFile()" />
</div>

<div id="dContent">
<div id="dFileInfo" >
CATEGORY : <select id="Category " style="width: 117px" >
<option>Category</option>
<option value="Meetings">Meetings</option>
<option value="Grocery">Grocery</option>
<option value="Travel">Travel</option>
<option value="Car">Car</option>
<option value="Other">Other</option>
</select>
 </br>
NAME :
<input id ="name"type ="text" name="text" value="" class="keyboardInput" style="width: 134px"></br>
<input id="Preview" type='button' onClick='toggleDisplay(this, dToolBar, "Show Keyboard")' value='Preview'></br>
<input type="button" value="M" onclick="m()">
</div>
<div>
<input type=file name="fileBrowse">
<input type=button onClick="OpenFile()" value="Open File">
</div>
<iframe id="iTextArea" >

</iframe >

</div>

<div id="dToolBar" >
</div>
</form>
</body>
</html>

vacunita · May 31, 2010

There's a basic error which is probably causing all your problems.

You are referencing your iTextArea iframe directly like iTextArea.document.write("m");
For most browsers this tells them to look for an object who's name is iTextArea.

Since your iframe has no name Safari, Firefox for that matter does it as well, and likely any other browser that is not IE, cannot find your iTextArea.

IE wrongfully uses the ID as the name and makes it work. So for your first fix, give your iTextArea a name.

To save the contents of the iframe, I would reference its innerHTML property.

Code:

iTextArea.document.body.innerHTML

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Kiths · Jun 1, 2010

Thanks for your suggestion.

iTextArea.document.body.innerHTML ==> this worked in IE but not in safari.

I need another suggestion. This is what I am doing:
1. Using rich text editor, I am creating notes. So in a html page(NEW MESSAGE), I have text box and rick text editor. I give a title and under that I create notes.
2. Storing them as a file.
3. I want to display the stored contents with its title as a link(like email INBOX appearance) once clicked on that title, it must show the notes created with editable option.

Is it possible to implement it using Javascript, CSS and html?
If yes, can you suggest a way to do it.

My idea was this but not sure if its feasible.
1. clicking on the title, it must open a html page which looks like 'new message' html. Then read values from file and populate it in its respective areas.

Kindly provide me suggestion.

Thanks,
K

vacunita · Jun 1, 2010

You are correct, its not working in Safari. I can't get it to work.

1. Perhaps instead of trying to re-invent the wheel, you could try using one of the many rich text editors already out there.

CKeditor is pretty good.

http://ckeditor.com/

2. Where exactly were you thinking of storing them? Javascript runs only on the client, but even then attempting to access the client's hard drive from the browser will likely produce security warnings at the very least.
You could store them in your server, under profile folders for your users. This brings us to question #3

3. Storing them, and retrieving them from the server will of course require more than Javascript. A Server Side language that can read through your dir4ectpries and list your messages is required.

Feasible, yes, with only Javascript not so much.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Kiths · Jun 1, 2010

Thanks for the suggestion.

I am trying to do a mobile app. So trying to create a rich text editor with minimal features.

I would be storing the files locally. I am not storing it in a DB.

Languages I use: CSS, html and Javascript.

So my question was, how would you pull the data from file and display them in the editor that I created?

Could you send me some samples or references?

Thanks.

vacunita · Jun 1, 2010

As I said, storing on the clients machine will prompt security warnings at the very least.

However if you really want to try you'll be looking at Activex constructs:

Here's one for reading them:

http://timstall.dotnetdevelopersjournal.com/using_javascript_to_read_a_clientside_file.htm

However there's no way to control where to write them, As you will be forced to have the browser download them, and the user can then choose where to store them.

This of course assumes the browser are accepting activex, otherwise you'll code will issue the security warning and be unable to go any further.

I gather unless you have complete control of the client machines like in an intranet environment, it will be very difficult to get it working seamlessly.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

iframe and saving contents

Kiths

Programmer

vacunita

Programmer

Kiths

Programmer

vacunita

Programmer

Kiths

Programmer

vacunita

Programmer

Kiths

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor