Vue进阶（幺捌肆）：CodeMirror 应用小结_codemirror 禁止编辑(1)

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

:value=“curCode”
:options=“cmOptions”
class=“code”
style=“height: 100%”
@changes=“changes”

### 三、options 配置项说明


**注：`vue-codemirror`中`options`配置项和`codemirror`一样！**


* `value: string|CodeMirror.Doc`  
 编辑器的起始值。可以是字符串，也可以是文档对象。
* `mode: string|object`  
 使用的模式。如果没有给出，默认为加载第一个模式。它可以是一个字符串，可以简单地命名模式，也可以是与模式关联的`MIME`类型。或者，它可以是包含模式配置选项的对象，具有`name`命名模式的属性（例如`{name: “javascript”, json: true}`）。每种模式的演示页面都包含有关模式支持的配置参数的信息。可以通过检查`CodeMirror.modes` 和`CodeMirror.mimeModes`对象来询问`CodeMirror`已定义了哪些模式和`MIME`类型。第一个将模式名称映射到它们的构造函数，第二个将`MIME`类型映射到模式规范。
* `lineSeparator: string|null`  
 显式设置编辑器的行分隔符。默认情况下（值`null`），文档将在`CRLF`以及单独的`CR`和`LF`上拆分，并且单个`LF`将在所有输出中用作行分隔符（例如`getValue`）。给定特定字符串时，只会在该字符串上拆分行，默认情况下，输出将使用相同的分隔符。
* `theme: string`  
 编辑器设计样式的主题。必须确保`.cm-s-[name]` 已加载定义相应样式的`CSS`文件（请参阅`theme`分发中的目录）。默认值为"`default`"，包含的颜色`codemirror.css`。它可以使用多个主题化，例如"`foo bar`"将同时分配`cm-s-foo`和`cm-s-bar`类编辑器。
* `indentUnit: integer`  
 一个块（编辑语言中的含义）应缩进多少个空格。默认值为`2`。
* `smartIndent: boolean`  
 是否使用模式提供的上下文相关缩进（或者只是缩进与之前的行相同）。默认为`true`。
* `tabSize: integer`  
 制表符的宽度。默认为`4`。
* `indentWithTabs: boolean`  
 在缩进时，是否`tabSize` 应该用`N`个制表符替换前`N *`个空格。默认值为`false`。
* `electricChars: boolean`  
 配置编辑器在键入可能更改其正确缩进的字符时，是否应重新缩进当前行（仅在模式支持缩进时才有效）。默认为`true`。
* `specialChars: RegExp`  
 用于确定哪些字符应由特殊占位符替换的正则表达式。非常适用于非打印特殊字符。默认是`/[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff]/`。
* `specialCharPlaceholder: function(char) → Element`  
 给定由`specialChars` 选项标识的特殊字符的函数，生成用于表示字符的`DOM`节点。默认情况下，会显示一个红点（`•`），并带有标题工具提示以指示字符代码。
* `direction: “ltr” | "rtl"`  
 翻转整体布局并选择基本段落方向为从左到右或从右到左。默认为“`ltr`”。`CodeMirror`将`Unicode`双向算法应用于每一行，但不自动检测基本方向 - 它设置为所有行的编辑器方向。当基本方向与用户意图不匹配时，生成的顺序有时会出错（例如，前导和尾随标点跳转到行的错误一侧）。因此，允许用户切换此选项对多语言输入很有帮助。
* `rtlMoveVisually: boolean`  
 确定通过从右到左（阿拉伯语，希伯来语）文本的水平光标移动是否是可视的（按向左箭头向左移动光标）或逻辑（按向左箭头移动到字符串中的下一个较低索引，这在视觉上是正确的从右到左的文字）。默认设置`false` 在`Windows`上，`true`在其他平台上。
* `keyMap: string`  
 配置要使用的键映射。默认值是"`default`"，这是唯一定义的键映射`codemirror.js`。`key map`目录中可以找到额外的键映射。有关详细信息，请参阅关键映射部分。
* `extraKeys: object`  
 可用于为编辑器指定额外的键绑定，以及由其定义的绑定`keyMap`。应为`null`或有效的键映射值。
* `configureMouse: fn(cm: CodeMirror, repeat: “single” | “double” | “triple”, event: Event) → Object`  
 允许您配置鼠标选择和拖动的行为。按下鼠标左键时调用该函数。返回的对象可能具有以下属性：
* `unit: “char” | “word” | “line” | “rectangle” | fn(CodeMirror, Pos) → {from: Pos, to: Pos}`  
 选择的单位。对于自定义单元，可以是内置单元之一，也可以是一个位置并返回其范围的函数。默认设置是返回"`word`“双击，”`line`“三次点击，“`rectangle`”`alt-clicks`（或`Chrome`操作系统，元移位点击）等"`single`” 。
* `extend: bool`  
 是否扩展现有选择范围或开始新选择范围。默认情况下，单击班次时会启用此功能。
* `addNew: bool`  
 启用后，这会为现有选择添加新范围，而不是替换它。默认行为是在`Mac OS`上为命令单击启用此功能，并在其他平台上按住`Control`键单击。
