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值则会报错。

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):替换所选内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- codeMirror插件start -->
<link rel="stylesheet" href="../js/CodeMirror/lib/codemirror.css">
<script src="../js/CodeMirror/lib/codemirror.js" type="text/javascript"></script>
<script src="../js/CodeMirror/mode/javascript/javascript.js" type="text/javascript"></script>
<!-- codeMirror插件end --><script src="../js/jquery.min.js" type="text/javascript"></script>
</head>
<body>CodeMirror:<div style="border:1px solid red;width:400px;height:200px;"><div id="editorArea"></div></div><script type="text/javascript">var text = '<input type="text" value="123">';  //初始化将要显示的内容var edtiorText = $("#editorArea").val(text); //将初始内容添加到显示区var codeMirror = CodeMirror.fromTextArea($("#editorArea")[0]); //将显示区对象设置到codemirror中实现高亮</script>
</body>
</html>

CodeMirror的认识和使用相关推荐

CodeMirror 5.26.0 发布，在线代码编辑器
CodeMirror 5.26.0 已发布,CodeMirror 是一款"Online Source Editor",基于 Javascript,短小精悍,实时在线代码高亮显示,它 ...
CodeMirror的使用方法
这里是利用vue来开发项目: 1.利用textare生成编辑器<textarea ref="textarea"></textarea>2.创建编辑器对象le ...
ajax中itemtexts,从Jquery Ajax调用CodeMirror textarea的值设置
我试图从Jquery中的Ajax调用中获取值到正在使用CodeMirror脚本的Textarea的value属性. 我已经尝试了将textarea的.html()和.val()属性设置为我的Ajax调 ...
在线代码编辑器---codemirror插件
1.管网地址: http://codemirror.net/ 2.插件调用方法: 3.常用事件 1.onChange(instance,changeObj):codeMirror文本被修改后触发. i ...
python编辑代码的页面_使用CodeMirror实现Python3在线编辑器的示例代码
一.编写页面主要是引入相关的css文件和js文件,这里采用简单插入link和script标签的形式. Document click 二.配置CodeMirror 在index.js中配置CodeMi ...
CodeMirror 5.46.0 发布，多功能在线代码编辑器
开发四年只会写业务代码,分布式高并发都不会还做程序员? CodeMirror 5.46.0 已发布,这是一个 bug 修复版本,更新如下: 在编辑器输入字段中正确关闭autocorrect和aut ...
codemirror mysql_CodeMirror 实现 JavaScript、 MySql 关键字的变色和自动实时提示 autocomplete...
引入静态资源: js 代码实例: /** * 用来实时对用户的输入进行提示 */ function showCodeHint(editor) { editor.on("cursorActiv ...
vue2项目使用codemirror插件实现代码编辑器功能
1.使用npm安装依赖 npm install --save codemirror 2.在页面中放入如下代码 <template><textarea ref="mycode ...
codemirror java代码_codemirror使用(示例代码)
JS使用使用bower下载 javascript bower i codemirror 引入样式文件 html 引入js文件 html 文档结构 html 初始化 javascript // mod ...
vue中使用codemirror
https://blog.csdn.net/oumaharuki/article/details/79268498 别人的记载,写的很不错,还有下载的方法以下是自己使用过的,做出来的例子: 做出来 ...

CodeMirror的认识和使用

CodeMirror的认识和使用相关推荐

最新文章

热门文章