竹笋

首页 » 问答 » 问答 » CodeMirror编辑器文本框Text
TUhjnbcbe - 2023/7/27 23:01:00

CodeMirror是一个用于编辑器文本框TextAa代码高亮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开源许可协议,目前已经被集成到各种应用程序中,如AdobeBrackets、CoDev、LightTable等开发环境,还被作为各种SQL、Haxe、JavaScript在线编辑器的基础库来使用。

CodeMirror开发者近日发布了.0版本。该版本进行了一些改进,如果你使用之前的版本,则需要注意,.0中的API与.0存在一些不兼容的问题,详细信息见升级向导。此外重要的是,.0放弃了对IE7的支持。

使用方法

本文将做简单的介绍,如何使用CodeMirror插件和提交表单。

引入核心文件

linkl="stylesheet"hf="lib/codemirror.css"scriptsrc="lib/codemirror.js"/script

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

引入代码高亮js

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

scriptsrc="xml.js"/script

代码调用

scriptmyTextaa=document.getElementById("code");vareditor=CodeMirror.fromTextAa(myTextaa,{mode:"text/html"});/script

myTextaa为您的编辑器Dom元素ID,一般使用document.getElementById("code")方法获取文本框,如果您使用的jQuery,那么需要在代码后面加入[0],比如$(#code)[0];

获取Codemirror的值

//该方法得到的结果是经过转义的数据editor.getValue();

//该方法得到的结果是未经过转义的数据editor.toTextAa();editor.getTextAa().value;

如果是通过JS进行表单提交,可以在提交的JS代码中这样使用:

//将Codemirror的内容赋值给Textaa$("#content").text(editor.getValue());

项目

1
查看完整版本: CodeMirror编辑器文本框Text