# web_ide
**Repository Path**: shen300200/web_ide
## Basic Information
- **Project Name**: web_ide
- **Description**: 基于 codemirror 插件的网页编辑器，不断收集整理各版本的demo。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-06-05
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# web_ide
#### 介绍
codemirror 插件使用得一点收集总结。
#### 安装教程
下载 codemirror：
方式1.`npm install codemirror`
方式2. https://codemirror.net/codemirror.zip
#### 使用说明
最基本的使用：
```html
```
可以根据需求引入相关文件，例如一个 javascript 语法高亮的编辑器：
```html
```
设置主题：
```html
```
**demo1.html的效果图:**
### 选项说明
`value`: string|CodeMirror.Doc
编辑器的起始值。可以是字符串或文档对象。
`mode`: string|object
使用的模式。如果未指定，则默认为已加载的第一个模式。它可以是一个字符串，可以简单地命名模式，也可以是与该模式关联的MIME类型。该值"null" 表示不应应用突出显示。或者，它可以是一个对象，其中包含该模式的配置选项，并带有一个name命名该模式的属性（例如{name: "javascript", json: true}）。每种模式的演示页面都包含有关该模式支持的配置参数的信息。您可以通过检查CodeMirror.modes 和来询问CodeMirror已定义了哪些模式和MIME类型。CodeMirror.mimeModes对象。第一个将模式名称映射到其构造函数，第二个将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\ufff9-\ufffc]/。
`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单击（或在Chrome OS上为meta-shift单击），"single" 否则返回。
`extend`: bool
扩展现有选择范围还是开始新的选择范围。默认情况下，在按住Shift单击时启用此功能。
`addNew`: bool
启用后，这会将新范围添加到现有选择中，而不是替换它。默认行为是为Mac OS上的命令单击启用此功能，并在其他平台上进行控制单击。
`moveOnDrag`: bool
当鼠标甚至在编辑器内部拖动内容时，这将控制是复制（false）还是移动（true）。默认情况下，可以通过在Mac OS上按住ALT键并单击Ctrl并单击其他位置来启用此功能。
`lineWrapping`: boolean
CodeMirror是否应滚动或换行以显示长行。默认为false（滚动）。
`lineNumbers`: boolean
是否在编辑器的左侧显示行号。
`firstLineNumber`: integer
从哪个数字开始计数行。默认值为1。
`lineNumberFormatter`: function(line: integer) → string
用于格式化行号的功能。该函数将传递给行号，并且应返回一个将在装订线中显示的字符串。
`gutters`: array
可用于添加额外的装订线（在行号装订线之外或代替行号装订线）。应该是CSS类名或类名/ CSS字符串对的数组，每个对都定义一个width（还可以选择一个背景），并用于绘制装订线的背景。可以 包含CodeMirror-linenumbers该类，以便显式设置行号装订线的位置（默认为所有其他装订线的右侧）。这些类名是传递给的键setGutterMarker。
`fixedGutter`: boolean
确定装订线是与内容一起水平滚动（false）还是在水平滚动期间是否保持固定（true，默认）。
`scrollbarStyle`: string
选择滚动条实现。默认值为"native"，显示本机滚动条。核心库还提供了"null"样式，该样式完全隐藏了滚动条。插件可以实现其他滚动条模型。
`coverGutterNextToScrollbar`: boolean
如果fixedGutter 是，有水平滚动条，默认情况下水沟将是这个滚动条的左边可见。如果将此选项设置为true，它将被class类的元素覆盖CodeMirror-gutter-filler。
`inputStyle`: string
选择CodeMirror处理输入和焦点的方式。核心库定义"textarea" 和"contenteditable"输入模型。在移动浏览器上，默认值为"contenteditable"。在桌面浏览器上，默认值为"textarea"。该"contenteditable"模型中对IME和屏幕阅读器的支持更好。目的是使其在将来的现代桌面浏览器中成为默认设置。
`readOnly`: boolean|string
这将禁用用户对编辑器内容的编辑。如果"nocursor"给出了特殊值（而不是简单地给出true），那么也将不允许编辑器聚焦。
`screenReaderLabel`: string
当CodeMirror文本区域成为焦点时，屏幕阅读器会读取此标签。这对可访问性很有帮助。
`showCursorWhenSelecting`: boolean
选择处于活动状态时是否应绘制光标。默认为false。
`lineWiseCopyCut`: boolean
启用后（默认设置），在没有选择的情况下进行复制或剪切将复制或剪切有光标的整行。
`pasteLinesPerSelection`: boolean
从外部源（而不是编辑器本身）粘贴内容时，如果行数与选择的数量匹配，默认情况下，CodeMirror将为每个选择插入一行。您可以将其设置false为禁用该行为。
`selectionsMayTouch`: boolean
确定是否将多个选择一接触（默认）或仅当它们重叠时（真）加入。
`undoDepth`: integer
编辑器存储的最大撤消级别数。请注意，这包括选择更改事件。默认为200。
`historyEventDelay`: integer
不活动的时间段（以毫秒为单位），这将导致在键入或删除时启动新的历史记录事件。默认值为1250。
`tabindex`: integer
分配给编辑器的标签索引。如果未给出，则不会分配标签索引。
`autofocus`: boolean
可用于使CodeMirror专注于初始化。默认为关闭。当fromTextArea使用时，并且没有为此选项提供任何显式值，当源文本区域被聚焦或具有autofocus属性而其他元素都不被聚焦时，它将被设置为true 。
`phrases`: ?object
一些插件通过该phrase 方法运行用户可见的字符串（例如界面中的标签）以允许翻译。此选项确定该方法的返回值。当它为null或对象不具有由输入字符串命名的属性时，将返回该字符串。否则，返回与该字符串对应的属性的值。
在此之下，列出了一些更专业的低级选项。这些仅在非常特殊的情况下有用，您可能希望在初次阅读本手册时跳过它们。
`dragDrop`: boolean
控制是否启用拖放功能。默认为开。
`allowDropFileTypes`: array
设置后（默认值为null），只能将类型为数组的文件放入编辑器。字符串应为MIME类型，并将根据浏览器报告type 的File对象进行检查。
`cursorBlinkRate`: number
光标闪烁所用的半周期（以毫秒为单位）。默认的眨眼速率为530ms。通过将其设置为零，可以禁用闪烁。负值会完全隐藏光标。
`cursorScrollMargin`: number
接近可滚动文档中可见视图的顶部或底部时，始终在光标上方和下方保留多少额外空间。默认值为0。
`cursorHeight`: number
确定光标的高度。默认值为1，表示它跨越线的整个高度。对于某些字体（和某些口味），较小的高度（例如0.85）会导致光标不能一直到达行的底部，因此看起来更好
`resetSelectionOnContextMenu`: boolean
控制在当前选择之外单击鼠标右键打开上下文菜单时，是否将光标移动到单击的位置。默认为true。
`workTime, workDelay`: number
突出显示是通过伪后台线程完成的，该伪线程将工作数workTime毫秒，然后使用超时睡眠数workDelay毫秒。默认值为200和300，您可以更改这些选项以使突出显示或多或少具有攻击性。
`pollInterval`: number
指示CodeMirror应多快轮询其输入文本区域以进行更改（当集中时）。大多数输入是由事件捕获的，但是某些事情（例如某些浏览器上的IME输入）不会生成允许CodeMirror正确检测到它的事件。因此，它进行轮询。默认值为100毫秒。
`flattenSpans`: boolean
默认情况下，如果CodeToken具有相同的类，它们会将相邻的令牌合并为一个范围。这将导致更简单的DOM树，从而表现更好。使用某些样式（例如圆角），这将更改文档的外观。您可以将此选项设置为false以禁用此行为。
`addModeClass`: boolean
启用后（默认情况下处于关闭状态），会向每个令牌添加一个额外的CSS类，以指示产生该令牌的（内部）模式，并以开头"cm-m-"。例如，来自XML模式的令牌将获取cm-m-xml该类。
`maxHighlightLength`: number
当突出显示长行时，为了保持响应速度，编辑器将放弃该行，并在到达特定位置时将其余行设置为纯文本样式。默认值为10000。您可以将其设置Infinity为关闭此行为。
`viewportMargin`: integer
指定在当前滚动到视图中的文档部分的上方和下方呈现的行数。这会影响滚动时所需的更新量，以及这种更新的工作量。您通常应该将其保留为默认值10。可以设置为Infinity确保始终呈现整个文档，因此浏览器的文本搜索可以在其上进行。这将对大文档的性能产生不良影响。
`spellcheck`: boolean
指定是否在输入上启用拼写检查。
`autocorrect`: boolean
指定是否在输入上启用自动更正。
`autocapitalize`: boolean
指定是否在输入上启用自动大写。
### 事件
**1.编辑器实例事件**
`change` 每次更改编辑器的内容时触发。
`changes` 与"change" 事件类似，但按操作进行批处理，传递包含操作中发生的所有更改的数组。
`beforeChange` 在应用更改之前会触发此事件，并且其处理程序可以选择修改或取消更改。
`cursorActivity` 当光标或选区移动或对编辑器内容进行任何更改时，将触发该事件。
`keyHandled` 通过键映射处理键后触发。
`inputRead` 每当从隐藏的文本区域中读取新输入（由用户键入或粘贴）时，就会触发。
`beforeSelectionChange` 在移动所选内容之前会触发此事件。
`viewportChange` 每当编辑器的视图端口发生更改（由于滚动，编辑或任何其他因素）时触发。
`swapDoc` 当使用swapDoc 方法替换编辑者的文档时，会发出信号。
`gutterClick` 单击编辑器装订线（行号区域）时触发。
`gutterContextMenu` 当编辑器装订线（行号区域）收到contextmenu事件时触发。
`focus` 每当编辑器获取焦点时触发。
`blur` 每当编辑器失去焦点时触发。
`scroll` 滚动编辑器时触发。
`refresh` 刷新 或调整编辑器大小时触发。
`optionChange` 每次使用更改选项时触发。
`scrollCursorIntoView` 当编辑器尝试将其光标滚动到视图时触发。
`update` 每当CodeMirror更新其DOM显示时将被触发。
`renderLine` 每当将行（重新）渲染到DOM时都会触发。
`"mousedown", "dblclick", "touchstart", "contextmenu", "keydown", "keypress", "keyup", "cut", "copy", "paste", "dragstart", "dragenter", "dragover", "dragleave", "drop"`
当CodeMirror处理此类DOM事件时触发。
**2.文档对象事件**
`change` 每当文档发生更改时触发。
`beforeChange` 请参阅编辑器实例上相同事件的描述。
`cursorActivity` 每当此文档中的光标或选择更改时触发。
`beforeSelectionChange` 等效于事件，其名称与在编辑器实例上触发的名称相同。
**3.线句柄（例如由返回getLineHandle）支持以下事件**
`delete` 删除线对象时将被触发。
`change` 当行的文本内容以任何方式更改时触发（但不会直接删除该行）。
``
**4.CodeMirror.TextMarker由markText和返回的标记范围句柄setBookmark发出以下事件**
`beforeCursorEnter` 当光标进入标记的范围时触发。
`clear` 清除范围时触发，通过组合移动光标clearOnEnter 或调用其clear()方法。
`hide` 通过编辑操作从文档中删除标记的最后一部分时触发。
`unhide` 在通过编辑删除标记后，撤消操作将标记恢复原状时触发。
``
**5.CodeMirror.LineWidget由返回的行小部件addLineWidget触发以下事件**
`redraw` 当编辑器将小部件重新添加到DOM时触发。
#### 官网
关于该插件更多得方法，插件使用等查看官网：
https://codemirror.net/doc/manual.html#fromTextArea