码迷,mamicode.com
首页 > 其他好文 > 详细

CodeMirror的使用方法

时间:2018-12-28 20:42:33      阅读:1137      评论:0      收藏:0      [点我收藏+]

标签:auto   利用   mode   提示   edit   行号   rom   his   ext   

这里是利用vue来开发项目:
1、利用textare生成编辑器
 <textarea ref="textarea"></textarea>

2、创建编辑器对象
 let editJson = CodeMirror.fromTextArea(this.$refs.textarea, {
    mode: ‘application/json‘, // json数据高亮
    lineNumbers: true, // 显示行号
    theme: ‘eclipse‘, //设置主题
    lineWrapping: ‘wrap‘, // 文字过长时,是换行(wrap)还是滚动(scroll),默认是滚动
    showCursorWhenSelecting: true, // 文本选中时显示光标
    cursorHeight: 0.85, //光标高度,默认是1
    // 代码折叠
    lineWrapping: true,
    foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    matchBrackets: true, // 括号匹配
    smartIndent: true, // 智能缩进
    // 智能提示
    extraKeys:{
        "Alt-/": "autocomplete", "F11": function (cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        }
    }
 });
 // 设置初始值
 editJson.setValue("输入代码\n")
 // 获取编辑器的值
 editJson.getValue()

 

CodeMirror的使用方法

标签:auto   利用   mode   提示   edit   行号   rom   his   ext   

原文地址:https://www.cnblogs.com/wuting/p/10192515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!