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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

iframe and saving contents

Status
Not open for further replies.
Kiths

Kiths

Programmer
Nov 4, 2009
4
US

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
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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>
<!--img id="dFolderIcon" src="Images/NotesIcon.png" alt="App Icon" width="20" height="20" />
<input id="category"type ="text" name="text" value="" onfocusout="" class="keyboardInput">
<img id="dFolderIcon" src="Images/NotesIcon.png" alt="App Icon" width="20" height="20" /--> </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>
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.

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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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:

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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
296
coldbohemia
coldbohemia
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
288
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
318
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
106
ggriffit
ggriffit
leifoet
  • Locked
  • Question
How to combine JS and ASP ?
Replies
5
Views
184
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top