My dear reader, how are you? السلام عليكم

Greatness is what happens when you aren’t afraid to relentlessly push yourself to tear down all your walls of limitations ― Edmond Mbiaka

This post explains the integration of Ace code editor with Django.

Few useful links to practically follow the project:

  1. Django-Ace-Integration GitHub repository — DirectMe
  2. Clone the application from GitHub using
git clone


Django-Ace-Integration$ virtualenv aceenv 
Django-Ace-Integration$ source aceenv/bin/activate
(aceenv)Django-Ace-Integration$ pip3 install django
(aceenv)Django-Ace-Integration$ pip3 freeze > requirements.txt

# Create a Django project
(aceenv)Django-Ace-Integration$ django-admin startproject config 

# Change project name
(aceenv)Django-Ace-Integration$ mv config DjangoAce
(aceenv)Django-Ace-Integration$ cd DjangoAce  
(aceenv)Django-Ace-Integration/DjangoAce$ django-admin startapp coder

# list the qanda application in the list of installed apps in of project in config directory as shown below

'coder', # add this

# Configure Django project to use PostgreSQL. 
# open DjangoAce/config/ and update the following DATABASE variable as follows

                'ENGINE': 'django.db.backends.postgresql',
                'NAME': 'mymdb',
                'USER': 'mymdb',
                'PASSWORD': 'development',
                'HOST': '',
                'PORT': '5432',

# Configure Django project-wide templates and static files.  
# open DjangoAce/config/ and update the following DATABASE variable as follows 

STATISFILES_DIR = [os.path.join(BASE_DIR, 'static'),]

        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),], # add this
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
(aceenv)Django-Ace-Integration/DjangoAce$ pip3 install psycopg2
(aceenv)Django-Ace-Integration/DjangoAce$ python3 makemigrations
(aceenv)Django-Ace-Integration/DjangoAce$ python3 migrate
(aceenv)Django-Ace-Integration/DjangoAce$ python3 runserver

Check if development server is working by entering the following URL in browser It should be giving you something as shown in Figure 1. If it does, you are doing great. cheers!

A detail on individual Django project files is given in one of my earlier posts at DirectMe

Image result for django welcome page

Fig 1: Django Welcome Page

Follow the steps below to integrate Ace Code Editor into your Django Projects.

1) First of all, we will create a model as shown below

# open coder/ and add the following program

from django.db import models
from django.conf import settings

class Code(models.Model):
    title = models.CharField(max_length=250)
    program = models.TextField()
    created = models.DateTimeField(auto_now_add=True)
    def __str__(self):
        return self.title

2) Register model in Django admin

# open coder/ and add the following program

from django.contrib import admin
from .models import Code

3) Create a form to submit programs as shown below

# Create coder/ and add the following program

from django import forms
from .models import Code

class CodeForm(forms.ModelForm):
    class Meta:
        model = Code
        fields = ('program', 'title')
        widgets = {
                "program": forms.Textarea(),

4) Add a view for the forms as shown below

# Create coder/ and add the following program

from django.shortcuts import render
from django.http import HttpResponse
from .forms import CodeForm
from .models import Code

def add_code(request):
    if request.method == 'POST':
        form = CodeForm(request.POST)
        if form.is_valid():
            return HttpResponse('Program added to database')
            return HttpResponse('not valid')
    else:  # display empty form
        form = CodeForm()

    return render(request, 'coder/add_code.html', {'code_form': form})

5) Let us now add a template

# Create coder/templates/coder/add_code.html and add the following program

{% extends "base.html" %}

<title>{% block title %}DjangoAce{% endblock %}</title>

{% block content %}

<form id="coder_form" class="form" method="post">
        {% csrf_token %}

                Program title: <input type="text" name="title" required id="id_program"> <br> <br>

        <div id="mydiv">
                <textarea data-editor="twilight" name="program" cols="200" rows="20" required id="id_program">

        <input type="Submit" name="Submit" value="Submit"/>

{% endblock %}

6) Let us now add a base template as shown below

# create coder/base.html and add the following program

{% load static %}
<!DOCTYPE html>
        <title>{% block title %}{% endblock %}</title>
        <link href=""
        rel="stylesheet" crossorigin="anonymous">

        height: 100%;
        width: 100%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */

        height: 500px;
        width: 1000px;


        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="navbar-brand">DjangoAce</div>
        <br />
        <br />
        <br />
        <br />

        <div class="container">
        <div id="content">
                {% block content %}
                {% endblock %}

<script src="{% static "ace/ace.js" %}"></script>
<script src=""></script>

                $(function () {
                    $('textarea[data-editor]').each(function () {
                var textarea = $(this);
                var theme ='editor');
                var editDiv = $('<div>', {
                    position: 'absolute',
                    width: textarea.width(),
                    height: textarea.height(),
                   'class': textarea.attr('class')

                textarea.css('visibility', 'hidden');
                var editor = ace.edit(editDiv[0]);

                editor.setOptions({enableLiveAutocompletion: true, cursorStyle: 'ace', showGutter: true, showLineNumbers: true});
                editor.setTheme("ace/theme/" + theme);

                textarea.closest('form').submit(function () {


7) Add statis files. Create a directory in coder/static, name it as ace and add the ace source files from the following link DirectMe into it.

8) Add a route to the application and views as shown below

# Open coder/ and add the following program 

from django.urls import path
from . import views
from django.contrib.auth import views as auth_views

urlpatterns = [
        path('add', views.add_code, name='add_code'),

# open config/ and add the following program 

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

import coder.urls

urlpatterns = [
    path('coder/', include('coder.urls')),

If you run the development server at this point in time you should be able to see the added functionalities at

I hope you find this tutorial useful. If you find any errors or feel any need for improvement, let me know in your comments below.

Signing off for today. Stay tuned and I will see you next week! Happy learning.


Please enter your comment!
Please enter your name here