django-admin-monaco-editor 1.1.4

Monaco Editor Widget for Django.

Django Monaco Editor

Integration of Monaco Editor (VSCode's code editor) for Django forms and admin.

🚀 Features

• Easy Integration: Simply use MonacoField instead of TextField
• Flexible Configuration: Programming language, themes, sizes, editor options
• Settings Support: Global configuration via settings.py
• CDN Loading: Package stays lightweight
• Multiple Editors: Works with multiple editors on the same page
• Django Admin Integration: Support for inline forms and dynamic forms
• Automatic Layout: Adapts to window resizing

📦 Installation

Install the package from PyPI:

pip install django-admin-monaco-editor

Add django_monaco_editor to INSTALLED_APPS in settings.py:

# settings.py
INSTALLED_APPS = [
    # ...
    'django.contrib.admin',
    # ...
    'django_monaco_editor',
]

🎯 Basic Usage

In Models

# myapp/models.py
from django.db import models
from django_monaco_editor.fields import MonacoField

class Snippet(models.Model):
    title = models.CharField(max_length=200)

    # Simple Python code (uses default settings)
    python_code = MonacoField(blank=True)

    # JSON with light theme
    config_json = MonacoField(
        language='json',
        theme='vs',
        blank=True,
        help_text="Enter configuration in JSON format"
    )

    # JavaScript with custom settings
    js_code = MonacoField(
        language='javascript',
        theme='vs-dark',
        height=600,
        editor_options={
            'fontSize': 16,
            'minimap': {'enabled': False},
            'wordWrap': 'on'
        }
    )

    def __str__(self):
        return self.title

Register in Django Admin

# myapp/admin.py
from django.contrib import admin
from .models import Snippet

admin.site.register(Snippet)

⚙️ Configuration in settings.py

You can set global configuration for all Monaco editors:

# settings.py

MONACO_EDITOR_CONFIG = {
    # Default programming language
    'language': 'python',

    # Editor theme: 'vs', 'vs-dark', 'hc-black'
    'theme': 'vs-dark',

    # Editor dimensions
    'height': 400,  # pixels or CSS value like '100%'
    'width': '100%',

    # Monaco Editor CDN version
    'monaco_cdn_version': '0.53.0',

    # Custom CDN URL (optional)
    'monaco_cdn_url': 'https://cdn.jsdelivr.net/npm/monaco-editor@{version}/min/vs',

    # Monaco Editor options
    'editor_options': {
        'automaticLayout': True,
        'fontSize': 14,
        'tabSize': 4,
        'wordWrap': 'off',
        'lineNumbers': 'on',
        'minimap': {
            'enabled': True
        },
        'scrollBeyondLastLine': False,
        'renderWhitespace': 'none',
        'folding': True,
        'links': True,
        'colorDecorators': True,
    }
}

🎨 MonacoField Parameters

Parameter	Type	Default	Description
language	str	'python'	Programming language for syntax highlighting
theme	str	'vs-dark'	Editor theme: 'vs', 'vs-dark', 'hc-black'
height	int or str	400	Editor height (in pixels or CSS)
width	int or str	'100%'	Editor width (in pixels or CSS)
readonly	bool	False	Whether the editor is read-only
editor_options	dict	{}	Additional Monaco Editor options

Supported Languages

Monaco Editor supports many programming languages:

python, javascript, typescript, json, html, css, scss, less, xml, markdown, sql, shell, bash, powershell, yaml, dockerfile, go, rust, java, c, cpp, csharp, php, ruby, swift, kotlin, and many more.

📚 Usage Examples

Different Programming Languages

class CodeSnippet(models.Model):
    python_code = MonacoField(language='python')
    javascript_code = MonacoField(language='javascript')
    html_code = MonacoField(language='html')
    css_code = MonacoField(language='css')
    json_config = MonacoField(language='json')
    sql_query = MonacoField(language='sql')

Custom Sizes

class Document(models.Model):
    # Large editor
    content = MonacoField(height=800, width='100%')

    # Small editor
    note = MonacoField(height=200)

Additional Editor Options

class Settings(models.Model):
    config = MonacoField(
        language='json',
        editor_options={
            'fontSize': 16,
            'wordWrap': 'on',
            'minimap': {'enabled': False},
            'lineNumbers': 'off',
            'glyphMargin': False,
            'folding': False,
            'lineDecorationsWidth': 0,
            'lineNumbersMinChars': 0
        }
    )

Read-Only Mode

class Log(models.Model):
    log_content = MonacoField(
        readonly=True,
        theme='vs',
        height=600
    )

🔧 Using the Widget Directly

You can also use the widget directly in forms:

from django import forms
from django_monaco_editor.widgets import MonacoEditorWidget

class CodeForm(forms.Form):
    code = forms.CharField(
        widget=MonacoEditorWidget(
            language='python',
            theme='vs-dark',
            height=500
        )
    )

🎯 JavaScript Events

The editor dispatches a monacoEditorReady event when initialized:

// Listen for editor ready event
document.addEventListener('monacoEditorReady', function(event) {
    const editor = event.detail.editor;  // Monaco editor instance
    const elementId = event.detail.elementId;  // Container ID

    // Now you can work with the editor
    console.log('Editor ready:', elementId);
});

📄 License

MIT License