Results 1 to 3 of 3

Thread: HTML Pencil: an online HTML editor with real-time preview

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default HTML Pencil: an online HTML editor with real-time preview

    HTML Pencil is an online HTML editor created for modern browsers.

    Please review the source code and provide feedback:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="An online HTML editor with real-time preview">
        <title>HTML Pencil</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <base target="_blank">
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            body {
                display: -webkit-flex;
                /* WebKit prefixes are added to support Safari. */
                display: flex;
                -webkit-flex-direction: column;
                flex-direction: column;
            }
            header,
            .shown {
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;
                padding: 5px;
            }
            header {
                background: linear-gradient(#FFF, #CCC);
            }
            #fileSaver,
            [type="button"],
            #fileChooser,
            label,
            span {
                font: bold 11px arial;
                color: #333;
            }
            #selector,
            #resizer,
            #viewsToggle,
            [title$="Twitter"] {
                margin-right: 5px;
                margin-left: 5px;
            }
            #fileSaver {
                margin-right: 5px;
            }
            #fileChooser,
            [title$="Facebook"] {
                margin-right: auto;
            }
            #resizer {
                margin-top: 0;
                margin-bottom: 0;
                padding: 0;
            }
            /* to remove the extra margins and padding in some browsers, e.g. IE11 */
            span {
                width: 35px;
            }
            #footerToggle {
                margin-right: 0;
                margin-left: 5px;
                border: 0;
                padding: 0;
                background: transparent;
            }
            main {
                display: -webkit-flex;
                display: flex;
                -webkit-flex: 1;
                flex: 1;
            }
            .horizontal {
                -webkit-flex-direction: column;
                flex-direction: column;
            }
            main * {
                margin: 0;
                -webkit-flex: 50;
                flex: 50;
                background: #FFF;
                min-height: 100%;
                /* to ensure that the flex items are stretched to use available space; IE11, for example, doesn't stretch the iframe. */
            }
            .horizontal * {
                min-width: 100%;
                min-height: 0;
                /* to get back to the initial value */
            }
            textarea {
                box-sizing: border-box;
                border: 0;
                outline: 0;
                padding: 5px;
                resize: none;
                overflow: auto;
                /* to remove the default scrollbar in IE11 */
            }
            .minSize {
                padding: 0;
            }
            iframe {
                border: solid #CCC;
                border-width: 0 0 0 5px;
                padding: 0;
            }
            .horizontal iframe {
                border-width: 5px 0 0;
            }
            .shown {
                background: linear-gradient(#CCC, #FFF);
            }
            img {
                display: block;
                width: 20px;
                height: 20px;
            }
            address,
            address a {
                color: #333;
            }
        </style>
    </head>
    
    <body>
        <header>
            <a download="myFile.html" title="Save as..." id="fileSaver">Save as...</a>
            <input type="button" value="Reset" id="resetter">
            <input type="button" value="Select" id="selector">
            <input type="file" accept="text/html" id="fileChooser">
            <label for="resizer">Text field size</label>
            <input type="range" id="resizer">
            <span id="indicator">50%</span> 
            <!-- The semantic element to use instead of span is output. But it's not supported in IE11. -->
            <label for="viewsToggle">Horizontal view</label>
            <input type="checkbox" id="viewsToggle">
            <input type="button" value="▲" title="Show footer" id="footerToggle">
        </header>
        <main id="main">
            <textarea spellcheck="false" id="editor"><!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>HTML Document Template</title>
      </head>
      <body>
        <p>Hello, world!</p>
      </body>
    </html></textarea>
            <iframe id="viewer"></iframe>
        </main>
        <footer hidden id="footer">
            <a href="https://plus.google.com/share?url=http%3A%2F%2Fhtmlpencil.appspot.com%2F" title="Share on Google+">
                <img src="images/google+.png" alt="Google+">
            </a>
            <a href="https://twitter.com/share?text=HTML%20Pencil&amp;url=http%3A%2F%2Fhtmlpencil.appspot.com%2F" title="Share on Twitter">
                <img src="images/twitter.png" alt="Twitter">
            </a>
            <a href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fhtmlpencil.appspot.com%2F" title="Share on Facebook">
                <img src="images/facebook.png" alt="Facebook">
            </a>
            <address><a href="feedback.html" title="Feedback">Feedback</a> / Created by <a href="https://plus.google.com/+MortezaMirmojarabian?rel=author" title="Google+ profile" rel="author">Mori</a></address>
        </footer>
        <script>
            var editor = document.getElementById('editor'),
                viewer = document.getElementById('viewer'),
                fileChooser = document.getElementById('fileChooser'),
                resizer = document.getElementById('resizer');
    
            function preview() {
                try {
                    var viewerDoc = viewer.contentDocument;
                    viewerDoc.open();
                    viewerDoc.write(editor.value);
                    viewerDoc.close();
                } catch (e) { // in case of iframe redirection to a different origin
                    viewer.src = 'about:blank';
                    setTimeout(preview, 4); // minimum delay
                }
            }
            preview();
            editor.oninput = preview;
    
            function createURL() {
                var blob = new Blob([editor.value], {
                    type: 'text/html'
                });
                document.getElementById('fileSaver').href = window.URL.createObjectURL(blob);
            }
            createURL();
            editor.onchange = createURL;
            fileChooser.onclick = function () { // to empty the fileList so you can rechoose the same file
                this.value = '';
            };
            fileChooser.onchange = function () {
                var file = this.files[0],
                    reader = new FileReader();
                if (file) { // to ensure that there's a file to read so IE11 doesn't run this function on clicking fileChooser before you choose a file
                    reader.readAsText(file);
                    reader.onload = function () {
                        editor.value = this.result;
                        preview();
                        createURL();
                    };
                }
            };
            document.getElementById('viewsToggle').onchange = function () {
                document.getElementById('main').classList.toggle('horizontal');
            };
            resizer.oninput = resizer.onchange = function () { // The onchange property is added to support IE11.
                var resizerVal = this.value;
                editor.style.webkitFlex = resizerVal;
                editor.style.flex = resizerVal;
                viewer.style.webkitFlex = 100 - resizerVal;
                viewer.style.flex = 100 - resizerVal;
                document.getElementById('indicator').textContent = resizerVal + '%';
                if (resizerVal == 0) {
                    editor.className = 'minSize';
                } else {
                    editor.className = '';
                }
            };
            document.getElementById('selector').onclick = function () {
                editor.select();
            };
            document.getElementById('resetter').onclick = function () {
                if (!editor.value || editor.value != editor.defaultValue && confirm('Are you sure?')) {
                    editor.value = editor.defaultValue;
                    preview();
                    createURL();
                }
            };
            document.getElementById('footerToggle').onclick = function () {
                var footerClasses = document.getElementById('footer').classList;
                footerClasses.toggle('shown');
                if (footerClasses.length) {
                    this.value = '▼';
                    this.title = 'Hide footer';
                } else {
                    this.value = '▲';
                    this.title = 'Show footer';
                }
            };
        </script>
    </body>
    
    </html>


    Acknowledgement

    Many thanks to jscheuer1 who's always been a great help!

  2. The Following User Says Thank You to Rain Lover For This Useful Post:

    vutaikt (07-25-2014)

  3. #2
    Join Date
    Jul 2014
    Posts
    0
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank Rain Lover I'm looking for this html the code

  4. #3
    Join Date
    Jul 2014
    Location
    Hai Phong, Viet Nam
    Posts
    8
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    easy, working perfect. tks

Similar Threads

  1. html editor div run html
    By keyboard in forum HTML
    Replies: 0
    Last Post: 02-08-2012, 10:50 PM
  2. What is a good online or offline HTML editor?
    By terenkleon in forum Computer hardware and software
    Replies: 3
    Last Post: 01-08-2012, 12:45 AM
  3. Online RSS XML creator/editor (HTML form GUI, php4, flat file) $15-$20?
    By Beverleyh in forum General Paid Work Requests
    Replies: 1
    Last Post: 02-20-2010, 08:32 AM
  4. HTML Editor
    By webangel in forum HTML
    Replies: 11
    Last Post: 06-22-2006, 12:18 AM
  5. Preview HTML Window
    By syn0psis in forum JavaScript
    Replies: 4
    Last Post: 11-28-2005, 11:51 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •