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

codeMirror调用非常方便

首先在页面中载入插件CSS及JS文件

<link href="/static/codemirror/lib/codemirror.css" rel="stylesheet" >

  <script src="/static/codemirror/lib/codemirror.js"></script>

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

  <link href="/static/codemirror/theme/3024-night.css" rel="stylesheet">
  <link href="/static/codemirror/theme/erlang-dark.css" rel="stylesheet">

<script src="/static/codemirror/mode/shell/shell.js"></script>
    <script src="/static/codemirror/mode/perl/perl.js"></script>
    <script src="/static/codemirror/mode/python/python.js"></script>

注意文件的放置位置

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

 <!--选择脚本编码代码-->
<div class="controls">
<input class="ck-code" type="radio" name="script_once_type" id="script_once_type1" checked> shell
<input class="ck-code" type="radio" name="script_once_type" id="script_once_type2"> bat
<input class="ck-code" type="radio" name="script_once_type" id="script_once_type3"> python
</div> <!--选择脚本风格代码-->
<div class="controls">
<select id='select'>
<option>default</option>
<option>3024-night</option>
<option selected>erlang-dark</option>
</select>
</div> <!--textarea-->
<textarea id="script_once_code">
#!/bin/sh
</textarea>
<textarea id="code2" class="hide">
#!/usr/bin/env python
# -*- coding: utf8 -*-
</textarea>

调用关键代码如下:

 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/ 查看其配置文档。

codeMirror插件使用讲解的更多相关文章

  1. 关于codeMirror插件使用的一个坑

    codeMirror插件可以做语法高亮渲染,但它操作过程是这样的:先从 textarea中读取值放到codemirror动态生成的div中,根据textarea中的换行个数确定行数,根据正则表达来高亮 ...

  2. codemirror 插件

    做在线词典编辑的时候.里面有些自定义标签.类似html标签一样. 为了让编辑编辑.改成了  <动词></动词> 所以引用了 codemirror插件 此插件绝对牛逼 它主要功能 ...

  3. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  4. 使用CodeMirror插件遇到的问题

    CodeMirror的正常使用: //首先通过<script>标签引入相应的js,这个就不必说了 var myCodeMirror = CodeMirror.fromTextArea(my ...

  5. codemirror插件-文件比较组件merge

    目的: 为了实现文件比较功能 引用文件 从github下载项目后,从以下路径引用文件,其中部分github分支中codemirror.js 需要运行项目,自动合成 <link rel=style ...

  6. CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子

    CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项 ...

  7. 以“图片渐入渐出”为例讲述jQuery插件的具体实现

    首先声明,此代码以网友“斯迈欧”原创作为此例的讲解: 在这之前我们先看看我们要做的效果是什么样的: 解析下面的样式:我们要图片在过“一定时间”后自动切换,在右下角处有小方块似数字1,2,3,4,这些数 ...

  8. CodeMirror 使用大全

    CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项 ...

  9. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

随机推荐

  1. [转]C#调用FFMPEG,并异步读取输出信息的代码

    http://www.cnblogs.com/Leo_wl/archive/2011/12/31/2308841.html

  2. 让ZenCoding提升编码速度

    日前写了一篇关于VS神级插件Web Essentials的系列博客,其中在HTML&CSS操作技巧一节简单提到了ZenCoding,今天来详细说一下这个东西. 摘要 Zen Coding是一种 ...

  3. js下的面向对象

    本文记录了一种Javascript的面向对象方法及原理理解,示例代码如下: //构造函数 var MClass = function(value1, value2) { this.member = & ...

  4. 【译】AS3利用CPU缓存

    利用CPU缓存   计算机有随机存取存储器RAM(译注:即我们常说的内存),但有更快形式的存储器.如果你希望你的应用程序的快速运行,你需要知道这些其他的存储器.今天的文章中讨论了它们,并给出了两个AS ...

  5. 面向对象架构模式之:领域模型(Domain Model)

    一:面向对象设计中最简单的部分与最难的部分 如果说事务脚本是 面向过程 的,那么领域模型就是 面向对象 的.面向对象的一个很重要的点就是:“把事情交给最适合的类去做”,即:“你得在一个个领域类之间跳转 ...

  6. WebApi系列~通过HttpClient来调用Web Api接口

    回到目录 HttpClient是一个被封装好的类,主要用于Http的通讯,它在.net,java,oc中都有被实现,当然,我只会.net,所以,只讲.net中的HttpClient去调用Web Api ...

  7. 美团(iPad)顶部界面的简单实现, 及开发时常见bug

    项目功能介绍:1.支持横竖屏旋转,界面正常显示2.通过点击界面顶部"美团",可展示出左右双tableView分别显示服务类列表和子类列表3.通过点击界面顶部"广州&quo ...

  8. 【WP开发】正确理解页面缓存

    注:本文内容面向Runtime App. 在新建项目后,细心观察,你会发现在App类中有以下代码: // TODO: 将此值更改为适合您的应用程序的缓存大小 rootFrame.CacheSize = ...

  9. XML序列化的时候如何支持Namespace

    我曾经不止一次(当然不仅仅是我意识到这个问题)说到过,XML标准中的Namespace的设计其实是一个较为失败的设计,它有它的优点,但缺点更多. http://zzk.cnblogs.com/s?w= ...

  10. The Triumph Of Bio-logic

    理性技术的局限 机械逻辑 人造机械的构成逻辑,比如说钟表的制作原理.是一种可被人类掌握的,可推演的理论. 生物逻辑 一个有机系统的构成逻辑.比如说草原.细胞.大脑等这些系统的存在所依托的逻辑,我们成为 ...