CodeMirror使用说明书

CodeMirror 使用方法

初步建立步骤

npm install codemirror下载组件
引入核心配置包

import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'

引入后在html界面中建立textarea标签，用于生成代码框

<textarea class="form-control" id="code" name="code"></textarea>

根据textarea的id获取到标签元素，将容器转换为编辑器

let myTextarea = document.getElementById('editor');
this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
mode:'javascript'//编辑器语言
theme:'monokai', //编辑器主题
extraKeys: {"Ctrl": "autocomplete"},//ctrl可以弹出选择项
lineNumbers: true//显示行号
});

5.根据设置的主题，引入相应的主题包,主题包存储在theme下，使用其他主题包时设置option中theme为对应主题

import 'codemirror/theme/monokai.css'

6.根据设置的编辑器语言，引入相应工具包,以下为常用语言包

import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/clike/clike'
import 'codemirror/mode/go/go'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/http/http'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/http/http'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/xml/xml'

7.初始化编译器时可设置属性：

value:初始内容
Mode:设置编译器编程语言关联内容，对应的mine值
Theme:编译器的主题，需要引入对应的包
tabSize：tab的空格宽度
lineNumbers：是否使用行号
smartIndent：自动缩进是否开启
indentUnit：缩进单位
keyMap：快捷键，default使用默认快捷键，除此之外包括emacs，sublime，vim快捷键，使用需引入工具

import codemirror/keymap/sublime.js
import codemirror/keymap/emacs.js
import codemirror/keymap/vim.js

extraKeys 快捷键,例如 {“Ctrl-Q”: “autocomplete”}：自动补全使用需要引入工具：

　　import 'codemirror/addon/hint/show-hint'import 'codemirror/addon/hint/javascript-hint'import 'codemirror/addon/hint/sql-hint'import 'codemirror/addon/hint/html-hint'import 'codemirror/addon/hint/xml-hint'import 'codemirror/addon/hint/anyword-hint'import 'codemirror/addon/hint/css-hint'import 'codemirror/addon/hint/show-hint'

extraKeys的快捷键绑定命令：
- selectAllCtrl-A ：选择编辑器的全部内容。
- killLine:Emacs式的清除行。用于删除行内光标后的内容。如果只包含空白字符，行尾的新行(应该是指换行字符)也会被删除。
- deleteLine :删除光标所在整行，包括行尾的新行。
- delLineLeft:删除行内光标前的内容。
- delWrappedLineLeft:删除光标所在可见行左边到光标处的部分。（这里是针对在行内有换行显示的情况，也就是说可能不是一行全部处理，而是只处理行的一部分）
- delWrappedLineRight：删除光标所在可见行光标处到右边的部分。（同上）
- undo：撤消最后一次更改。
- redo:重做最后一次撤消更改。
- undoSelection:撤消最后一次选择的更改，如果没有选择更改，那么就撤消最后一次文本更改。
- redoSelection:重做最后一次选择的更改，如果没有选择更改，那么就重做最后一次文本更改。
- goDocStart:移动光标到文档开始处。
- goDocEnd:移动光标到文档结束处。
- goLineStart:移动光标到行开始处。
- goLineStartSmartHome:移动光标到行文字开始处，如果光标已经在那，那么就移动到行的真正开始处。
- goLineEnd:移动光标到行结束处。
- goLineRight:移动光标到可见行右边。
- goLineLeft：移动光标到可见行左边。如果行内有换行，那么可能不会移动到行开始处。
- goLineLeftSmart：移动光标到行文字开始处，如果光标已经在那，那么就移动到行的真正开始处。
- goLineUp：移动光标到上一行。
- goLineDown：移动光标到下一行。
- goPageUp：移动光标到上一屏，（每次）向上滚动相同距离。
- goPageDown：移动光标到下一屏，（每次）向下滚动相同距离。
- goCharLeft：光标向左移动一个字符，如果在光标行首，那么移动到前一行。
- goCharRight：光标向右移动一个字符，如果在光标行尾，那么移动到后一行。
- goColumnLeft:光标向左移动一个字符，但是不会超过行边界。
- goColumnRight：光标向右移动一个字符，但是不会超过行边界。
- goWordLeft:光标移动到前一个词开始处。
- goWordRight：光标移动到后一个词结束处。
- goGroupLeft：移动光标到光标前的组的左边。组是词的扩展，扩展到标点符号，新行或者是多个空白字符。
- goGroupRight：移动光标到光标后的组的右边。组是词的扩展，扩展到标点符号，新行或者是多个空白字符。
- delCharBefore:删除光标前的一个字符。
- delCharAfter:删除光标后的一个字符。
- delWordBefore:删除光标前的一个词。
- delWordAfter:删除光标后的一个词。
- delGroupBefore：删除光标前的一个组。
- delGroupAfter：删除光标后的一个组。
- indentAuto：自动缩进当前行或选中行。
- indentMore：缩进当前行或选中行一个缩进单位。
- indentLess：反缩进当前行或选中行一个缩进单位。（移除一个缩进单元）
- insertTab：在光标处插入Tab字符。
- insertSoftTab：在光标处插入与Tab字符等宽的空格字符。
- defaultTabTab：如果有选中行，则缩进一个缩进单位；如果没有选择行，则插入一个Tab字符。
- transposeChars：交换光标前后的字符。
- newlineAndIndentEnter：插入新行并且自动缩进。
- toggleOverwriteInsert：反转overwrite标志。
- save：只存在快捷键中，核心库未定义。这是为了给用户编码提供一个简单的方法来定义保存命令。
- find：查找。
- findNext:向前查找。
- findPrev:向后查找。
- replace:替换。
- replaceAll:全部替换。
scrollbarStyle: 设置滚动条,默认为"null"为不显示的滚动条，可以使用提供的其他滚动条：“simple”,"overlay"选择内侧与外侧的滚动条,使用需引入以下工具包：

