CodeMirror使用小结

CodeMirror可以在线编辑代码，风格包括js, java, php, c++等等100多种语言。比较强大可以自行配置语言模式。能够做到自动补全，代码折叠，可配置键盘事件，vim， emacs， sublime text 风格、能完成查找替换，括号匹配，分栏显示，显示行号，自行配置字体大小和风格，等等等等。。。

官网地址如下： https://codemirror.net/index.html 使用前下载插件，文件夹结构如下

1、最最基本功能，需引入codemirror.js和codemirror.css文件，如下：

<link rel="stylesheet" href="./static/lib/codemirror/lib/codemirror.css" /><script src="./static/lib/codemirror/lib/codemirror.js"></script>

2、通过调用CodeMirror.fromTextArea（）方法或者 CodeMirror（）方法初始化配置。(更多配置见官网)

2.1 通过CodeMirror.fromTextArea（），通过HTML中的<textarea>标签

注意： 1> 要实现什么风格的，就要引入改风格的 js 文件，例如 java需要引入 mode/clike/clike.js文件。所有语言风格的 js 文件都存放在mode文件夹中，按需引入即可

2>以下配置的属性，大多都需要将对应插件引入后才能使用（codemirror麻烦的地方，需要引入大量的文件）

let editor = CodeMirror.fromTextArea(document.getElementById("FunctionEditor"), {

mode: "text/x-java", //实现Java代码高亮

lineNumbers: true, //显示行号

theme: "darcula", //设置主题

lineWrapping: true, //代码折叠

foldGutter: true,

gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],

matchBrackets: true, //括号匹配

autoCloseBrackets: true,

// showHint: true,

extraKeys:{"Ctrl-Space":"autocomplete"}//ctrl-space唤起智能提示

});

赋值方法有两种，

一种是HTML标签里设置好textarea的value属性，

一个是通过CodeMirror.fromTextArea的setValue（str）方法设置值

2.2 通过CodeMirror（），配置方法同上，不需要非得是textarea

      var myCodeMirror = CodeMirror(document.body, {value: "function myScript(){return 100;}\n",mode:  "javascript"});

3、保存输入的代码，调用getValue（）方法

CodeMirror使用小结相关推荐

【阶段小结】协同开发——这学期的Git使用小结
[阶段小结]协同开发--这学期的Git使用小结一.Git简介 1. Git简单介绍 2. Git工作流程以及各个区域 3. Git文件状态变化二.Git安装&Git基本配置三.个人踩坑 ...
正则表达式(括号)、[中括号]、{大括号}的区别小结
正则表达式(括号).[中括号].{大括号}的区别小结 </h1><div class="clear"></div><div class=& ...
php中$_REQUEST、$_POST、$_GET的区别和联系小结
php中$_REQUEST.$_POST.$_GET的区别和联系小结作者: 字体:[增加减小] 类型:转载 php中有$_request与$_post.$_get用于接受表单数据,当时他们有何种区 ...
c cin.get()的用法小结_c语言中static 用法
static在c里面可以用来修饰变量,也可以用来修饰函数. 先看用来修饰变量的时候.变量在c里面可分为存在全局数据区.栈和堆里.其实我们平时所说的堆栈是栈而不是堆,不要弄混. int a ; int ...
linux 压缩文件夹格式,Linux下常见文件格式的压缩、解压小结
Linux下常见文件格式的压缩.解压小结 .tar 解包: tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ...
设计模式：简单工厂、工厂方法、抽象工厂之小结与区别
简单工厂,工厂方法,抽象工厂都属于设计模式中的创建型模式.其主要功能都是帮助我们把对象的实例化部分抽取了出来,优化了系统的架构,并且增强了系统的扩展性. 本文是本人对这三种模式学习后的一个小结以及对他 ...
flash 入门课知识小结
一. 几种类型帧的小结:(关键帧.空白关键帧.普通帧) 1. 特点帧--是进行flash动画制作的最基本的单位,每一个精彩的flash动画都是由很多个精心雕琢的帧构成的,在时间轴上的每一帧都可以 ...
Eigen/Matlab 使用小结
文章目录 [Eigen Matlab使用小结](https://www.cnblogs.com/rainbow70626/p/8819119.html) Eigen初始化 0.[官网资料](http: ...
MATLAB【十三】————仿真函数记录以及matlab变成小结
part one:matlab 编程小结. 1.char 与string的区别,char使用的单引号 '' ,string使用的是双引号"". 2.一般标题中的输出一定要通过 nu ...

CodeMirror使用小结

CodeMirror使用小结相关推荐

最新文章

热门文章