Skip to content

Instantly share code, notes, and snippets.

@mikomatic

mikomatic/notepad2.html

Created July 10, 2013 14:48
Show Gist options
  • Save mikomatic/5966936 to your computer and use it in GitHub Desktop.
Save mikomatic/5966936 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mikomatic created this gist Jul 10, 2013.
    242 changes: 242 additions & 0 deletions notepad2.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,242 @@
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8" />
    <meta name="author" content="Miguel O.">
    <meta name="description" content="A simple web notepad">
    <title>Custom Editor</title>
    <link rel="shortcut icon" href="http://elmike.net/favicon.ico"/>

    <style type="text/css">
    .e{
    position:absolute;
    top:20px;
    right:50%;
    bottom:20px;
    left:0;
    }
    .c{
    position:absolute;
    overflow:auto;
    top:20px;
    right:0;
    bottom:20px;
    left:50%;
    background:white;
    }
    .topbar{
    background: none repeat scroll 0% 0% black;
    padding: 0px;
    margin: 0px;
    font: 13px Arial,sans-serif;
    position: absolute;
    top: 0px;
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 20px;
    }
    .savebtn,.clearbtn {
    background: none repeat scroll 0% 0% black;
    padding: 0px;
    margin: 0px;
    margin: 0;
    font: 13px Arial, sans-serif;
    text-align: center;
    }

    .bottombar {
    background: none repeat scroll 0% 0% black;
    padding: 0px;
    margin: 0px;
    font: 13px Arial,sans-serif;
    position: absolute;
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 20px;
    }
    </style>
    </head>
    <div class="topbar">
    <button class="savebtn" style="border:none; color:grey;" onClick="saveToFile()">Save as...</button>|
    <button class="clearbtn" style="border:none; color:grey;" onClick="emptyEditor()">Clear Editor</button>|
    <input type="file" id="files" name="file" />
    <!--
    For other languages, you can add values like in the <select> mode element below
    eg: python, c_cpp, scala, etc... from more examples check out https://github.com/ajaxorg/ace-builds/tree/master/src-min-noconflict. The supported languages
    are mode-mylanguage.js
    ----------------------------------------------------------------------------------------
    For other languages, you can add values like in the <select> theme element below
    eg: eclipse, dreamweaver, github, for more example checkout https://github.com/ajaxorg/ace/tree/master/lib/ace/theme
    -------------------------------------------------
    <!-- Press Ctrl+M or Command+M to convert your markdown code to html :) -->
    <!-- Press Ctrl+L or Command+L to hide the markdown convertion element :) -->
    <span style="border:none; color:grey;" class="theme">Theme:
    <select id="theme" onchange="changeTheme(this)" size="1">
    <option value="chrome">Chrome</option>
    <option value="solarized_dark">Solarized-dark</option>
    <option value="solarized_light">Solarized-light</option>
    <option selected value="twilight">Twilight</option>
    <option value="monokai">Monokai</option>
    </select>
    </span>
    <span style="border:none; color:grey;" class="mode">Syntax:
    <select id="mode" onchange="changeMode(this)" size="1">
    <option value="coffee">CoffeeScript</option>
    <option value="css">CSS</option>
    <option value="curly">Curly</option>
    <option value="html">HTML</option>
    <option value="java">Java</option>
    <option value="javascript">JavaScript</option>
    <option value="json">JSON</option>
    <option selected value="markdown">Markdown</option>
    <option value="powershell">Powershell</option>
    <option value="python">Python</option>
    <option value="text">Text</option>
    <option value="textile">Textile</option>
    <option value="xml">XML</option>
    </select>
    </span>
    </div>
    <div class="e" id="editor"></div>
    <div class="c"></div>
    <div style="border:none; color:grey;" class="bottombar">Custom Web Editor - Inspired by <a style="color:crimson;" href="http://tsi.github.com/acelet/">Acelet</a> and <a style="color:crimson;" href="https://gist.github.com/jdkanani/4670615">this code</a> - Powered by <a style="color:crimson;" href="http://ace.ajax.org" target="_blank">Ace</a> and <a style="color:crimson;" href="https://github.com/coreyti/showdown"
    target="_blank">Showdown</a>
    </div>
    <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"
    type="text/javascript" charset="utf-8"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
    <script>
    function saveToFile() {
    window.location = "data:application/octet-stream," + escape(e.getSession().getValue());
    }

    var isShowingResult = false;
    function showResult(e) {
    if(!isShowingResult){
    consoleEl.style.display='block';
    consoleEl.style.left='50%';
    editorEl.style.right='50%';
    consoleEl.innerHTML = e;
    isShowingResult=true;
    }else{
    hideResult();
    }
    }

    function hideResult() {
    consoleEl.style.display='none';
    editorEl.style.right='0';
    isShowingResult = false;
    }

    var e = ace.edit("editor");
    e.setTheme("ace/theme/monokai");
    e.getSession().setMode("ace/mode/markdown");
    var editorEl = document.getElementsByClassName("e")[0];
    var consoleEl = document.getElementsByClassName("c")[0];
    var converter = new Showdown.converter;
    e.commands.addCommand({
    name: "markdown",
    bindKey: {
    win: "Ctrl-M",
    mac: "Command-M"
    },
    exec: function (t) {
    var n = e.getSession().getMode().$id;
    if (n == "ace/mode/markdown") {
    showResult(converter.makeHtml(t.getValue()))
    }
    },
    readOnly: true
    });

    function changeMode(mode) {
    e.getSession().setMode("ace/mode/" + mode.options[mode.selectedIndex].value);
    saveState();
    }

    function changeTheme(theme) {
    e.setTheme("ace/theme/"+ theme.options[theme.selectedIndex].value);
    saveState();
    }

    function supportsLocalStorage(){
    try {
    return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
    return false;
    }
    }

    function saveState(){
    if (!supportsLocalStorage()) { return false;alert("no local storage"); }
    localStorage["m.custom.editor.theme"] = theme.selectedIndex;
    localStorage["m.custom.editor.mode"] = mode.selectedIndex;
    localStorage["m.custom.editor.value"] = e.getValue();
    }

    function restoreState(){
    if (!supportsLocalStorage()) { return false; }
    e.setValue(localStorage["m.custom.editor.value"]);
    var theme = document.getElementById("theme");
    theme.options[localStorage["m.custom.editor.theme"]].selected = true;
    changeTheme(theme);

    var mode = document.getElementById("mode");
    mode.options[localStorage["m.custom.editor.mode"]].selected = true;
    changeMode(mode);
    editorEl.focus();
    }

    function emptyEditor() {
    e.setValue(" ");
    saveState();
    }

    function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

    if (!files.length) {
    alert('Please select a file!');
    return;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (
    function(theFile) {
    return function(evt) {
    // Render text.
    e.setValue(evt.target.result);
    };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsText(f,"UTF-8");
    }
    }

    var html, timeout;
    window.onload=function(){
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

    html = document.getElementsByTagName('html')[0];
    html.addEventListener('keyup', function(ev) {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(saveState, 100);
    });
    restoreState();
    };
    hideResult();
    </script>