-
-
Save mikomatic/5957888 to your computer and use it in GitHub Desktop.
bookmarkable simple web editor. Simple Copy paste the code below in your browser's adress bar. Tested (pretty quickly though ^_^) on latest versions of FF, Chrome on OSX and windows
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
data:text/html;charset=utf-8, | |
<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 { | |
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> | |
<div class="topbar"> | |
<button class="savebtn" style="border:none; color:grey;" onClick="saveToFile()">Save as...</button> | |
<!-- | |
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">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()); | |
} | |
function showResult(e) { | |
consoleEl.style.display='block'; | |
consoleEl.style.left='50%'; | |
editorEl.style.right='50%'; | |
consoleEl.innerHTML = e; | |
} | |
function changeMode(mode) { | |
e.getSession().setMode("ace/mode/" + mode.options[mode.selectedIndex].value); | |
} | |
function changeTheme(theme) { | |
e.setTheme("ace/theme/"+ theme.options[theme.selectedIndex].value); | |
} | |
function hideResult() { | |
consoleEl.style.display='none'; | |
editorEl.style.right='0'; | |
} | |
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 | |
}); | |
e.commands.addCommand({ | |
name: "clear", | |
bindKey: { | |
win: "Ctrl-L", | |
mac: "Command-L" | |
}, | |
exec: function (t) { | |
hideResult() | |
}, | |
readOnly: true | |
}); | |
hideResult(); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This code can be copied in browser address for testing