Instantly share code, notes, and snippets.

Embed
What would you like to do?
Getting the Ace editor to work with gitit

The file page.st goes in the templates/ directory in the Gitit wiki home directory. You'll put the Ace JavaScript and CSS files in static/.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" sizes="128x128" href="$base$/img/favicon.png">
$if(feed)$
<link href="$base$/_feed/" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed" />
<link href="$base$/_feed$pageUrl$" type="application/atom+xml" rel="alternate" title="This page's ATOM Feed" />
$endif$
<title>$wikititle$ - $pagetitle$</title>
$if(printable)$
<link href="$base$/css/print.css" rel="stylesheet" media="all" type= "text/css" />
$else$
<link href="$base$/css/custom.css" rel="stylesheet" media="screen, projection" type="text/css" />
<link href="$base$/css/print.css" rel="stylesheet" media="print" type= "text/css" />
$endif$
<!--[if IE]><link href="$base$/css/ie.css" rel="stylesheet" media="screen, projection" type="text/css" /><![endif]-->
</head>
<body>
<div id="doc3" class="yui-t1">
<div id="yui-main">
<div id="maincol" class="yui-b">
$userbox()$
$tabs$
$content()$
$footer()$
</div>
</div>
<div id="sidebar" class="yui-b first">
$logo()$
$if(sitenav)$
$sitenav()$
$endif$
$if(pagetools)$
$pagetools()$
$endif$
$if(markuphelp)$
$markuphelp()$
$endif$
</div>
</div>
$javascripts$
$expire()$
$getuser()$
<style type="text/css" media="screen">
#editor {
height: 350px;
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
font-family: Monaco, "Liberation Mono", Courier, monospace;
}
#editedText {
visibility: hidden;
display: none;
}
</style>
<script src="$base$/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var ta = document.getElementById("editedText");
var editorDiv = document.createElement("div");
editorDiv.setAttribute("id", "editor");
ta.parentNode.insertBefore(editorDiv, ta.nextSibling);
var editor = ace.edit(editorDiv);
editor.getSession().setValue(ta.value);
editor.getSession().on('change', function(){
ta.value = editor.getSession().getValue();
});
editor.setTheme("ace/theme/github");
editor.getSession().setMode("ace/mode/markdown");
editor.setHighlightActiveLine(false);
editor.setShowPrintMargin(false);
editor.getSession().setUseWrapMode(true);
editor.setKeyboardHandler("ace/keyboard/vim");
editor.focus();
</script>
</body>
</html>
@3e4

This comment has been minimized.

3e4 commented Jun 8, 2017

Thank you for your page.st file. It works.

I had a bit trouble until I figured out the following:

  1. *.js files have to be below static/js/. Otherwise they are not executed.
  2. Get one of the src directories from https://github.com/ajaxorg/ace-builds/ and copy them below static/js/. In my case static/js/src-min/. Then change line 61 to read <script src="$base$/js/src-min/ace.js" type="text/javascript" charset="utf-8"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment