CodeMirror 使用大全
CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项目的需求。
CodeMirror支持大量语言的语法高亮,包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等,以及diff、LaTeX、SQL、wiki、Markdown等文件格式。此外,CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、Emacs/VIM键绑定、代码自动格式等。
CodeMirror采用MIT开源许可协议,目前已经被集成到各种应用程序中,如Adobe Brackets、CoDev、Light Table等开发环境,还被作为各种SQL、Haxe、JavaScript在线编辑器的基础库来使用。
CodeMirror开发者近日发布了3.0版本。该版本进行了一些改进,如果你使用之前的版本,则需要注意,3.0中的API与2.0存在一些不兼容的问题,详细信息见升级向导。此外,重要的是,3.0放弃了对IE7的支持。
使用方法
本文将做简单的介绍,如何使用CodeMirror插件和提交表单。
引入核心文件
- <link rel="stylesheet" href="lib/codemirror.css">
- <script src="lib/codemirror.js"></script>
codemirror.css和codemirror.js文件是CodeMirror插件的核心文件,无论你要高亮的代码是何种语言,都要引入这两个文件。
引入代码高亮js
接下来要引入的文件可以根据您的项目需求引入,不必要引入所有文件,比如您要显示html代码,则引入:
- <script src="xml.js"></script>
代码调用
- <script>
- myTextarea = document.getElementById("code");
- var editor = CodeMirror.fromTextArea(myTextarea, {
- mode: "text/html"
- });
- </script>
myTextarea为您的编辑器dom元素ID,一般使用document.getElementById(“code”)方法获取文本框,如果您使用的jquery,那么需要在代码后面加入[0],比如$(‘#code’)[0];
获取Codemirror的值
- //该方法得到的结果是经过转义的数据
- editor.getValue();
- //该方法得到的结果是未经过转义的数据
- editor.toTextArea();
- editor.getTextArea().value;
如果是通过 JS 进行表单提交,可以在提交的 JS 代码中这样使用:
- //将 Codemirror 的内容赋值给 Textarea
- $("#content").text(editor.getValue());
Codemirror赋值
1.editor.setValue('为codemirror赋值');
Codemirror Events change事件
主要代码
Editor.on("change", function (Editor, changes) {
while (changes) {
Editor1.replaceRange(changes.text.join("\n"), changes.from, changes.to);
changes = changes.next;
}
});
changes.next
不是每次change事件都会有
在线使用手册:http://codemirror.net/doc/manual.html
github地址:https://github.com/marijnh/codemirror
CodeMirror 使用大全的更多相关文章
- CodeMirror 在线代码编辑器
像百度编辑器插件部分.菜鸟教程示例等高德地图都在使用,这里也记录一下: CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件...... vue 中使用 参见:h ...
- JavaScript资源大全中文版(Awesome最新版--转载自张果老师博客)
JavaScript资源大全中文版(Awesome最新版) 目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...
- javascript开源大全
javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...
- JavaScript 资源大全中文版
我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加 ...
- Oracle 数据库语句大全
Oracle数据库语句大全 ORACLE支持五种类型的完整性约束 NOT NULL (非空)--防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值. CH ...
- 开源 iOS 项目分类索引大全 - 待整理
开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Cate ...
- .NET Core dotnet 命令大全
dotnet 命令大全,让你理解dotnet 命令. 本文将以一个实例串起 dotnet 所有命令,让你玩转dotnet 命令. 本篇文章编写环境为windows 10 ,dotnet 命令同样适用于 ...
- Python 资源大全中文版
Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列 ...
- 【JS】javascript 正则表达式 大全 总结
javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...
随机推荐
- [日常工作]Oracle12cr2在日常工作中遇到的不兼容的问题
Oracle12c 数据库GS实例时需要使用新驱动,避免制单出现获取不到正确凭证编号内码的问题. Oracle12c 会产生大量的隐藏表,部分ddl语句会报错. Oracle12c 删除了VM_con ...
- Linux下数据库备份恢复过程
1. 远程进入Linux服务器. 2. 一般登录的是root用户, 第一步切换到Oracle用户, 命令: su - oracle 3. 查看服务器上面数据库的监听的状况 lsnrctl 之后输入命令 ...
- 应用层协议及ip地址划分
1.应用层协议 2.ip地址 3.子网划分及超网合并
- BZOJ2959长跑——LCT+并查集(LCT动态维护边双连通分量)
题目描述 某校开展了同学们喜闻乐见的阳光长跑活动.为了能“为祖国健康工作五十年”,同学们纷纷离开寝室,离开教室,离开实验室,到操场参加3000米长跑运动.一时间操场上熙熙攘攘,摩肩接踵,盛况空前. 为 ...
- BZOJ4259 残缺的字符串(FFT)
两个串匹配时相匹配的位置位置差是相同的,那么翻转一个串就变成位置和相同,卷积的形式. 考虑如何使用卷积体现两个位置能否匹配.一个暴力的思路是每次只考虑一种字符,将其在一个串中设为1,并在另一个串中将不 ...
- ACM-ICPC 2018 沈阳赛区网络预赛 J. Ka Chang (分块思想)
题目链接:https://nanti.jisuanke.com/t/31451 题意: 给你一颗树,树上各点有初始权值,你有两种操作: 1. 给树中深度为l的点全部+x,(根节点为1,深度为0) 2. ...
- 【BZOJ1856】[SCOI2010]字符串(组合数学)
[BZOJ1856][SCOI2010]字符串(组合数学) 题面 BZOJ 洛谷 题解 把放一个\(1\)看做在平面直角坐标系上沿着\(x\)正半轴走一步,放一个\(0\)看做往\(y\)轴正半轴走一 ...
- 【BZOJ1821】[JSOI2010]部落划分(二分,并查集)
[BZOJ1821][JSOI2010]部落划分(二分,并查集) 题面 BZOJ 洛谷 题解 二分答案,把距离小于二分值的点全部并起来,\(\mbox{check}\)一下是否有超过\(K\)个集合就 ...
- [POI2012]BON-Vouchers----你敢模拟吗?
链接:https://www.luogu.org/problemnew/show/P3536 题意: 定义n个数为幸运数字,一共有n批人,设第i批人有x个,则它们会依次取走余下的x的倍数中最小的x个, ...
- Java:返回当前内存信息
今天有个小程序想获得当前系统可用的内存信息,到百度搜索了一下,看到很多人都在说要采用JNI来做,JAVA本身没办法实现,经过半个多小时的搜索,终于找到了,原来Java本身已经有这个功能了.唉,看来是很 ...