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

　　最近项目中要求把得到的后端json数据如下图展示给客户，还需要可编辑的功能，于是就用到了CodeMirror这款插件，经过初步的探索，发现它主题样式非常靓丽，简单美观，效果图如下：

下面我就一步一步说明我的使用过程。

　　1.首先需要下载codemirror插件，先创建文件夹，下载插件

npm install codemirror

　　2.在文件夹中创建一个html文件，引入codemirror中需要的文件

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!--不管你要引入什么主题配色都需要引入的css文件-->

    <link rel="stylesheet" href="codemirror.css">

　　 <!--下面的css文件就是不同主题配色的css文件-->

    <link rel="stylesheet" href="node_modules/codemirror/theme/monokai.css">

    <link rel="stylesheet" href="node_modules/codemirror/theme/3024-day.css">

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

　　　<!--不管你需要引入什么样式和主题都是必须引入的-->
　　　<script src="node_modules/codemirror/lib/codemirror.js"></script>
　　 <!--使用的是javascript样式的编辑器-->

    <script src="node_modules/codemirror/mode/javascript/javascript.js"></script>

</head>

<style type="text/css">

      .CodeMirror {border: 1px solid black; font-size:13px;border-radius: 5px}

</style>

<body>

    <h2>Theme Demo</h2>
　　 <!--插件起效果的位置，必须是testarea元素-->

    <textarea id="code" name="code">

    </textarea>


　　 <!--下拉框用来换选主题配色的，当然主题配色非常多，这里只是随便列举几个例子-->

    <p>Select a theme: <select onchange="selectTheme()" id=select>

        <option selected>default</option>

        <option>3024-day</option>

        <option>3024-night</option>

    </select>

    </p>

    <script>

        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {

            lineNumbers: true,//是否显示每一行的行数
　　　　　　　 readOnly：false，//只读

            styleActiveLine: true,

            matchBrackets: true

        });
　　　　　//这个是假数据，假设是从后台拿到的，需要展示到页面中

        var obj ={

           "message": "",

           "code": 200,

           "response": {

                "totalCount": 1,

                "results": [

                    {

                        "status": "deployed",

                        "login_port": 22,

                        "role_info": null,

                        "created": "2017-06-19 09:58:04",

                        "login_user": "root",

                        "hostname": "deploy-226",

                        "login_ip": "172.24.6.226",

                        "id": "1147edbde1494df696019fdb094be43d"

                    }

                ],

                "pageSize": 5,

                "page": 1

            },

            "success": true

        }

        setTimeout(function(){//假设两秒后才获取到数据

            editor.setValue(JSON.stringify(obj,null,4))//JSON.stringify()方法的第三个参数的目的就是保留格式的，如果没有的话，

        },2000)                                        //普通的JSON.stringify(obj)仅仅就是把对象转字符串，并不辉保留空格和换行

　　　　　//下拉框选择的时候换主题配色

        var input = document.getElementById("select");

        function selectTheme() {

            var theme = input.options[input.selectedIndex].textContent;//获取下拉框的内容

            editor.setOption("theme", theme);//把内容设置为主题色，

        }

    </script>

</body>

</html>

　　3.介绍简单的api

　　<1>editor.setValue(string)，为codemirror插件赋值，用来显示到页面中

　　<2>editor.getValue()，当你在页面中编辑的时候，可以用这个方法来获取到你编辑的内容

　　<3>onChange(instance,changeObj)，codeMirror文本被修改后触发

　　<4>getLine(line)：获取指定行的文本内容

　　<5>ineCount():统计编辑器内容行数

　　更多的api可以见官网http://codemirror.net/

　　4.效果如下图：

　　

可以下拉款更换配色主题。

我的实例的github源码在此 https://github.com/jiangzhenfei/CodeMirror，可以克隆到本地，然后npm install下载依赖的包，吧index.html在浏览器打开就可以看到效果。

CodeMirror编辑器文本框Textarea代码高亮插件，CodeMirror的简单实用例子的更多相关文章

  1. 代码高亮插件Codemirror使用方法及下载

    代码高亮插件Codemirror使用方法及下载 - 老男孩的日志 - 网易博客 代码高亮插件Codemirror使用方法及下载   2013-10-31 16:51:29|  分类: 默认分类 |   ...

  2. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

  3. [转]7个高性能JavaScript代码高亮插件

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...

  4. WordPress代码高亮插件SyntaxHighlighter终极使用详解

    子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...

  5. 代码高亮插件推荐——SyntaxHighlighter++

    SyntaxHighlighter++这个插件的最大的优点就是可以在编辑器的下方有一个输入框,里面可以输入代码,然后插入到文章中.就不用编辑文章的时候,在可视化和文本之间来回切换了.非常适合不熟悉ht ...

  6. google code-prettify 代码高亮插件使用方法

    找代码高亮插件选了好久,还是这个使用起来比较方便. 先上链接:插件下载地址 官方使用方法地址 建议看官方的资料,我这里仅仅简要描述一下使用方法: 引入方法: 测试引入是否成功:herf 换成 自己放置 ...

  7. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  8. 禁止多行文本框textarea拖拽

    禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...

  9. Word中使用代码高亮插件

    Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010 ...

随机推荐

  1. jmeter设置全局变量的方法

    需求: 同一个线程组内有两个http请求A.B,A请求的后置处理器中存储的有值,B请求中添加用户变量Va先要引用该值,然后B请求的前置处理器再引用用户变量va. 第一种方式: 1.A请求后置处理添加如 ...

  2. vue2.0 $emit $on组件通信

    在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...

  3. spring location设置本地路径

    <context:property-placeholder location="file:D:/jdbc.properties"/> 直接在路径前加上 file:

  4. [HNOI2004]打鼹鼠

    鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿牛编写了一个打鼹鼠的游戏:在一个\(n*n\)的网格中,在某些时刻鼹鼠会在某一个网格探出头来透透气.你 ...

  5. java设计模式之适配器模式以及在java中作用

    适配器作用就是讲一个接口适配到另一个接口,在Java 的I/O类库中有很多这样的需求,如将字符串数据转变成字节数据保存到文件中,将字节数据转变成流数据等. 以InputStreamReader和Out ...

  6. [转]Hibernate入门：批量插入数据

    转自:http://blog.csdn.net/xiazdong/article/details/7709068 一般如果要插入100万条数据,则会写如下代码: package org.xiazdon ...

  7. Week8 Teamework from Z.XML-Z.XML游戏功能说明

    我们小组的游戏终于新鲜出炉了,好开心~ 快来看看有什么功能吧. 游戏目标::=打倒最多的敌人,获得积分,放松心情,获取快乐. 游戏菜单::= 关于+设置+帮助+积分榜+开始游戏吧 (截图还在路上..) ...

  8. [转]学习win10的bash使用ssh连接远程服务器

    1. 前言 微软已经在Win10一周年更新预览版中加入了Ubuntu Bash命令支持,相当于一个小型的linux系统,本来连接远程服务器的话,要使用putty啥的,现在可以用这个直接连接,我来讲讲步 ...

  9. Object类中的五种方法

    clone() Object类源码:protected native Object clone() throws CloneNotSupportedException; 这里有个问题:为什么Sun公司 ...

  10. Good Time 冲刺 三

    第三天 日期:2018.6.16 一.今日完成任务情况及遇到的问题 王怡镔:继续在学习微信小程序的设计,完善设计发现页面,开始编写发现页面 于鑫宇:配合黄鹤的工作,学习端口相关知 胡雅馨:继续改进优化 ...