CodeMirror的使用方法
最近项目中用到了CodeMirror这个代码编辑器,感觉非常好用,可以设置很多种代码格式。默认前提是你已经正确引入了所有的js文件和css文件。
下面是我在项目中用到过和在网上搜集整理的使用方法:
1、首先在html界面中建立textarea标签,用于生成代码框
<textarea id="code"></textarea>
2、根据textarea的id获取到标签元素,将容器转换为编辑器
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {//定义CodeMirror代码编辑器
lineNumbers: true, // 显示行号
indentUnit: 4, // 缩进单位为4
styleActiveLine: true, // 当前行背景高亮
matchBrackets: true, // 括号匹配
mode: 'htmlmixed', // HMTL混合模式
lineWrapping: true, // 自动换行
theme: 'monokai', // 编辑器主题
});
API
editor.setSize(width,height)//设置编辑框的尺寸
editor.getValue()//获取经过转义的编辑器文本内容
editor.toTextArea()或editor.getTextArea().value//该方法得到的结果是未经过转义的数据
editor.setValue(text)//设置编辑器文本内容
editor.getRange({line,ch},{line,ch})//获取指定范围内的文本内容第一个对象是起始坐标,第二个是结束坐标
editor.replaceRange(replaceStr,{line,ch},{line,ch})//替换指定区域的内容
editor.getLine(line)//获取指定行的文本内容
editor.lineCount()//统计编辑器内容行数
editor.firstLine()//获取第一行行数,默认为0,从开始计数
editor.lastLine()//获取最后一行行数
editor.getLineHandle(line)//根据行号获取行句柄
editor.getSelection()//获取鼠标选中区域的代码
editor.replaceSelection(str)//替换选中区域的代码
editor.setSelection({line:num,ch:num1},{line:num2,ch:num3})//设置一个区域被选中
editor.somethingSelected()//判断是否被选择
editor.getEditor()//获取CodeMirror对像
editor.undo()//撤销
editor.redo()//回退
可能整理的不全,欢迎补充。
前端交流群,期待你的加入!群号:127768464
最新文章
- $stateParams
- Java NIO 同步非阻塞
- log4j.xml 日志只输出指定类配置
- iOS开发之网络编程--2、NSURLSessionDownloadTask文件下载
- 保留ip: Reserved IP addresses
- 如何消除选定TextBox后的光标但又不失去焦点。
- Java 断点调试总结
- util-判断当前年份所处的季度,并返回当前季度开始的月份
- C#委托(Delegate)学习日记
- MySQL5.7新特性笔记
- ElasticSearch聚合分析
- Vue音乐项目笔记(一)
- cogs448
- appium自动化测试之UIautomatorviewer元素定位
- 《linux内核》课本第五章读书笔记
- 多路复用I/O模型select() 模型 代码实现
- beego——URL构建
- ffmpeg个人翻译文档1-8<;转>;
- P4294 [WC2008]游览计划
- hdu 1030 Delta-wave(数学题+找规律)
热门文章
- Andrew Ng 的 Machine Learning 课程学习 (week3) Logistic Regression
- GitKraken使用教程-基础部分(4)
- WebGL 踩坑系列-2
- 小程序 页面到详情的id传递
- ToDictionary写法
- 权限修饰符(public、protected、default、private)权限验证
- Django Rest Framework进阶二
- iOS沙盒(sandbox)机制及获取沙盒路径
- Python中open文件的各种打开模式
- SpringCloud的学习记录(1)