700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html文本框代码高亮 CodeMirror 编辑器文本框 TextArea 代码高亮插件 - 文章教程

html文本框代码高亮 CodeMirror 编辑器文本框 TextArea 代码高亮插件 - 文章教程

时间:2018-11-12 09:42:52

相关推荐

html文本框代码高亮 CodeMirror 编辑器文本框 TextArea 代码高亮插件 - 文章教程

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 插件和提交表单。

引入核心文件

codemirror.css 和 codemirror.js 文件是 CodeMirror 插件的核心文件,无论你要高亮的代码是何种语言,都要引入这两个文件。

引入代码高亮js

接下来要引入的文件可以根据您的项目需求引入,不必要引入所有文件,比如您要显示 HTML 代码,则引入:

代码调用

myTextarea = document.getElementById("code");

var editor = CodeMirror.fromTextArea(myTextarea, {

mode: "text/html"

});

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());

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。