OnKeyUp with IFrame in JavaScript

Question

4.00/5 (1 vote)

See more:

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!

Posted 28-Oct-12 9:54am

bunnyali2013

Add a Solution

Comments

enhzflep 28-Oct-12 16:28pm

Just a query, wouldn't it be better to have the user type into a textarea on the current page.
You could then take the text from that textarea and use it to populate an iframe.That makes your keyup event a no-brainer to catch. You can then take the user entered text and set he innerHTML of the iframe with that.

Perhaps I don't understand your constraints and motivations. It just seems like you're going about it back to front.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

enhzflep · Answer 1 · 2012-10-28T23:26:00

Okay this will do what I understand to be the bread-and-butter of the task at hand.
I do notice that if I try to linkn to a script or a css etc - in fact any file-based resource from the iframe, that I have to give it a fully qualified path. Running from localhost and leaving a link like <img src='img/girl.png'/> wasn't loading.
That should be found at localhost/enhzflep/img/girl.png - since I was already running the file from within my folder.

When I checked the console in Chrome, it told me that it couldn't load a resource - the image, and that the failed download url was something crazy - [chrome-devtools://devtools/img/girl.png]

HTML

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

function mInit()
{
    var src = byId('src');

    src.addEventListener('keydown', inputChange, false);
    src.addEventListener('keyup', inputChange, false);
    src.addEventListener('blur', inputChange, false);
    src.addEventListener('change', inputChange, false);
    inputChange();  // process any thing that's written in the text area when the page loads.
}

function inputChange()
{
    var tgt = byId('tgt');
    newText = byId('src').value;
    byId('tgt').src = "data:text/html;charset=utf-8," + escape(newText);
}

window.addEventListener('load', mInit, false);

</script>
<style>
body
{
    text-align: center;
}
iframe, textarea
{
    width: 45%;
    height: 300px;
}
.square
{
   width: 100px;
   height: 100px;
}
.red
{
   background-color: red;
}
</style>
</head>
<body>
<!-- The text inside the textArea starts here --!>
    <textarea id='src'><html>
<head>
<style>
.square
{
 width: 100px;
 height: 100px;
 border-radius: 50%; /* it sure aint square any more! */
}
.red
{
 background-color: blue;
}
</style>
</head>
<body>
<div class='red square'>This is red??</div>
</body>
</html>
<!-- The text inside the text area ends here -->
</textarea> <iframe id='tgt'></iframe>
    <div class='red square'>This is Red</div>
</body>
</html>

bunnyali2013 · Answer 2 · 2012-10-28T19:53:00

Solution 1

I will try your solution man thank..and then I will come back to you...

Posted 28-Oct-12 19:53pm

bunnyali2013

Comments

enhzflep 29-Oct-12 5:12am

Just a tip, bunnyali2013 - you should hit the "Have a Question or Comment?" button to post a comment like this. For two reasons (a)it's how the forum was intended to be used, (b) I would get the email notification, rather than you getting one that says a solution has been posted to your question.. Anyway, see new answer for a rudimentary throw-together..

bunnyali2013 29-Oct-12 5:17am

ok thank you im new here.. i hope you got the email now... by the way, i decided to 1 textarea and a div. the iframe is causing conflicts.. can you tell me if execcomand in javascript works with textarea? i searched but did not find any proper answer.

enhzflep 29-Oct-12 5:34am

:grins: Welcome to the madhouse! Nope, I should've mentioned that - it's (in my opinion, bad design)

To reply to a question or an answer, there's the "Have a Question or Comment?" button, yet for comments you have to hit the [<- Reply] icon on the right-hand side of the comment. Confused? Nevermind. :)

Yeah, as I mentioned in my answer below, there were some issues with the iframe. But you have them with either method. I guess its a matter of identifying your target audience or use, then deciding from there what to do next.

Sorry, I don't understand what you mean here: " can you tell me if execcomand in javascript works with textarea?" Could you put it another way, or re-phrase it?

bunnyali2013 29-Oct-12 5:41am

Now I think the reply should be good.. Blame codeproject for their bad design LOLLLLLLLLLLLLLLLLL.. Anyway, I got an asnwer, you cannot use "execcomand" in textarea. Execcomand is the functions to use WYSIWYG in JavaScript, like when coding a text editor. But I prefer to make my rap editor with no WYSIWYG functionality. Who ares about this today? No one!