Skip to content

Instantly share code, notes, and snippets.

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

The file 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"
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" sizes="128x128" href="$base$/img/favicon.png">
<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" />
<title>$wikititle$ - $pagetitle$</title>
<link href="$base$/css/print.css" rel="stylesheet" media="all" type= "text/css" />
<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" />
<!--[if IE]><link href="$base$/css/ie.css" rel="stylesheet" media="screen, projection" type="text/css" /><![endif]-->
<div id="doc3" class="yui-t1">
<div id="yui-main">
<div id="maincol" class="yui-b">
<div id="sidebar" class="yui-b first">
<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;
<script src="$base$/js/ace/ace.js" type="text/javascript" charset="utf-8"></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().on('change', function(){
ta.value = editor.getSession().getValue();

This comment has been minimized.

Copy link

commented Jun 8, 2017

Thank you for your 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 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.