网页代码编辑器插件ace

导入相应的js文件,然后写代码html和js初始化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <!--导入js库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ace.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ext-beautify.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ext-error_marker.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/ext-language_tools.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/mode-python.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.11/theme-terminal.min.js"></script>
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <style>
        button{
        width: 120px;
        height: 50px;
        color:white;
        background-color:cornflowerblue;
        border-radius: 3px;
        border-width: 0;
        margin: 0;
        outline: none;
        font-size: 17px;
        text-align: center;
        cursor: pointer;        }
        button:hover{
        background-color: #b1cbf3;      }
    </style>

</head>
<body>
    <button id="btn_save">保存</button>
    <button id="btn_start1" style="margin-left: 10px">
        <a href="{% url 'workspace:deal_strategy' pk=pk %}" style="text-decoration: none; color: #f6f6fa "> 运行回测 </a></button>
    <button style="margin-left: 20px"><a href="{% url 'workspace:deal_strategy_win' pk=pk %}" style="text-decoration: none; color: #f6f6fa ">
        运行回测WIN
    </a></button>
    <button style="margin-left: 30px"><a href="{% url 'workspace:workspace' %}" style="text-decoration: none; color: #f6f6fa ">
        返回上一级
    </a></button>
    <div id="editor" style="width: 1400px; height: 650px; margin-top: 20px">{{ test_code }}</div>
</body>
<script>
    var editor = ace.edit('editor');
    editor.setTheme("ace/theme/terminal");
    editor.setFontSize(18);
    editor.setHighlightActiveLine(false);
    editor.setOption("wrap", "free");
    editor.setShowPrintMargin(false);
    var PythonMode = ace.require("ace/mode/python").Mode;
    editor.session.setMode(new PythonMode());
    editor.getSession().setUseWrapMode(true);
    ace.require("ace/ext/language_tools");
    editor.setOptions({
        enableLiveAutocompletion: true,
        enableBasicAutocompletion: true,
    });
    $(document).ready(function () {
    }).on('click', '#btn_save', function () {
        code_content = editor.getValue();
        param = {"code_content": code_content};
        $.post("{% url 'workspace:workspace_update' name=name %}", param, function (data) {
            swal({title: '保存成功'});
        })
    })
</script>
</html>