codeMirror插件使用讲解


Posted in Javascript onJanuary 16, 2017

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插件使用讲解

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
微信小程序 图片边框解决方法
Jan 16 #Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 #Javascript
微信小程序 video详解及简单实例
Jan 16 #Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 #Javascript
微信小程序 登录实例详解
Jan 16 #Javascript
微信小程序 传值取值的几种方法总结
Jan 16 #Javascript
详解vue-Resource(与后端数据交互)
Jan 16 #Javascript
You might like
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php中session退出登陆问题
2014/02/27 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
axios的拦截请求与响应方法
2018/08/11 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
urllib2自定义opener详解
2014/02/07 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python 队列详解及实例代码
2016/10/18 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
综合实践教学反思
2014/01/31 职场文书
学生操行评语大全
2014/04/24 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
体育活动总结
2015/02/04 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python