Onkeyup With Iframe In Javascript

[bunnyali2013]

I badly need help... I am making a basic text editor of my own. I have an Iframe where users can type their code in it.

 

Below the Iframe, there is a div which is hidden. This div normally will capture what is written in the IFrame, in other words, every HTML and CSS codes the user will type in the Iframe above, it will take action "onkeyup" in the div below.

 

Now the div below, as it is hidden, it will only be previewed if the user click on a button. As a result, this will pop up in a JQuery dialog box. In short, the div will be pop up through a dialog box of JQuery UI to show the user the result he/she is coding.

 

I know we can do this in textarea, it is just a matter of "value" but I am not getting it with Iframe. I made this:

 

function pcode () {
   	var frame = document.getElementById('code').value;
   	var div = document.getElementById('preview');
   	divout.innerHTML = frameout;	
   }

 

The above code, is just to grab the value written in the Iframe, then preview it in the div below on onkeyup. Now, the code to preview the div in a JQuery UI dialog box once the user clicks on a button:

 

function preview() {
   $('#preview').dialog({modal:true, height:600, width:1280, title:"Preview", show:"slow", hide:"fast"});
   }
   $('#previewbutton').click(function() {
   	preview();
   });

 

The problem is nothing is working. If you have not understood the issue, you can ask me some questions, I am myself stressed with this. Everything would be OK if it was a textarea as I did this before with textarea and was fine.

 

In the same line of thought, I have been advised to use IFrame when coding a text editor, because if I do this with a textarea, the user's code can have conflicts with my own CSS codes of the page. I want to know if there a possibility to use textarea alone instead of Iframe, in case there is no solution, but the user CSS and HTML codes must not have conflicts with my own CSS codes. For example, if I have declared a class or ID or made all Heading 1 blue for instance, and if the user is typing Heading 1 tag in a textarea, the CSS codes of mine will apply to the user as well, so I don't want this.

 

Thank!

[codefossa]

You shouldn't have any problems adding a textarea unless you're CSS is coded poorly and you set style for all textareas and don't want it, then you will have to change it. You can't get the HTML inside of an iframe with JS. This would cause a huge security problem if you could.

[bunnyali2013]

It will still affect man.. Moreover, I have been asked to place a textarea then produce the result in an IFrame. I will try this solution...

[codefossa]

You should never use an iframe for a layout. You can add a regular textarea if you write the CSS correctly.

[bunnyali2013]

I am planning to use a DIV lol, because textarea doesa not work with Javascript execcommand

[Christian F.]

Javascript does not care a fig about the HTML structure, or where its data comes from. For JS a div or a textarea is the same, so if you're having troubles I'm almost positive it's your code which is the problem.

If you post it here, we can help you to look at it, if you're not able to figure it out on your own. Do remember to provide a complete and accurate description of the problem though, so that we know what to look for.