import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'

readOnly：设置为只读true/false;也可设置为"nocursor"失去焦点
Autofocus：初始时是否自动获取焦点boolean
styleActiveLine: 设置光标所在行高亮true/false，需引入工具包：

import 'codemirror/addon/selection/active-line'

8.动态设置CodeMirror属性：(以设置支持语言mode为例)

this.CodeMirrorEditor.setOption("mode",this.something)

编译器的事件触发器

触发器使用方法：(change事件为例)

this.CodeMirrorEditor.on("change",function(){
//事件触发后执行事件
alert("change")
});

取消触发器方法：

this.CodeMirrorEditor.off("change")

“changes”：每次编辑器内容更改时触发
“beforeChange”：事件在更改生效前触发
“cursorActivity”：当光标或选中(内容)发生变化，或者编辑器的内容发生了更改的时候触发。
“keyHandled”:快捷键映射(key map)中的快捷键被处理(handle)后触发
“inputRead”:当用户输入或粘贴时编辑器时触发。
“electrictInput”:收到指定的electrict输入时触发
“beforeSelectionChange”:此事件在选中内容变化前触发
“viewportChange”：编辑器的视口( view port )改变（滚动，编辑或其它动作）时触发
“gutterClick”：编辑器的gutter(行号区域)点击时触发
“focus”：编辑器收到焦点时触发
“blur”:编辑器失去焦点时触发
“scroll”:编辑器滚动条滚动时触发
“keydown”, “keypress”, “keyup”，“mousedown”, “dblclick”硬件事件触发器

API

this.CodeMirrorEditor.setValue(“Hello Kitty”)：设置编辑器内容
this.CodeMirrorEditor.getValue()：获取编辑器内容
this.CodeMirrorEditor.getLine(n):获取第n行的内容
this.CodeMirrorEditor.lineCount()：获取当前行数
this.CodeMirrorEditor.lastLine()：获取最后一行的行号
this.CodeMirrorEditor.isClean():boolean类型判断编译器是否是clean的
this.CodeMirrorEditor.getSelection()：获取选中内容
this.CodeMirrorEditor.getSelections():返回array类型选中内容
this.CodeMirrorEditor.replaceSelection(“替换后的内容”):替换选中的内容
this.CodeMirrorEditor.getCursor():获取光标位置,返回{line,char}
this.CodeMirrorEditor.setOption("",""):设置编译器属性
this.CodeMirrorEditor.getOption(""):获取编译器属性
this.CodeMirrorEditor.addKeyMap("",""):添加key-map键值，该键值具有比原来键值更高的优先级
this.CodeMirrorEditor.removeKeyMap（""）:移除key-map
this.CodeMirrorEditor.addOverlay(""):Enable a highlighting overlay…没试出效果
this.CodeMirrorEditor.removeOverlay（""）:移除Overlay
this.CodeMirrorEditor.setSize(width,height):设置编译器大小
this.CodeMirrorEditor.scrollTo(x,y):设置scroll到position位置
this.CodeMirrorEditor.refresh():刷新编辑器
this.CodeMirrorEditor.execCommand(“命令”):执行命令

效果图：(和编辑器好像啊)

实现代码：
setting.ts

