CodeMirror是一个用JavaScript为浏览器实现的多功能文本编辑器。它专门用于在线编辑代码，并附带了许多语言模式和插件，实现了更高级的编辑功能。发行版中包含npm第三方插件。

        本文包含codemirror所有的options配置项说明，以及完整的使用示例。

一、用户手册和参考指南

vue-codemirror Github 地址：  https://github.com/surmon-china/vue-codemirror
codemirror 6英文文档(vue3.0)： https://codemirror.net/docs/guide
codemirror 5英文文档(vue2.0)： https://codemirror.net/doc/manual.html#config

1.1 浏览器支持

  • firefox          4及以上版本
  • chrome        任意版本
  • safari           5.2及以上版本
  • Internet Explorer/ edge      版本8及以上
  • opera           版本9及以上

二、配置项 options

        CodeMirror函数及其fromTextArea方法都将包含配置选项的对象作为第二个(可选)参数。任何对象都没有提供的选项将从codemror .defaults中获取，这是一个包含默认选项的对象。您也可以更新此对象以更改页面上的默认值。

value: string|CodeMirror.Doc

编辑器的初始值。可以是字符串，也可以是文档对象。

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

mode: string|object 

要使用的语言模式。如果未指定，这将默认为加载的第一个模式。值“null”表示不应用高亮显示。

注意：如设置了指定语法模式代码并未高亮显示，可能需要import指定语法包。

import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/groovy/groovy.js'

lineSeparator: string|null

显式设置编辑器的换行分隔符。默认情况下(值为null)

theme: string

设置编辑器主题样式。默认值default

indentUnit: integer

应该缩进多少空格。默认值 2

smartIndent: boolean

上下文缩进是否与前一行相同。默认为true

tabSize: integer

制表符的宽度。默认为4。

indentWithTabs: boolean

当缩进时，第一个N*tabSize空格是否应该被N个制表符取代。默认为false。

electricChars: boolean

配置编辑器是否应该在输入可能改变其适当缩进的字符时重新缩进当前行(仅在模式支持缩进时才有效)。默认为true。

specialChars: RegExp

一种正则表达式，用于确定应该用特殊占位符替换哪些字符。默认值为/[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\u2066\u2067\u2069\ufeff\ufff9-\ufffc]/。

specialCharPlaceholder: function(char) → Element

一个函数，如果给定一个由specialChars选项标识的特殊字符，它会生成一个用于表示该字符的DOM节点。默认情况下，显示一个红点(•)，并带有一个标题工具提示来指示字符代码。

direction: "ltr" | "rtl"

翻转整体布局并选择基本段落方向为从左到右或从右到左。默认为“ltr”。

rtlMoveVisually: boolean

确定光标在从右到左(阿拉伯语、希伯来语)文本中的水平移动是可视的(按下左箭头将光标向左移动)还是逻辑的(按下左箭头将光标移动到字符串中的下一个较低的索引，在从右到左的文本中显示为右)。在Windows上默认为false，在其他平台上为true。

keyMap: string

配置要使用的键映射。默认值是"default"

extraKeys: object

可用于为编辑器指定额外的键绑定，以及由keyMap定义的键绑定。应该为空，或者是一个有效的键映射值。

configureMouse: fn(cm: CodeMirror, repeat: "single" | "double" | "triple", event: Event) → Object

配置鼠标选择和拖动的行为。

lineWrapping: boolean

codemirmirror对于长行是否应该滚动或换行。默认为false(滚动)。

lineNumbers: boolean

是否在编辑器左侧显示行号。

firstLineNumber: integer

从哪个数字开始数行。默认值为1。

lineNumberFormatter: function(line: integer) → string

用于格式化行号的函数。传递函数

gutters: array<string | {className: string, style: ?string}>

添加额外的槽（在行号槽之外或代替行号槽）

fixedGutter: boolean

确定gutter是与内容一起水平滚动(false)还是在水平滚动期间保持固定(true，默认值)。

scrollbarStyle: string

滚动条样式。默认值 native。设置为null，将隐藏滚动条

coverGutterNextToScrollbar: boolean

默认情况下，该滚动条的左侧将显示gutter。如果这个选项被设置为true，它将被一个类为codemmirror - guter -filler的元素覆盖。

inputStyle: string

输入方式。核心库定义了“textarea”和“contenteditable”输入模型。在桌面浏览器上，默认是“textarea”。在移动浏览器上，默认设置是“contenteditable”。

readOnly: boolean|string

编辑器是否为只读，默认值false。如果指定了特殊值"nocursor"(而不是简单地为true)，则不允许对编辑器进行聚焦。

screenReaderLabel: string

当CodeMirror文本区域聚焦时，屏幕阅读器将读取此标签。这有助于提高可访问性。

showCursorWhenSelecting: boolean

当选择处于活动状态时是否应该绘制光标。默认为false。

lineWiseCopyCut: boolean

当启用时(默认值)，在没有选择的情况下执行复制或剪切将复制或剪切带有光标的整行。

pasteLinesPerSelection: boolean

当从外部源(不是从编辑器本身)粘贴内容时，如果行数与选择的数量匹配，CodeMirror将默认地为每个选择插入一行。您可以将此设置为false以禁用该行为。

