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
A simple web editor (markdown converter too, using Ace + Showdown)
Raw
notepad2.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment