PDA

View Full Version : iFrame and saving contents



kiths
05-30-2010, 11:25 PM
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

djr33
05-30-2010, 11:44 PM
Honestly, I think this is a very odd way to do this and you should just use a normal method. Though it is complex and the methods are not cross-browser compatible (and there aren't methods for many browsers) the standard way to do this is to use a text area and Javascript to manipulate it.

Using an iframe like that sounds very messy. For one thing, why would you use an iframe instead of a div or other element? Iframes come with security restrictions and are therefore not very useful when you're trying to use Javascript.

Regardless, in order to help you, you will need to give us a link to your page.

The only answer possible without that is that it may just not be possible to do this in Safari. Most (all?) rich text editors won't work in it, so it's not surprising if yours doesn't.

I have no real ideas about saving a file: this is really not the sort of thing that Javascript is designed to do: usually that's done with a server side language like PHP, not that in this case it's very relevant. I suppose you could use ajax to have the server dynamically generate a file, but then I'm not sure how you'd save it.


I'm not suggesting this is impossible (though it may be), but just that this doesn't really seem like the most logical way to do it. Post your code and someone will take a look, though.

Is there some reason you've taken this approach?


EDIT: I just did a quick google search and it appears that this is a known method. Perhaps it is the way to go, though it sounds to me like it'll be complex in many ways. As I said, post your code and hopefully someone more familiar with this than me can help you.
And here's a tutorial to reference:
http://www.geekpedia.com/tutorial198_Creating-a-Rich-Text-Editor-using-JavaScript.html
I'd suggest taking a look at more results from search engines: you can probably find references for what you're trying to do if you're having trouble with the overall ideas.

kiths
06-01-2010, 09:47 AM
This is my code:

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[i].length; j++)
{
buttonStr += prependButtonStr + KB[i][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);

}


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>
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>

</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>

kiths
06-01-2010, 09:49 AM
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