在项目中需要管理一些SQL，JSON，Python脚本之类的，最初使用默认的文本编辑器，不太友好，在网上找到了一个强大的代码编辑器：ace.js，根据官网介绍，可以支持110多种语言的语法加亮，代码折叠，语法检查等。完全满足我的需求。其官网为： https://ace.c9.io/

根据文档上指引，结合django中自定义widget的方法， 将ace.js集成到项目中，实现的效果如下：

以下是实现步骤

一、下载ace.js离线包，并复制到django的静态资源目录下

二、创建django部件文件：widget.py

from django.forms import widgets
from django.template.loader import render_to_string
from django import forms

class AceCodeEditorWidget(widgets.Widget):
    @property
    def media(self):
        # 引入静态资源
        js = [
              "js/BASE64.js",
              "js/common/widget/ace-code-editor.js",
              "ace-1.5.0/js/ace.js",
              "ace-1.5.0/js/ext-language_tools.js"
              ]
        return forms.Media(js=["%s" % path for path in js])

    def render(self, name, value, attrs=None, renderer=None):
        #重写widget的渲染方法
        out = render_to_string(template_name='common/ace-code-editor.html',
                               context={'name': name, 'value': value if value else '', 'attrs': self.attrs})
        return out

BASE64.js是因为浏览器默认的atob,btoa方法对汉字支持有bug，所以找了单独引用了一个BASE64方法，使用BASE64的原因是，如果在 <input>标签中直接设置代码，会导致一些未知错误， 当然也可以使用URLComponent等方法进行转码。

2.1 widget的render方法中，引入了common/ace-code-editor.html，内容如下：

<div id="id_{{name}}">
    <input type="hidden" name="{{name}}" v-model="value" />
    <el-row style="margin-left:170px">
        <el-col>
            <pre id="id_editor_{{name}}" xmlns:s="http://www.w3.org/1999/html" >
                <s:textarea class="ace_text-input"/>
            </pre>
        </el-col>
    </el-row>
</div>
<script type="text/javascript">
    initAceCodeEditorWidget(editor_{{ name }}, '{{ name }}', '{{ value|safe }}', '{{ attrs.lang }}', ('{{ attrs.readonly }}' || 'False') == 'True')
</script>
<style>
    #id_editor_{{name}} {
        {%if attrs.height %}
        height:{{attrs.height}};
        {% else %}
        height: 400px;
        {%endif%}
    }
</style>

以上的模板默认使用了vue组件上， 将 django使用的form元素和ace.js的编辑器分别处理，使vue可以管理input元素，ace.js单独管理 #id_editor_{{name}}元素，在ace-code-editor.js中，使用 editor的on change事件中，将ace编辑器的值同步给form组件。

2.2 ace-code-editor.js 的内容如下：

function initAceCodeEditorWidget(editor, name, value, lang, readonly) {
    //不在vue的data中定义editor,以防内存过大
    var editor = null;
    new Vue({
        el: '#id_'+name,
        data: {
            value: value ? BASE64.encode(value) : '',  
            lang: lang || 'sql',
        },
        mounted() {
            // 为了支持一个form中使用多个ace editor
            editor = ace.edit("id_editor_"+name)
            ace.config.set('basePath', '/static/ace-1.5.0/js')
            ace.config.set('modePath', '/static/ace-1.5.0/js')
            ace.config.set('themePath', '/static/ace-1.5.0/js')
            editor.setTheme("ace/theme/dawn")
            editor.session.setMode("ace/mode/"+ this.lang)
            editor.setFontSize(11)
            editor.setReadOnly(readonly)
            ace.require("ace/ext/language_tools")
            editor.session.setValue(value)
            editor.setOption('maxLines', 'Infinity')
            var self = this;
            self.value = BASE64.encode(editor.getValue())
            editor.getSession().on('change', function (e) {
                //编辑内容变化时，将值同步给组件
                self.value = BASE64.encode(editor.getValue())
            });
            editor.resize()
        }
    })
}

以上代码，实现了django中的代码编辑器部件（实际项目中的还有更多对widget的定制，本文做了删减）

第三步，使用AceCodeEditorWidget

from django import forms
from common.widgets import AceCodeEditorWidget, ElSwitchWidget
from .models import SqlEditor

