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 ...
随机推荐
- Linux 忘记root密码
1 将系统重启,读秒的时候按下任意键就会出现如下图菜单界面 2 进入上图菜单界面之后,按e键就可以进入grub的编辑模式 3 选择第二行 kernel开头,再按 e 键进入该行的编辑界面中,然后在出现 ...
- [转帖]ARM 相关内容
ARM内核全解析,从ARM7,ARM9到Cortex-A7,A8,A9,A12,A15到Cortex-A53,A57 http://www.myir-tech.com/resource/448.asp ...
- MES模块
基础数据管理:产品模型.工厂模型.工艺模型 仓储管理 成本管理 绩效管理 看板管理 日志管理 设备管理:工装管理.设计器具管理.设备保养管理.设备备件管理.设备采集管理.设备点检管理.设备故障管理.设 ...
- ionic3应用的Android打包签名发布步骤
版权声明:本文为博主原创文章,未经博主允许不得转载. 当我们的ionic应用开发结束之后,就要开始上线到应用市场,那么Android的发布步骤具体是怎么样的呢? 1)编译 运行命令行: ionic c ...
- 删除文件,copy文件bat
由于IntelliJ IDEA Build Artifacts速度实在是无法忍受,特整理了一个bat脚本方便maven install后更新jar文件到部署包 del /F /S /Q D:\Idea ...
- pgm13
这部分开始,我们将讨论 learning 相关的内容.PGM 为 frequentist 与 Bayesian 系的 model 提供了同一种语言,对前者来说 learning 就是确定一种对“未知但 ...
- echarts之简单的入门——【二】再增加一个柱状图和图例组件
echarts之简单的入门——[一]做个带时间轴的柱状统计图 现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢? 如果你看过简单入门中的配置项手册中series ...
- Intent 传递数据
使用INtent 在页面之间跳转,数据传递是必须的,我们可以直接在intent 对象上放置基本数据类型的数据,也可以放置字符串和其他数据类型数据.对于其他数据类型,实现了Parcelable 或Ser ...
- BZOJ 193题纪念
- 洛谷 P1054 等价表达式 解题报告
P1054 等价表达式 题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式,题目的 ...