* `moveOnDrag: bool`  
 当鼠标甚至拖动编辑器内部的内容时，它控制是复制（`false`）还是移动（`true`）。默认情况下，通过在`Mac OS`上单击鼠标右键并在其他位置按住`Ctrl`键单击来启用此功能。
* `lineWrapping: boolean`  
 `CodeMirror`是否应滚动或换行以排长行。默认为`false`（滚动）。
* `lineNumbers: boolean`  
 是否在编辑器左侧显示行号。
* `firstLineNumber: integer`  
 在哪个数字开始计数行。默认值为1。
* `lineNumberFormatter: function(line: integer) → string`  
 用于格式化行号的函数。该函数传递给行号，并应返回将在装订线中显示的字符串。
* `gutters: array < string>`  
 可用于添加额外的排水沟（超出或代替行号排水沟）。应该是一个`CSS`类名称数组，每个类名称定义一个`width`（和可选的背景），并将用于绘制排水沟的背景。可以包括`CodeMirror-linenumbers`类，以便明确设置行号装订线的位置（它将默认为所有其他装订线的右侧）。这些类名是传递给的键`setGutterMarker`。
* `fixedGutter: boolean`  
 确定装订线是否水平滚动内容（`false`）或在水平滚动期间是否保持固定（`true`，默认值）。
* `scrollbarStyle: string`  
 选择滚动条实现。默认为"`native`"，显示本机滚动条。核心库还提供了"`null`"完全隐藏滚动条的样式。插件可以实现其他滚动条模型。
* `coverGutterNextToScrollbar: boolean`  
 当`fixedGutter` 打开时，并且存在水平滚动条，默认情况下，此滚动条左侧将显示装订线。如果此选项设置为`true`，则它将由具有类的元素覆盖`CodeMirror-gutter-filler`。
* `inputStyle: string`  
 选择`CodeMirror`处理输入和焦点的方式。核心库定义"`textarea`" 和"`contenteditable`“输入模式。在移动浏览器上，默认为”`contenteditable`"。在桌面浏览器上，默认为"`textarea`"。在"`contenteditable`"模型中支持`IME`和屏幕阅读器更好。目的是使其成为未来现代桌面浏览器的默认设置。
* `readOnly: boolean|string`  
 这会禁止用户编辑编辑器内容。如果"`nocursor`"给出特殊值（而不是简单`true`），则不允许对编辑器进行聚焦。
* `showCursorWhenSelecting: boolean`  
 选择是否处于活动状态时是否应绘制光标。默认为`false`。
* `lineWiseCopyCut: boolean`  
 启用时（默认情况下），在没有选择时执行复制或剪切将复制或剪切其上有游标的整行。
* `pasteLinesPerSelection: boolean`  
 当从外部源（而不是编辑器本身）粘贴某些内容时，如果行数与选择的数量相匹配，则`CodeMirror`将默认为每个选择插入一行。可以将其设置`false`为禁用该行为。
* `selectionsMayTouch: boolean`  
 确定多个选择是在触摸时（默认值）还是仅在它们重叠时（`true`）连接。
* `undoDepth: integer`  
 编辑器存储的最大撤消级别数。请注意，这包括选择更改事件。默认为`200`。
* `historyEventDelay: integer`  
 键入或删除时将导致新历史事件开始的不活动时间（以毫秒为单位）。默认为`1250`。
* `tabindex: integer`  
 要分配给编辑器的选项卡索引。如果没有给出，则不会分配选项卡索引。
* `autofocus: boolean`  
 可用于使`CodeMirror`将焦点集中在初始化上。默认为关闭。当`fromTextArea`使用`when`时，并且没有给出该选项的显式值，当源`textarea`被聚焦时，它将被设置为`true`，或者它具有`autofocus`属性而没有聚焦其他元素。
* `phrases: object`  
 某些插件通过该phrase 方法运行用户可见的字符串（例如界面中的标签）以允许翻译。此选项确定该方法的返回值。如果它为null或者没有输入字符串命名的属性的对象，则返回该字符串。否则，返回与该字符串对应的属性的值。
* `dragDrop: boolean`  
 控制是否启用拖放。默认开启。
* `allowDropFileTypes: array< string>`  
 设置（默认为null）时，只能将类型在数组中的文件放入编辑器中。字符串应该是`MIME`类型，并将根据浏览器报告type 的File对象进行检查。
* `cursorBlinkRate: number`  
 用于光标闪烁的半周期（以毫秒为单位）。默认闪烁率为`530`毫秒。通过将此值设置为零，可以禁用闪烁。负值完全隐藏光标。
* `cursorScrollMargin: number`  
 当接近可滚动文档中可见视图的顶部或底部时，总是在光标上方和下方留出多少额外空间。默认值为0。


### 最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

*   HTML5新特性，语义化

*   浏览器的标准模式和怪异模式

*   xhtml和html的区别

*   使用data-的好处

*   meta标签

*   canvas

*   HTML废弃的标签

*   IE6 bug，和一些定位写法

*   css js放置位置和原因

*   什么是渐进式渲染

*   html模板语言

*   meta viewport原理

![](https://img-blog.csdnimg.cn/img_convert/64590c67cb47cd552a892ba710477f64.png)

*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/17fdfcb90fad04acc5e7273d1f853880.png)