import Vue from 'vue'
import { Component, Prop, Watch} from 'vue-property-decorator'
import  * as WithRender from './setting.html?style=./setting.less'
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/theme/monokai.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/clike/clike'
import 'codemirror/mode/go/go'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/http/http'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/http/http'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/xml/xml'
import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/html-hint'
import 'codemirror/addon/hint/xml-hint'
import 'codemirror/addon/hint/anyword-hint'
import 'codemirror/addon/hint/css-hint'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/fold/markdown-fold'
import 'codemirror/mode/meta'
import "codemirror/addon/fold/foldgutter.css"
import "codemirror/addon/fold/foldcode"
import "codemirror/addon/fold/brace-fold"
import 'codemirror/addon/selection/active-line'
@WithRender
@Component
export class Setting extends Vue{nameArray=new Array();modeArray=new Array();mapArray=new Array();CodeMirrorEditor;something="";    mounted(){console.log(CodeMirror)for(var i=0;i<CodeMirror.modeInfo.length;i++){let mode=CodeMirror.modeInfo[i];this.mapArray.push({name:mode.name,mode2:mode.mode})}this.something="javascript"document.getElementById("theme").nodeValue="javascript"this.setmirror()}transToSrc(name:string):string{  return "assets/codemirror/mode/"+name+"/"+name+".js";}@Watch('something')aaa() {var headElement=document.body;var element=document.createElement("script");element.setAttribute("src",this.transToSrc(this.something));headElement.appendChild(element);element.() => {this.CodeMirrorEditor.setOption("mode",this.something)   }} setmirror(){let myTextarea = document.getElementById('editor');this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {theme:'monokai', styleActiveLine: true,mode:'javascript',extraKeys: {"Ctrl": "autocomplete"},//输入s然后ctrl就可以弹出选择项  // lineNumbers: true,tabSize:10,// readOnly:"nocursor",smartIndent:true,scrollbarStyle:"overlay"// keymap:"defaule"});// this.CodeMirrorEditor.setOption('lineWrapping', true);this.CodeMirrorEditor.on("keypress",() =>{//编译器内容更改事件console.log(this.CodeMirrorEditor)this.CodeMirrorEditor.showHint();});this.CodeMirrorEditor.setValue("Hello Kitty\nHello Tony\nHow are you\nFine thank you and you \nI love you")this.CodeMirrorEditor.setOption("lineNumbers","true")// this.CodeMirrorEditor.addOverlay("coconut");// this.CodeMirrorEditor.markText({line:0,ch:0},{line:0,ch:0})this.CodeMirrorEditor.setBookmark({line:0,ch:0},{line:0,ch:1},{readOnly:true}); this.CodeMirrorEditor.setCursor(0)this.CodeMirrorEditor.setSize(600,600)}}

setting.html

<div class="setting">   <select id="theme"  v-model="something"><option v-for="name in mapArray" :value='name.mode2'>{{name.name}}</option></select><textarea id="editor" name="editor"></textarea>
</div>

setting.less

.setting{margin: 0;width: 1398px;height: 600px;background-color: rgb(248, 248, 248);h1{margin: 0;}
}

CodeMirror使用说明书相关推荐

【强烈推荐】国土档案管理信息系统产品使用说明书系列目录【附下载地址】...
<<国土档案管理信息系统>> 产品使用说明书系列目录 [附下载地址] --通过知识共享树立个人品牌. <国土档案管理信息系统>在线视频讲解一.记大型商业软件< ...
通用权限管理组件使用说明书V3.0 错误校正感谢自由软件职业者Helper（767870484）...
有时候,真想做个像样的东西出来,但是往往各方面的能力都不够,这么多人,Helper(767870484)仔细认真的阅读了这个帮助手册.并给给于了指正,在这里非常感谢,你的劳动成果已经被通用权限管理积累 ...
CodeMirror 5.26.0 发布，在线代码编辑器
CodeMirror 5.26.0 已发布,CodeMirror 是一款"Online Source Editor",基于 Javascript,短小精悍,实时在线代码高亮显示,它 ...
Smartmail外贸CRMBuild1.0版使用说明书
Smartmail外贸CRMBuild1.0版使用说明书<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:offic ...
wxpython问卷调查界面_调查问卷使用说明书，问卷就要这么设计！
原标题:调查问卷使用说明书,问卷就要这么设计! 提到调查问卷,不知它在大家心里的地位如何?其实我们工作中,需要用到它的场景还很多:比如推出一款新产品,我们会做一个市场调研,探探市场:对已运营中的产品进 ...
东尼•博赞的思维导图丛书之一《大脑使用说明书》
东尼•博赞的思维导图丛书之一 <大脑使用说明书> posted on 2016-05-30 00:59 风矛之丘阅读(...) 评论(...) 编辑收藏转载于:https://www ...
CodeMirror的使用方法
这里是利用vue来开发项目: 1.利用textare生成编辑器<textarea ref="textarea"></textarea>2.创建编辑器对象le ...
广数系统980tdb系统说明书_汽车离合操纵系统随车检测工具使用说明书
汽车离合操纵系统随车检测工具使用说明书(陕汽服务站) 一.离合操纵系统随车检测工具介绍: 1.商用汽车离合系统的主要故障:离合沉重.离合无法分离(不好挂挡).离合结合不平顺 ...
ajax中itemtexts,从Jquery Ajax调用CodeMirror textarea的值设置
我试图从Jquery中的Ajax调用中获取值到正在使用CodeMirror脚本的Textarea的value属性. 我已经尝试了将textarea的.html()和.val()属性设置为我的Ajax调 ...
在线代码编辑器---codemirror插件
1.管网地址: http://codemirror.net/ 2.插件调用方法: 3.常用事件 1.onChange(instance,changeObj):codeMirror文本被修改后触发. i ...