Excuse me All-

I am developing a web application. In which I want to embed try it editor like w3schools has. Mainly this editor will be handling HTML, CSS edits etc.

The question is, how to create make try it editor which will fulfill my above requirements. If someone has code please share it to make my life easy smile

Cheers!
ALexander JB

Excuse me All- I am developing a web application. In which I want to embed try it editor like w3schools has. Mainly this editor will be handling HTML, CSS edits etc. The question is, how to create make try it editor which will fulfill my above requirements. If someone has code please share it to make my life easy :) Cheers! **ALexander JB**

Hi,
I am attaching full code to Try It Now editor for HTML, CSS and Javascript. Save this file code with .html extension and then check its demo.

Hope it will resolve your issue.

Demo Screenshot:

57b60a3441dd7.jpg

Thanks

<!doctype html>
<!--Bhaskar Tiwari-->
<html>
<head>
    <meta charset="utf-8">
    <title>Web Editor</title>
</head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="tag">HTML (Body)</div>
                    <div id="html" class="content" contenteditable></div>
                </td>
                <td>
                    <div class="tag">CSS</div>
                    <div id="css" class="content" contenteditable></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="tag">JavaScript</div>
                    <div id="js" class="content" contenteditable></div>
                </td>
                <td>
                    <div class="tag">Output</div>
                    <iframe id="output"></iframe>
                </td>
            </tr>
        </table>
    </body>
</html>
<script>
window.onload=function(){
    var html=document.getElementById("html"),
        css=document.getElementById("css"),
        js=document.getElementById("js"),
        output=document.getElementById("output"),
        working=false,
        fill=function(){
            if(working){
                return false;
            }
            working=true;
            var document=output.contentDocument,
                style=document.createElement("style"),
                script=document.createElement("script");
            document.body.innerHTML=html.textContent;
            style.innerHTML=css.textContent.replace(/\s/g,"");
            script.innerHTML=js.textContent;
            document.body.appendChild(style);
            document.body.appendChild(script);
            working=false;
        };
    html.onkeyup=fill;
    css.onkeyup=fill;
    js.onkeyup=fill;
}
</script>
<style>
html,body,table,div.content,iframe{
    border:0;
    height:100%;
    margin:0;
    padding:0;
    width:100%;
}
td{
    border:2px solid black;
    height:50%;
    padding:25px 5px 5px 5px;
    position:relative;
    vertical-align:top;
    width:50%;
}
div.tag{
    position:absolute;
    right:5px;
    top:5px;
}
</style>

smile Enjoy smile

Hi, I am attaching full code to Try It Now editor for HTML, CSS and Javascript. Save this file code with .html extension and then check its demo. Hope it will resolve your issue. **Demo Screenshot:** ![57b60a3441dd7.jpg](serve/attachment&path=57b60a3441dd7.jpg) Thanks ```` <!doctype html> <!--Bhaskar Tiwari--> <html> <head> <meta charset="utf-8"> <title>Web Editor</title> </head> <body> <table> <tr> <td> <div class="tag">HTML (Body)</div> <div id="html" class="content" contenteditable></div> </td> <td> <div class="tag">CSS</div> <div id="css" class="content" contenteditable></div> </td> </tr> <tr> <td> <div class="tag">JavaScript</div> <div id="js" class="content" contenteditable></div> </td> <td> <div class="tag">Output</div> <iframe id="output"></iframe> </td> </tr> </table> </body> </html> <script> window.onload=function(){ var html=document.getElementById("html"), css=document.getElementById("css"), js=document.getElementById("js"), output=document.getElementById("output"), working=false, fill=function(){ if(working){ return false; } working=true; var document=output.contentDocument, style=document.createElement("style"), script=document.createElement("script"); document.body.innerHTML=html.textContent; style.innerHTML=css.textContent.replace(/\s/g,""); script.innerHTML=js.textContent; document.body.appendChild(style); document.body.appendChild(script); working=false; }; html.onkeyup=fill; css.onkeyup=fill; js.onkeyup=fill; } </script> <style> html,body,table,div.content,iframe{ border:0; height:100%; margin:0; padding:0; width:100%; } td{ border:2px solid black; height:50%; padding:25px 5px 5px 5px; position:relative; vertical-align:top; width:50%; } div.tag{ position:absolute; right:5px; top:5px; } </style> ```` :D Enjoy :D

Co Founder of Daungy - I am a software developer, quick learner and entrepreneur. I believe anything is possible with dedication. I am working hard for my aim of #NoMoreChildLabor

edited Aug 18 '16 at 8:20 pm
63
views
1
replies
2
followers
live preview
enter atleast 10 characters
WARNING: You mentioned %MENTIONS%, but they cannot see this message and will not be notified
Saving...
Saved
All posts under this topic will be deleted ?
Pending draft ... Click to resume editing
Discard draft