Jump to content

andriprasetiya

Recommended Posts

This is the most primitive example using just Javascript:

<textarea id="source"></textarea>
<button id="action">Run</button>
<iframe id="destination"></iframe>
<script>
  var source = document.getElementById("source");
  var destination = document.getElementById("destination");
  var button = document.getElementById("action");
  button.addEventListener("click", run, false);
  function run() {
    var d = destination.contentDocument;
    d.open();
    d.write(source.value);
    d.close();
  }
</script>

We have a textarea with the HTML code, an <iframe> where the HTML page is rendered and a button that copies the code from the textarea into the page. This will not look very pretty, so you should style it with CSS.

There's also a server-side way to do it, but it is more complicated and you need to learn a server-side language. The advantage of the server-side version is that it will work even on browsers that have Javascript disabled. The concept is simple: You have a form that has an iframe as a target, when the form is submitted, the HTML code that was sent to the server is printed directly onto the page inside the iframe.

 

Link to comment
Share on other sites

<textarea id="source"></textarea>
<button id="action">Run</button>
<iframe id="destination"></iframe>
<script>
  var source = document.getElementById("source");
  var destination = document.getElementById("destination");
  var button = document.getElementById("action");
  button.addEventListener("click", run, false);
  function run() {
    var d = destination.contentDocument;
    d.open();
    d.write(source.value);
    d.close();
  }
</script>

thanks

Link to comment
Share on other sites

this code is not working, please to tell me Where the location of his code error

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    

<style>

/*************************
 *    Global Style
 *************************/

*{
    margin:0;
    padding:0;
    font-family:"TheSans"calibri,arial,sans-serif;
    color:#333;
}
html{height:100%;}
.clearfix{clear:both;}

/*************************
 *    Header, Toolbar
 *************************/
#header{background:url("https://dl.dropbox.com/u/26808427/cdn/ariona/demo/text-editor/grid_noise.png")}
#logo{
    margin:10px 0 10px 10px;
    display: inline-block;
}
#toolbar{
    border-top:1px solid #e3e3e3;
    border-bottom:1px solid #e3e3e3;
    height:20px;
    padding:10px;
    box-shadow:0 5px 10px -7px rgba(0,0,0,.3);
    height:30px;
    background: -webkit-linear-gradient(top,#fff,#efefef);
}
#editor-toolbar,#preview-toolbar{
    width:50%;
    float:left;
}
#toolbar h2{
    font-weight:normal;
    text-shadow:0 1px 1px white;
    color:#888;
    line-height:35px;
    display: inline-block;
}
.icon{
    font-family:"web symbols";
    margin-right:20px;
    font-size:16px;
    position: relative;
    top:-2px;
    color:#888;
}

#toolbar ul{list-style:none;float:right;margin-right:20px;}
#toolbar ul li{float:left;}

.button{
    padding:5px 10px;
    border:1px solid #e3e3e3;
    border-radius:3px;
    cursor:pointer;
    background: -webkit-linear-gradient(top,#fff,#eee);
    box-shadow:0 1px 1px white;
}
#download{
    padding:0;width:100px;height:30px;
    border:1px solid #e3e3e3;
    border-radius:3px;
    cursor:pointer;
    box-shadow:0 1px 1px white;
    position: relative;
    z-index:2;
}
#download:after{
    content:"Download";
    position: absolute;
    top:0;left:0;
    width:100px;
    height:25px;
    padding-top:5px;
    text-align:center;
    background: -webkit-linear-gradient(top,#fff,#eee);
    z-index:-1;
}
/*************************
 *    IDE (EDITOR & PREVIEW)
 *************************/
#ide{
    position: absolute;
    padding-top:10px;
    top:150px;
    left:0;
    right:0;
    bottom:10px;
}
#editor, #preview{
    width:50%;
    float:left;
    height:100%;
    position:relative;
}
.container{
    height:100%;
    position: absolute;
    top:-10px;
    left:0;
    right:0;
    bottom:10px;
}
#editor .container{
    border-right:1px solid #e3e3e3;
    bottom:0;
}
.container textarea,.container iframe,.CodeMirror{
    height:100%;
    width:100%;
    resize:none;
    border:none;
    outline:none;
}
.container iframe{
    position:absolute;
}

/*************************
 *    CodeMirror Style Fix
 *************************/
