vue.js中怎么集成codeMirror

这篇文章给大家介绍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" >     <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('添加内容成功');                     } 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})

显示效果

关于vue.js中怎么集成codeMirror就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。