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 相关文章推荐
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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中批量修改文件后缀名的函数代码
2011/10/23 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
理解javascript对象继承
2016/04/17 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
python 换位密码算法的实例详解
2017/07/19 Python
python实现SOM算法
2018/02/23 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
python计算二维矩形IOU实例
2020/01/18 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
党校培训思想汇报
2013/12/30 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
面试必备的求职信
2014/05/25 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
校运会加油稿大全
2015/07/22 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
 python中的元类metaclass详情
2022/05/30 Python