快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

vue.js中怎么集成codeMirror

这篇文章给大家介绍vue.js中怎么集成codeMirror，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

我们提供的服务有：网站建设、做网站、微信公众号开发、网站优化、网站认证、二道ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的二道网站制作公司

1.前端代码






    
        
            
                
            
                              添加               

    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');
            }
        }
    })

2.后端代码

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

显示效果

vue.js中怎么集成codeMirror

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


网页题目：vue.js中怎么集成codeMirror
网页地址：http://6mz.cn/article/pejhjh.html

其他资讯