class SqlEditorForm(forms.ModelForm):
    class Meta:
        model = SqlEditor
        fields = forms.ALL_FIELDS
        widgets = {
            "status": ElSwitchWidget(),  # ElSwitchWidget 参考前面的文章 url: https://cnanyi.cn/2025/09/56
            "sql_text": AceCodeEditorWidget(attrs={'lang': 'sql', 'toolbar': True, 'readonly': False })
        }
    

2025/9/21 于 北京 上东廓

---

附 BASE64.js

/**
 * Created by SLICE_30_K on 2017/5/22.
 *
 * 支持一般Base64的编码和解码
 * 支持符合RFC_4648标准中"URL and Filename Safe Alphabet"的URL安全Base64编解码
 * 支持中文字符的编解码(Unicode编码)
 */
;(function (root, factory) {
    if (typeof exports === "object") {
        // CommonJS
        module.exports = exports = factory();
    }
    else if (typeof define === "function" && define.amd) {
        // AMD
        define(factory);
    }
    else {
        // Global (browser)
        window.BASE64 = factory();
    }
}(this, function () {
    var BASE64_MAPPING = [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
        'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
        'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
        'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
        'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
        'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
        'w', 'x', 'y', 'z', '0', '1', '2', '3',
        '4', '5', '6', '7', '8', '9', '+', '/'
    ];
    var URLSAFE_BASE64_MAPPING = [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
        'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
        'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
        'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
        'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
        'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
        'w', 'x', 'y', 'z', '0', '1', '2', '3',
        '4', '5', '6', '7', '8', '9', '-', '_'
    ];

    var _toBinary = function (ascii) {
        var binary = [];
        while (ascii > 0) {
            var b = ascii % 2;
            ascii = Math.floor(ascii / 2);
            binary.push(b);
        }
        binary.reverse();
        return binary;
    };

    var _toDecimal = function (binary) {
        var dec = 0;
        var p = 0;
        for (var i = binary.length - 1; i >= 0; --i) {
            var b = binary[i];
            if (b == 1) {
                dec += Math.pow(2, p);
            }
            ++p;
        }
        return dec;
    };

    var _toUTF8Binary = function (c, binaryArray) {
        var mustLen = (8 - (c + 1)) + ((c - 1) * 6);
        var fatLen = binaryArray.length;
        var diff = mustLen - fatLen;
        while (--diff >= 0) {
            binaryArray.unshift(0);
        }
        var binary = [];
        var _c = c;
        while (--_c >= 0) {
            binary.push(1);
        }
        binary.push(0);
        var i = 0, len = 8 - (c + 1);
        for (; i < len; ++i) {
            binary.push(binaryArray[i]);
        }

        for (var j = 0; j < c - 1; ++j) {
            binary.push(1);
            binary.push(0);
            var sum = 6;
            while (--sum >= 0) {
                binary.push(binaryArray[i++]);
            }
        }
        return binary;
    };

    var _toBinaryArray = function (str) {
        var binaryArray = [];
        for (var i = 0, len = str.length; i < len; ++i) {
            var unicode = str.charCodeAt(i);
            var _tmpBinary = _toBinary(unicode);
            if (unicode < 0x80) {
                var _tmpdiff = 8 - _tmpBinary.length;
                while (--_tmpdiff >= 0) {
                    _tmpBinary.unshift(0);
                }
                binaryArray = binaryArray.concat(_tmpBinary);
            } else if (unicode >= 0x80 && unicode <= 0x7FF) {
                binaryArray = binaryArray.concat(_toUTF8Binary(2, _tmpBinary));
            } else if (unicode >= 0x800 && unicode <= 0xFFFF) {//UTF-8 3byte
                binaryArray = binaryArray.concat(_toUTF8Binary(3, _tmpBinary));
            } else if (unicode >= 0x10000 && unicode <= 0x1FFFFF) {//UTF-8 4byte
                binaryArray = binaryArray.concat(_toUTF8Binary(4, _tmpBinary));
            } else if (unicode >= 0x200000 && unicode <= 0x3FFFFFF) {//UTF-8 5byte
                binaryArray = binaryArray.concat(_toUTF8Binary(5, _tmpBinary));
            } else if (unicode >= 4000000 && unicode <= 0x7FFFFFFF) {//UTF-8 6byte
                binaryArray = binaryArray.concat(_toUTF8Binary(6, _tmpBinary));
            }
        }
        return binaryArray;
    };

    var _toUnicodeStr = function (binaryArray) {
        var unicode;
        var unicodeBinary = [];
        var str = "";
        for (var i = 0, len = binaryArray.length; i < len;) {
            if (binaryArray[i] == 0) {
                unicode = _toDecimal(binaryArray.slice(i, i + 8));
                str += String.fromCharCode(unicode);
                i += 8;
            } else {
                var sum = 0;
                while (i < len) {
                    if (binaryArray[i] == 1) {
                        ++sum;
                    } else {
                        break;
                    }
                    ++i;
                }
                unicodeBinary = unicodeBinary.concat(binaryArray.slice(i + 1, i + 8 - sum));
                i += 8 - sum;
                while (sum > 1) {
                    unicodeBinary = unicodeBinary.concat(binaryArray.slice(i + 2, i + 8));
                    i += 8;
                    --sum;
                }
                unicode = _toDecimal(unicodeBinary);
                str += String.fromCharCode(unicode);
                unicodeBinary = [];
            }
        }
        return str;
    };

    var _encode = function (str, url_safe) {
        var base64_Index = [];
        var binaryArray = _toBinaryArray(str);
        var dictionary = url_safe ? URLSAFE_BASE64_MAPPING : BASE64_MAPPING;

        var extra_Zero_Count = 0;
        for (var i = 0, len = binaryArray.length; i < len; i += 6) {
            var diff = (i + 6) - len;
            if (diff == 2) {
                extra_Zero_Count = 2;
            } else if (diff == 4) {
                extra_Zero_Count = 4;
            }
            var _tmpExtra_Zero_Count = extra_Zero_Count;
            while (--_tmpExtra_Zero_Count >= 0) {
                binaryArray.push(0);
            }
            base64_Index.push(_toDecimal(binaryArray.slice(i, i + 6)));
        }

        var base64 = '';
        for (var i = 0, len = base64_Index.length; i < len; ++i) {
            base64 += dictionary[base64_Index[i]];
        }

        for (var i = 0, len = extra_Zero_Count / 2; i < len; ++i) {
            base64 += '=';
        }
        return base64;
    };

    var _decode = function (_base64Str, url_safe) {
        var _len = _base64Str.length;
        var extra_Zero_Count = 0;
        var dictionary = url_safe ? URLSAFE_BASE64_MAPPING : BASE64_MAPPING;

        if (_base64Str.charAt(_len - 1) == '=') {
            if (_base64Str.charAt(_len - 2) == '=') {//两个等号说明补了4个0
                extra_Zero_Count = 4;
                _base64Str = _base64Str.substring(0, _len - 2);
            } else {//一个等号说明补了2个0
                extra_Zero_Count = 2;
                _base64Str = _base64Str.substring(0, _len - 1);
            }
        }

        var binaryArray = [];
        for (var i = 0, len = _base64Str.length; i < len; ++i) {
            var c = _base64Str.charAt(i);
            for (var j = 0, size = dictionary.length; j < size; ++j) {
                if (c == dictionary[j]) {
                    var _tmp = _toBinary(j);
                    /*不足6位的补0*/
                    var _tmpLen = _tmp.length;
                    if (6 - _tmpLen > 0) {
                        for (var k = 6 - _tmpLen; k > 0; --k) {
                            _tmp.unshift(0);
                        }
                    }
                    binaryArray = binaryArray.concat(_tmp);
                    break;
                }
            }
        }
        if (extra_Zero_Count > 0) {
            binaryArray = binaryArray.slice(0, binaryArray.length - extra_Zero_Count);
        }
        var str = _toUnicodeStr(binaryArray);
        return str;
    };

    var __BASE64 = {
        encode: function (str) {
            return _encode(str, false);
        },
        decode: function (base64Str) {
            return _decode(base64Str, false);
        },
        urlsafe_encode: function (str) {
            return _encode(str, true);
        },
        urlsafe_decode: function (base64Str) {
            return _decode(base64Str, true);
        }
    };

    return __BASE64;
}));