vue.js中怎么集成codeMirror

這篇文章給大家介紹vue.js中怎么集成codeMirror，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

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" >
    <el-row :gutter="40">
        <el-col :span="20" :offset="2">
            <div  id="div1">
                <textarea id="editor_demo"></textarea>
            </div>
        </el-col>
        <el-col :span="2" :offset="20" >
            <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('添加內(nèi)容成功');
                    } else {
                        this.$message.error('添加內(nèi)容失敗');
                    }
                }, 'json');
            }
        }
    })
</script>

2.后端代碼

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

顯示效果

關(guān)于vue.js中怎么集成codeMirror就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。