vue.js集成codeMirror代码编辑器

1.前端代码

<link href="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.48.4/mode/python/python.js"></script>

<div id="app" style="margin-top: 60px;">
    <el-row :gutter="40">
        <el-col :span="20" :offset="2">
            <div style="border: 1px solid #ddd;" id="div1">
                <textarea id="editor_demo"></textarea>
            </div>
        </el-col>
        <el-col :span="2" :offset="20" style="margin-top: 20px;">
            <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-col>
    </el-row>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            editor: null
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.editor = CodeMirror.fromTextArea(document.getElementById("editor_demo"), {
                  lineNumbers: true,
                  indentWithTabs: true,
                  mode: "python",
                  matchBrackets: true
                });
                this.editor.setSize('auto','600px');
            },
            handleAdd() {
                axios.post(site_url + "create_blog/", {"content": this.editor.getValue()}).then(res => {
                    if (res.data.result) {
                        this.$message.success('添加内容成功');
                    } else {
                        this.$message.error('添加内容失败');
                    }
                }, 'json');
            }
        }
    })
</script>

2.后端代码

def create_blog(request):
    data = json.loads(request.body)
    content = data.get("content")
    print(content)
    ...
    return JsonResponse({"result": True})

显示效果