codeMirror配置
介绍
CodeMirror是一款在线的支持语法高亮的代码编辑器。官网:http://codemirror.net/
下载后,解压开到的文件夹中,lib下是放的是核心库和核心css,模式下放的是各种支持语言的语法定义,主题目录下是支持的主题样式。一般在开发中,添加lib下的引用和模式下的引用就够了。
使用示例
首先,要引用是lib目录下的codemirror.js,还有一个就是同目录下的codemirror.css文件
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="/lib/codemirror.css">
接下来要引用的就是在mode目录下编辑器中要编辑的语言对应的js文件,下面以js文件为例:
<script src="mode/javascript/javascript.js"></script>
引用的文件用于支持对应语言的语法高亮。
然后,调用脚本以创建编辑器:
var myCodeMirror = CodeMirror(document.body);
这里的调用会在body中添加编辑器,这里因为直接在上面引用了javascript.js,所以这个编辑器会对javascript的关键字高亮显示。
想要高级一点,给编辑器添加一些元素,也可以通过传入配置参数来实现。
var myCodeMirror = CodeMirror(document.body,{
lineNumbers:true
});
这样,就给编辑器添加了行号。
上面说的是实现编辑器的最简单的方式,然后在实际项目中,一般都不会直接把body作为编辑器的容器。而最常用的,是使用textarea。
要把 textarea 实现成一个支持高亮的编辑器,CodeMirror 提供了非常简单的方法:
<textarea id="editor" name="editor"></textarea>
var myTextarea = document.getElementById('editor');
var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
mode:"text/javascript",
lineNumbers:true
});
简单例子:
vartextarea = document.getElementById('code');
vareditor = newMirrorFrame(CodeMirror.replace(textarea), {
height: "350px",//设置初始化高度
content: textarea.value,//设置需要初始化的代码内容
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
stylesheet: "css/jscolors.css",
path: "js/",
autoMatchParens: true
});
例子2:
var textarea = document.getElementById('code');
var editor = new MirrorFrame(CodeMirror.replace(textarea), {
height: "350px",
content: textarea.value,
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
stylesheet: "css/jscolors.css",
path: "js/",
autoMatchParens: true
});
配置说明
在使用CodeMirror的时候,不管是直接使用 CodeMirror()
还是使用 fromTextArea()
,都可以通过传递第二个参数来配置编辑器。
使用方法如下:
var myCodeMirror = CodeMirror(el, {
//
options...
});
或者:
var myCodeMirror = CodeMirror.fromTextArea(el, {
//
options...
});
options 可以使用的参数
CodeMirror函数和它的fromTextArea方法都可以使用一个配置对象作为第二个参数。
value: string | CodeMirror.Doc
编辑器的初始值(文本),可以是字符串或者CodeMirror文档对象(不同于HTML文档对象)。
mode: string | object
通用的或者在CodeMirror中使用的与mode相关联的mime,当不设置这个值的时候,会默认使用第一个载入的mode定义文件。一般地,会使用关联的mime类型来设置这个值;除此之外,也可以使用一个带有name属性的对象来作为值(如:{name: “JavaScript”, json: true}
)。可以通过访问CodeMirror.modes
和CodeMirror.mimeModes
获取定义的mode和MIME。
lineSeparator: string|null
明确指定编辑器使用的行分割符(换行符)。默认(值为null)情况下,文档会被 CRLF(以及单独的CR, LF)分割,单独的LF会在所有的输出中用作换行符(如:getValue)。当指定了换行字符串,行就只会被指定的串分割。
theme: string
配置编辑器的主题样式。要使用主题,必须保证名称为 .cm-s-[name]
(name是设置的theme的值)的样式是加载上了的。当然,你也可以一次加载多个主题样式,使用方法和html和使用类一样,如: theme: foo bar
,那么此时需要cm-s-foo
cm-s-bar
这两个样式都已经被加载上了。
indentUnit: integer
缩进单位,值为空格数,默认为2 。
smartIndent: boolean
自动缩进,设置是否根据上下文自动缩进(和上一行相同的缩进量)。默认为true。
abSize: integer
tab字符的宽度,默认为4 。
indentWithTabs: boolean
在缩进时,是否需要把 n*tab宽度个空格替换成n个tab字符,默认为false 。
electricChars: boolean
在输入可能改变当前的缩进时,是否重新缩进,默认为true (仅在mode支持缩进时有效)。
specialChars: RegExp
需要被占位符(placeholder)替换的特殊字符的正则表达式。最常用的是非打印字符。默认为:/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/
。
specialCharPlaceholder: function(char) → Element
这是一个接收由specialChars
选项指定的字符作为参数的函数,此函数会产生一个用来显示指定字符的DOM节点。默认情况下,显示一个红点(•),这个红点有一个带有前面特殊字符编码的提示框。
keyMap: string
配置快捷键。默认值为default,即 codemorrir.js
内部定义。其它在key map目录下。
extraKeys: object
给编辑器绑定与前面keyMap配置不同的快捷键。
lineWrapping: boolean
在长行时文字是换行(wrap)还是滚动(scroll),默认为滚动(scroll)。
lineNumbers: boolean
是否在编辑器左侧显示行号。
firstLineNumber: integer
行号从哪个数开始计数,默认为1 。
lineNumberFormatter: function(line: integer) → string
使用一个函数设置行号。
gutters: array
用来添加额外的gutter(在行号gutter前或代替行号gutter)。值应该是CSS名称数组,每一项定义了用于绘制gutter背景的宽度(还有可选的背景)。为了能明确设置行号gutter的位置(默认在所有其它gutter的右边),也可以包含CodeMirror-linenumbers
类。类名是用于传给setGutterMarker
的键名(keys)。
fixedGutter: boolean
设置gutter跟随编辑器内容水平滚动(false)还是固定在左侧(true或默认)。
scrollbarStyle: string
设置滚动条。默认为”native”,显示原生的滚动条。核心库还提供了”null”样式,此样式会完全隐藏滚动条。Addons可以设置更多的滚动条模式。
coverGutterNextToScrollbar: boolean
当fixedGutter
启用,并且存在水平滚动条时,在滚动条最左侧默认会显示gutter,当此项设置为true时,gutter会被带有CodeMirror-gutter-filler
类的元素遮挡。
inputStyle: string
选择CodeMirror
处理输入和焦点的方式。核心库定义了textarea
和contenteditable
输入模式。在移动浏览器上,默认是contenteditable
,在桌面浏览器上,默认是textarea。在contenteditable
模式下对IME和屏幕阅读器支持更好。
readOnly: boolean|string
编辑器是否只读。如果设置为预设的值 “nocursor”,那么除了设置只读外,编辑区域还不能获得焦点。
showCursorWhenSelecting: boolean
在选择时是否显示光标,默认为false。
lineWiseCopyCut: boolean
启用时,如果在复制或剪切时没有选择文本,那么就会自动操作光标所在的整行。
undoDepth: integer
最大撤消次数,默认为200(包括选中内容改变事件) 。
historyEventDelay: integer
在输入或删除时引发历史事件前的毫秒数。
tabindex: integer
编辑器的tabindex。
autofocus: boolean
是否在初始化时自动获取焦点。默认情况是关闭的。但是,在使用textarea并且没有明确指定值的时候会被自动设置为true。
低级选项
下面的选项仅用于一些特殊情况。
dragDrop: boolean
是否允许拖放,默认为true。
allowDropFileTypes: array
默认为null。当设置此项时,只接收包含在此数组内的文件类型拖入编辑器。文件类型为MIME名称。
cursorBlinkRate: number
光标闪动的间隔,单位为毫秒。默认为530。当设置为0时,会禁用光标闪动。负数会隐藏光标。
cursorScrollMargin: number
当光标靠近可视区域边界时,光标距离上方和下方的距离。默认为0 。
cursorHeight: number
光标高度。默认为1,也就是撑满行高。对一些字体,设置0.85看起来会更好。
resetSelectionOnContextMenu: boolean
设置在选择文本外点击打开上下文菜单时,是否将光标移动到点击处。默认为true。
workTime, workDelay: number
通过一个假的后台线程高亮 workTime 时长,然后使用 timeout 休息 workDelay 时长。默认为200和300 。(完全不懂这个功能是在说啥)
pollInterval: number
指明CodeMirror向对应的textarea滚动(写数据)的速度(获得焦点时)。大多数的输入都是通过事件捕获,但是有的输入法(如IME)在某些浏览器上并不会生成事件,所以使用数据滚动。默认为100毫秒。
flattenSpans: boolean
默认情况下,CodeMirror会将使用相同class的两个span合并成一个。通过设置此项为false禁用此功能。
addModeClass: boolean
当启用时(默认禁用),会给每个标记添加额外的表示生成标记的mode的以cm-m开头的CSS样式类。例如,XML mode产生的标记,会添加cm-m-xml类。
maxHighlightLength: number
当需要高亮很长的行时,为了保持响应性能,当到达某些位置时,编辑器会直接将其他行设置为纯文本(plain text)。默认为10000,可以设置为Infinity来关闭此功能。
viewportMargin: integer
指定当前滚动到视图中内容上方和下方要渲染的行数。这会影响到滚动时要更新的行数。通常情况下应该使用默认值10。可以设置值为Infinity始终渲染整个文档。注意:这样设置在处理大文档时会影响性能。
codeMirror配置的更多相关文章
- 在线代码编辑器CodeMirror简介
1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一 ...
- CodeMirror mode编写
Writing CodeMirror Modes Modes typically consist of a single JavaScript file. This file defines, in ...
- 分享一个自己制作的XML在线编辑器
前言 一年多没更新博客了,原因是疫情期间<骑马与砍杀2>发售,然后去写游戏MOD去了. 用C#大概写了7个月的游戏MOD,每天晚上肝到很晚,然后期间又因为介绍这个游戏MOD,学习了PR,然 ...
- codeMirror插件使用讲解
codeMirror是一款十分强大的代码编辑插件,提供了十分丰富的API,最近在项目中用到了这款插件,于是在这里给大家分享下使用方法和心得: codeMirror调用非常方便 首先在页面中载入插件CS ...
- CodeMIrror 简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便. codeMirror可以直接在 ...
- 代码高亮插件Codemirror使用方法及下载
代码高亮插件Codemirror使用方法及下载 - 老男孩的日志 - 网易博客 代码高亮插件Codemirror使用方法及下载 2013-10-31 16:51:29| 分类: 默认分类 | ...
- 华丽的网上突出代码组件CodeMirror
农民之间的代码懒惰性质:愚公绝不能过夜.一劳永逸永远不知疲倦!这是一个代码示例 动态配置,在不同的场景抽象为常见的配置逻辑加,这使得有可能"为一个全球性的代码.代码做搬运工",更糟 ...
- 编写CodeMirror Modes详解
在写新的模式(mode)之前,还是先来概括一下CodeMirror的设计思路.CodeMirror分为三部分:核心,模式,扩展.核心库对外开放了很多接口,而这些接口就是实现新模式或者新扩展的基石. 在 ...
- RequireJs加载Codemirror,配合AngularJS的坑
requireJS加载codemirror,并且配合angularJs一起使用的时候,高亮显示代码编辑器.要注意以下几点: 1:普通Js加载CodeMirror 代码如下: <!DOCTYPE ...
随机推荐
- git及github使用
1.git安装 widows: 可以去git官网下载安装 ubantu : 使用命令 sudo apt-get install git 进行安装 2.git启动 widows: 首先去到需要建立git ...
- 如何确定C++继承层次中的函数调用
```cpp //============================================================================ // Name : TS.c ...
- CentOS 7 的 redis 安装
redis 安装 使用下面的命令,下载.解压.编译Redis: $ wget http://download.redis.io/releases/ $ tar xzf redis-x.x.x.tar. ...
- SHA-1算法——(2)
地址:https://www.alvestrand.no/objectid/1.3.14.3.2.26.html 地址:http://oidref.com/1.3.14.3.2.26 这个值好像是个标 ...
- scrapy框架爬取糗妹妹网站妹子图分类的所有图片
爬取所有图片,一个页面的图片建一个文件夹.难点,图片中有不少.gif图片,需要重写下载规则, 创建scrapy项目 scrapy startproject qiumeimei 创建爬虫应用 cd qi ...
- ThinkPHP模板之一
这个东东,就得多练多写,无它法. 1,Application\Home\Controller\IndexController.class.php <?php namespace Home\Con ...
- 微信小程序~tabBar和navigator一起使用无效
1.当注册了tabBar的时候,使用navigator时会发现不能跳转,这个时候需要在navigator上加上open-type=’switchTab’ 属性 <navigator open-t ...
- 项目Alpha冲刺——测试
作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 完成项目Alpha冲刺 团队信息 队名:火鸡堂 队员学号 队员姓名 博客地址 ...
- Zookeeper基础入门介绍
什么Zookeeper Zookeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization).命 ...
- C++对象内存模型1(堆栈模型)(转)
对象内存模型 一. 栈(Stack) VS. 堆(heap) 栈 由系统自动管理,以执行函数为单位 空间大小编译时确定(参数+局部变量) 函数执行时,系统自动分配一个stack 函数执行结束时,系统立 ...