Search the Community

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!