Skip to content

Instantly share code, notes, and snippets.

@mikomatic
Forked from jdkanani/notepad.html
Last active July 14, 2018 12:28
Show Gist options
  • Save mikomatic/5957888 to your computer and use it in GitHub Desktop.
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
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>
@mikomatic
Copy link
Author

This code can be copied in browser address for testing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment