Skip to content

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.

Copy link

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
You can’t perform that action at this time.