.CodeMirror-scroll{height:100%  !important}
.CodeMirror-gutter,.CodeMirror-lines{line-height:20px;}

::-webkit-scrollbar {
    width : 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius        : 10px;
    background           : #A8DAEA;
}
::-webkit-slider-thumb element,
::-webkit-scrollbar-track {
    background           : white;
    -webkit-border-radius: 10px;
    border-radius        : 10px;
}

</style>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="codemirror.css">
<script type="text/javascript" src="codemirror.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="css.js"></script>
<script type="text/javascript" src="htmlmixed.js"></script>
<script type="text/javascript" src="xml.js"></script>
<script type="text/javascript" src="zen_codemirror.js"></script>
<script type="text/javascript" src="downloadify.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<meta charset="UTF-8">
    <title>Ariona Live Text Editor</title>
</head>
<body >
    <div id="header">
        <a href="http://www.ariona.net" id="logo"><img src="logo.png" alt=""></a>
        <div id="toolbar">
            <div id="editor-toolbar">
                <h2><span class="icon">H</span>Editor</h2>
                <ul>
                    <li id="download">Download</li>
                </ul>
            </div>
            <div id="preview-toolbar">
                <h2><span class="icon">L</span>Preview</h2>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="zen_codemirror.js"></script>
    <div id="ide">
        <div id="editor">
            <div class="container"><textarea name="" id="editor-area" cols="30" rows="10"></textarea></div>
        </div>
        <div id="preview">
            <div class="container"><iframe src="" frameborder="0"id="preview-area" ></iframe></div>
        </div>
    </div>
    <script type="text/javascript">
    var delay;
    var editor = CodeMirror.fromTextArea(document.getElementById('editor-area'), {
       mode: 'text/html',
    tabSize:8,
    lineNumbers:true,
    onChange: function() {
        clearTimeout(delay);
        delay = setTimeout(updatePreview, 0);
    },
    onKeyEvent: function() {
        return zen_editor.handleKeyEvent.apply(zen_editor, arguments);
    }
 });
      
    function updatePreview() {
        var previewFrame = document.getElementById('preview-area');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
    }
    setTimeout(updatePreview, 0);
Downloadify.create('download',{
    filename: "index.html",
    data: function(){ 
      return editor.getValue();
    },
    onComplete: function(){ 
      alert('Your file has been saved!'); 
    },
    onCancel: function(){ 
      alert('You have cancelled the saving of this file.');
    },
    onError: function(){ 
      alert('You must put something in the File Contents or there will be nothing to save!'); 
    },
    transparent: false,
    swf: 'downloadify.swf',
    downloadImage:'download.png',
    width: 100,
    height: 30,
    transparent: true,
    append: false
  });
</script>
</body>
</html>

Edited by andriprasetiya
Link to comment
Share on other sites

OK, you answered one out of three.  What exactly happens when you run it?  Are there error messages in the developer console?  How about in the network console, is there anything listed as not loading?

You'll find that you get better answers when you ask better questions.  If you make it easy for people to help you then people will be more likely to help you.

Link to comment
Share on other sites

58 minutes ago, justsomeguy said:

OK, you answered one out of three.  What exactly happens when you run it?  Are there error messages in the developer console?  How about in the network console, is there anything listed as not loading?

You'll find that you get better answers when you ask better questions.  If you make it easy for people to help you then people will be more likely to help you.

 

LOOK why the live preview isn't working, what the wrong of the javascript code?

 

 

Edited by andriprasetiya
Link to comment
Share on other sites

That's still an embedded codepen thing, not just a link to the site.  From what I can tell it looks like that onChange function does not get executed, if I add some console.log statements I don't see them.  I don't know why though, I don't know what that CodeMirror is.

Link to comment
Share on other sites

6 hours ago, justsomeguy said:

That's still an embedded codepen thing, not just a link to the site.  From what I can tell it looks like that onChange function does not get executed, if I add some console.log statements I don't see them.  I don't know why though, I don't know what that CodeMirror is.

coder mirror is same as text editor 

Link to comment
Share on other sites

I understand what the purpose is, but I don't know why that onChange function isn't running because I haven't looked up any documentation about how to use it, who makes it, looked for examples, etc.  I would suggest looking for some documentation about how to use it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...