CodeMirror插件5.42.2版API中文帮助文档


  • :
  • 01-06 20:45
  • :
  • 3次
  • :
  • 0条
  • 0赞

简介5.42.2版本的CodeMirror插件的中文API使用文档。

本文站长详细的说明如何把CodeMirror插件引入到自己的WEB网页里,及5.42.2版本的中文API使用说明,因为5.42.2版本和之前的版本相比,有一些不同的地方。

一:把CodeMirror插件引入到网页里的详细步骤及方法:

1.引入主要的JS文件和CSS样式文件:

<script src="CodeMirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="CodeMirror/lib/codemirror.css">

2.引入对应语言的JS文件,也就是mode目录下的js文件:

//比如我们要在CodeMirror编辑器当中编辑js代码,那么就引入:
<script src="mode/javascript/javascript.js"></script>

//如果编辑的是css样式,那么就引入:
<script src="mode/css/css.js"></script>

//在web项目里,我们通常要编辑的是“混合”类型的,有css样式,有html,有js代码,所以经常这样来引入:
<script src="/CodeMirror/5.42.2/mode/htmlmixed/htmlmixed.js"></script>
<script src="/CodeMirror/5.42.2/mode/javascript/javascript.js"></script>
<script src="/CodeMirror/5.42.2/mode/css/css.js"></script>
<script src="/CodeMirror/5.42.2/mode/xml/xml.js"></script>

3.创建要显示CodeMirror编辑器的容器:

//可以直接在style里设置好width和height
<textarea id="CodeMirror" name="CodeMirror"></textarea>

4.调用js脚本来显示编辑器:

<script language="JavaScript">
var myTextarea = document.getElementById('CodeMirror');
var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea,{
    lineNumbers: true,//是否显示行号
    value:"111111111",//经测试这个没用,如果要手动设置编辑器的内容,看下面
    smartIndent : true,  // 是否智能缩进
    tabSize : 4,  // Tab缩进,默认4
    readOnly : false , // 是否只读,默认false
});
</script>

二:常用属性,上面只列出了CodeMirror常用的一些属性,更多的属性可以看这里:

https://codemirror.net/doc/manual.html#config

不过是英文版的,想了解每个属性的具体作用,还需要自己手动测试,下面站长列出自己测试出来的一些属性:

var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
    mode: "markdown", //模式 具体效果没有测试出来
    theme:"night",//外观皮肤,对应的就是theme文件夹下的css文件,不过需要手动引入对应的css文件
    lineWrapping:false,//文字多时换行还是滚动(true),默认滚动    
    lineNumbers: true,//左侧显示行号
    
    //设置gutter跟随编辑器内容水平滚动(false)还是固定在左侧(true或默认)
    fixedGutter:true,//暂时没有测试出来到底是什么效果
    
    scrollbarStyle:native,//null隐藏滚动条
    readOnly: true||false,//是否为只读模式
    showCursorWhenSelecting: true||false,//选择时是否显示光标
    autofocus: true||false,//初始化时时候自动获取焦点,默认关闭,textarea自动设为true
    lineWrapping:true,//代码折叠
    foldGutter: true,
    gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    fullScreen:true,//全屏
    matchBrackets:true,//括号匹配
    extraKeys:{"Ctrl-Space":"autocomplete"}//ctrl-space唤起智能提示
    styleActiveLine:true,//当前行背景高亮 需要引入addon/selection/active-line.js才起作用
    styleSelectedText: true
});

三:常用方法:

CodeMirrorEditor.setSize("100%","100%");//设置宽高
CodeMirrorEditor.setOption("lineNumbers",true);//设置属性,属性名-属性值
CodeMirrorEditor.setValue("value");//设置编辑器中的值
CodeMirrorEditor.getValue();//获取编辑器中的值
CodeMirrorEditor.getLine(2);//获取指定行的文本内容

四:事件:

CodeMirrorEditor.delete();
CodeMirrorEditor.hide();
CodeMirrorEditor.unhide();
editor.save();


您正在找的文章可能是: