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 相关文章推荐
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
Node.js + express基本用法教程
Mar 14 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实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
Java程序员常见面试题
2015/07/16 面试题
大学生个人推荐信范文
2013/11/25 职场文书
客服服务心得体会
2013/12/30 职场文书
女生节标语
2014/06/26 职场文书
倡议书格式
2014/08/30 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
教师个人成长总结
2015/02/11 职场文书
道歉短信大全
2015/05/12 职场文书
自信主题班会
2015/08/14 职场文书