Skip to content

Instantly share code, notes, and snippets.

@weirongxu

weirongxu/editor.html

Last active November 14, 2015 18:49
Show Gist options
  • Save weirongxu/1e8484be83dd46e1415e to your computer and use it in GitHub Desktop.
Save weirongxu/1e8484be83dd46e1415e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
editor.html
data:text/html;charset=UTF-8,
<html>
<head>
<title>editor</title>
<style>
body {
display: flex;
margin: 0;
}
#viewer,
#editor {
flex: 1
}
</style>
<!-- <script src="http://ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript"></script> -->
<script type="text/javascript" src="http://cdn.bootcss.com/ace/1.2.0/ace.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/ace/1.2.0/theme-tomorrow_night.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/ace/1.2.0/keybinding-vim.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/ace/1.2.0/mode-html.js"></script>
</head>
<body>
<iframe id="viewer"></iframe>
<div id="editor">你好</div>
<script>
var editor = ace.edit("editor"), sync;
editor.setTheme("ace/theme/tomorrow_night");
editor.setKeyboardHandler("ace/keyboard/vim");
editor.setFontSize(16);
editor.focus();
editor.getSession().setMode("ace/mode/html");
editor.getSession().setUseWorker(true);
editor.getSession().setTabSize(2);
(sync = function(){
document.getElementById('viewer').setAttribute('src', 'data:text/html;charset=UTF-8,' + editor.getValue());
})();
editor.getSession().on('change', function(e) {
sync();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment