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

最新推荐文章于 2024-06-26 17:48:59 发布

2401_84619185

最新推荐文章于 2024-06-26 17:48:59 发布

阅读量431

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619185/article/details/138961950

版权

程序员专栏收录该内容

102 篇文章 0 订阅

订阅专栏

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

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

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

疯狂编程
学习效果可视化
写博客
阅读优秀代码
心态调整

<template>
  <div style="width: 100%; height: 98%">
    <div style="width: 100%; margin-bottom: 10px" class="t\_right">
      <el-button type="primary" @click="back">Back</el-button>
    </div>
    <codemirror
 ref="mycode"
 :value="curCode"
 :options="cmOptions"
 class="code"
 style="height: 100%"
 @changes="changes" 
 ></codemirror>
  </div>
</template>

<script>
import ProcessorService from '@/service/processorService';
import { codemirror } from 'vue-codemirror';
import 'codemirror/theme/ambiance.css'; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require('codemirror/mode/javascript/javascript'); // 这里引入模式的js，根据设置的mode引入，一定要引入！！
require("codemirror/mode/python/python.js")
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')
export default {
 components: { codemirror },
 data() {
 return {
 curCode: '',
 cmOptions: {
 value: '',
 mode: 'text/javascript',
 theme: 'ambiance',
 readOnly: true
 }
 };
 },
 methods: {
 back() {
 this.$router.go(-1);
 }
 },
 mounted() {
 const { path } = this.$route.query;
 console.log('path---', path);
 ProcessorService.loadScript(path).then(res => {
 console.log('script---', res);
 this.curCode = res;
 });
 }
};
</script>

三、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