codeMirror插件使用讲解

codeMirror插件使用讲解

codeMirror是一款十分强大的代码编辑插件，提供了十分丰富的API，最近在项目中用到了这款插件，于是在这里给大家分享下使用方法和心得：

codeMirror调用非常方便

首先在页面中载入插件css及js文件

同时加载你所需要使用的脚本JS及风格样式CSS文件，如下举例：

注意文件的放置位置

下一步在html页面中编写好代码：

shell

bat

python

default

3024-night

erlang-dark

#!/bin/sh

#!/usr/bin/env python

# -*- coding: utf8 -*-

调用关键代码如下：

var editor = CodeMirror.fromTextArea($("#script_once_code")[0], { //script_once_code为你的textarea的ID号

lineNumbers: true,//是否显示行号

mode:"shell",　//默认脚本编码

lineWrapping:true, //是否强制换行

});

JS配置代码如下：

//选择界面风格JS

$('#select').change(function(){

var theme = $('#select').val();

editor.setOption("theme", theme); //editor.setOption()为codeMirror提供的设置风格的方法

});

//选择脚本类型JS

var txt1=$("#script_once_code").val();

var txt2='';

var txt3=$("#code2").val();

$(".ck-code").click(function(){

var txt=editor.getValue(); //editor.getValue()获取textarea中的值

var lang=$(this).prop("id");

if(lang=="script_once_type1") {

editor.setOption("mode","shell");//editor.setOption()设置脚本类型

editor.setValue(txt1);// editor.setValue()设置textarea中的值

}

else if(lang=="script_once_type2") {

editor.setOption("mode","perl");

editor.setValue(txt2);

}

else {

editor.setOption("mode","python");

editor.setValue(txt3);

}

});

最终界面如下：

如需配置更多参数，可以访问codeMirror插件官网：http://codemirror.net/ 查看其配置文档。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。