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. hihoCoder 1175:拓扑排序二

    题目链接: http://hihocoder.com/problemset/problem/1175 题目难度:一星级(简单题) 今天闲来无事,决定刷一道水题.结果发现这道水题居然把我卡了将近一个钟头 ...

  2. 今日Linux下安装部署禅道

    我的linux系统是在虚拟机上安装的Ubuntu,禅道在官网www.zentao.net下载安装的开源版的linux64位,采用一键安装包安装.安装前要求:系统上不能有自己安装的mysql .下载的安 ...

  3. 第三十四篇 Python面向对象之 反射(自省)

    什么是反射? 反射的概念是由Smith在1982年提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被程序语 ...

  4. VC++之运算符重载简单小结

    封装继承和多态是面向对象三大基本支柱.在面向对象系统中有两种编译方式:静态联编和动态联编静态联编:也叫早期联编:指系统在编译时就决定如何实现某一动作,提供了执行速度快的优点.动态联编:也叫滞后联编:指 ...

  5. LCA(最近公共祖先)——LCA倍增法

    一.前人种树 博客:最近公共祖先 LCA 倍增法 博客:浅谈倍增法求LCA 二.沙场练兵 题目:POJ 1330 Nearest Common Ancestors 代码: const int MAXN ...

  6. poj1200 字符串hash 滚动哈希初探

    假如要判断字符串A“AABA”是否是字符串B“AABAACAADAABAABA”的子串 最朴素的算法是枚举B的所有长度为4的子串,然后逐个与A进行对比,这样的时间复杂度是O(mn),m为A的长度,n为 ...

  7. LTE中基于S1的切换

    1:源eNodeB决定进行基于S1的切换.S1切换的原因可能是源eNodeB和目标eNodeB之间不存在X2连接,或者源eNodeB根据其他情况作出的判断. 2:源eNodeB向源MME发送Hando ...

  8. python的三种控制流

    什么是控制流 >>控制代码执行顺序的语句 >>python中有哪些控制流 >>顺序结构 >>> a = 7 >>> print( ...

  9. [剑指Offer] 12.数值的整数次方

    [思路1]递归 class Solution { public: double Power(double base, int exponent) { ){ /base; exponent = -exp ...

  10. Nginx学习笔记之加强篇

    在上一篇文章Nginx学习笔记之应用篇中,我们已经可以正式运行自己的网站了.但是在使用Nginx服务器时还需要注意几个问题: 1.Nginx服务器上配置的单个站点的并发量不超过1024 2.Nginx ...