CodeMirror的认识和使用

1.CodeMirror介绍

    CodeMirror是一款功能强大的代码高亮插件,他不仅提供了高亮功能,其丰富的方法属性也封装了缩进、自动换行、获取编辑文本、设置编辑文本、回退功能等多种实用效果。

2.CodeMirror的使用。

   a.导入CodeMirror的js和css

     <scriptsrc="lib/codemirror.js">script>

     <linkrel="stylesheet"href="../lib/codemirror.css">

     <scriptsrc="mode/javascript/javascript.js">script>

    b.将需要渲染的对象传入fromTextArea中,注意:传入的是一个dom对象,且该对象必须赋有value值,因为CodeMirror会自动读取对象的value值并渲染,若没有value值则会报错。CodeMirror的认识和使用_第1张图片


3.CodeMirror的配置说明

     a.value:设置编辑器的初始编辑值

     b.mode:指定编辑的模式,text/html,javascript等

     c.theme:设定主题样式

           d.indentUnit:设置缩进值,默认为2个单位

           e.smartIndent:是否使用上下文敏感缩进,默认为true

           f.设置一个制表符的宽度,默认为4

           g.是否用N代替N个制表符的宽度,默认为false

           h.electricChars:是否在当前行输入时适当改变其缩进,默认为true

           i.lineWrapping:CodeMirror是否可以滚动,默认为false

           j.lineNumbers:是否显示编辑器行数,默认为false

           k.firstlineNumber:开始计数的行数,默认为1

           m.lineNumberFormatter:function(line:Integer),通过行号返回该行的字符串

           l.fixedGutter:内容是否水平滚动,默认为true

           n.dragDrop:是否可拖拽,默认为false

      

      4.方法说明

        (1)getValue():获取编辑器文本

        (2)setValue(textString):设置编辑器文本

        (3)undo():撤销一个编辑器

        (4)redo():重做一个编辑器

        (5)setSelection({line:startLineNumber,ch:start_ch},{line:endLineNumber,ch:end_ch});设置一个新的编辑器

        (6)getLine(Integer):获取第n行的文本内容

        (7)replaceRange(str1,{line,ch},{line,ch},str2):替换str1中一部分代码为str2

        (8)lineCount():获取编辑器总行数

        (9)replaceSelection(str1,str2):替换所选内容






Insert title here









	CodeMirror:
	

CodeMirror的认识和使用_第2张图片

4.

你可能感兴趣的:(CodeMirror,CodeMirror)