Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript IFrame
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 10:54am
Comments
enhzflep at 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.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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]
 

 

<!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>
  Permalink  
Comments
bunnyali2013 at 29-Oct-12 5:32am
   
Thank you for responding... The simple text editor is working fine until now (I hope so), however, what if I place the text editor in a div through AJAX? I think it will not cause any conflict right? Because it will be a different page...
 
Moreover, do you know if execcommand works with textarea? In IFrames it works but textarea it seems not
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I will try your solution man thank..and then I will come back to you...
  Permalink  
Comments
enhzflep at 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 at 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 at 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 at 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!

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



Advertise | Privacy | Mobile
Web04 | 2.8.1411022.1 | Last Updated 29 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100