selectionsMayTouch: boolean

确定多个选择是在它们接触时立即连接(默认值)还是仅在它们重叠时连接(true)。

undoDepth: integer

编辑器存储的撤消级别的最大数目。注意，这包括选择更改事件。默认为200。

historyEventDelay: integer

历史事件延时，默认为1250ms

tabindex: integer       

编辑器的选项卡索引

autofocus: boolean   

自动聚焦。默认为false

phrases: ?object

当它为空或对象没有输入字符串命名的属性时，返回该字符串。否则，返回与该字符串对应的属性值。

dragDrop: boolean 

控制是否启用拖放。默认为开启。

allowDropFileTypes: array<string>

默认值null，只有类型在数组中的文件才能被放入编辑器中。字符应该为MIME类型

cursorBlinkRate: number

光标闪烁的半周期(以毫秒为单位)。缺省闪烁速率为530ms。通过将此设置为零，可以禁用闪烁。负值完全隐藏游标。

cursorScrollMargin: number

在可滚动文档中，当接近可见视图的顶部或底部时，光标上方和下方应始终保持多少额外空间。默认为0。

cursorHeight: number   设置光标的高度，默认值 1

singleCursorHeightPerLine: boolean

默认值true，将使整行(或行中换行的一部分)的光标高度保持恒定。当为false时，游标的高度基于相邻引用字符的高度。以上翻译结果来自有道神经网络翻译（YNMT）· 通用场景

resetSelectionOnContextMenu: boolean

控制在当前选择项之外通过单击打开上下文菜单时，是否将光标移动到单击点。默认为true。

workTime, workDelay: number

高亮显示是由一个伪后台线程完成的，该线程将在workTime毫秒内工作，然后使用timeout来休眠workDelay毫秒。默认值是200和300

pollInterval: number

指示CodeMirror应该以多快的速度轮询其输入文本区域以进行更改(当聚焦时)。大多数输入都是由事件捕获的，但是有些东西，比如某些浏览器上的IME输入，不会生成允许CodeMirror正确检测它的事件。因此，它进行轮询。缺省值是100毫秒。

flattenSpans: boolean

默认为true，如果相邻的令牌具有相同的类，CodeMirror会将它们组合成一个span

addModeClass: boolean

当启用时(默认为关闭)，将向每个标记添加一个额外的CSS类，指示生成它的(内部)模式，前缀为“cm-m-”。例如，来自XML模式的令牌将获得cm-m-xml类。

maxHighlightLength: number

当高亮显示长行时，为了保持响应性，编辑器将放弃，并在到达特定位置时将该行的其余部分设置为纯文本样式。默认值是10000。您可以将其设置为'infinity'以关闭此行为。

viewportMargin: integer 

当前滚动到视图中的文档部分上方和下方呈现的行数。默认值10

spellcheck: boolean     //启用拼写检查。

autocorrect: boolean  //启用自动更正。

autocapitalize: boolean  //启用自动大写。

2.1 mode 语法

配置项中mode选项可以设置codemirror使用某种语言。以下是codemirror支持的mode清单，点击链接可以参考指定语法的设置方式。例：在线编辑Groovy，mode设置为：'text/x-groovy'。

2.2 theme 主题

三、使用示例

vue-codemirror 安装下面两个插件，必须两个都安装

npm i vue-codemirror@4.x --save

npm i codemirror@5.x --save

vue组件中使用 

<template>
    <codemirror 
        ref="codeEditor"
        v-model="code"
        :options="cmOptions"
        :style="codemirrorStyle" 
        @input="onCmCodeChange" 
    ></codemirror>
</template>

<script>
import { codemirror } from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';

export default{
    components: {
      codemirror
    },
    data(){
        return {
            code: ,
            cmOptions: {
                mode: 'application/javascript',
                theme: "base16-dark",
                gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
                lineNumbers: true,
                line: true,
                lint: true,
                lineWrapping: true,
                autofocus: true,
                autoCloseBrackets: true,
                foldGutter: true, // 块槽
                hintOptions: { completeSingle: true },
                matchTags: { bothTags: true },
                matchBrackets: true,
                showCursorWhenSelecting: true,
                styleSelectedText: true,
                styleActiveLine: true,
                autoRefresh: true,
                highlightSelectionMatches: {
                    minChars: 2,
                    trim: true,
                    style: "matchhighlight",
                    showToken: false
                },
            },
            codemirrorStyle: {
                fontSize: '14px',
                lineHeight: '150%',
                border: '1px solid #EBEEF5',
                height: '96%'
            }
        }
    },
    methods:{
        onCmCodeChange(newCode) {
            this.code = newCode
        }
    }
}
</script>

效果图： 

# vue.js # javascript # 前端
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

新华网：开源盛会在江城——2024开放原子开发者大会侧记

开源盛会在江城——2024开放原子开发者大会侧记

avatar 开放原子开发者工作坊

新华社：释放开源潜能，加快构筑软件创新“朋友圈”

释放开源潜能，加快构筑软件创新“朋友圈”

avatar 开放原子开发者工作坊

开源鸿蒙：引领万物智联，加速生态崛起

开源鸿蒙：引领万物智联，加速生态崛起

avatar 开放原子开发者工作坊