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.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
angular directive的简单使用总结
May 24 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
js实现小星星游戏
Mar 23 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
zend framework多模块多布局配置
2011/02/26 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Python MD5加密实例详解
2017/08/02 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python 实现一个计时器
2020/07/28 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
村庄环境整治方案
2014/05/15 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
预备党员党支部意见
2015/06/02 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers