当前位置: 首页 > article >正文

【CodeMirror】系列(一)官网文档学习(二)核心扩展列表

本文档概述了配置CodeMirror编辑器时可用的扩展和选项。这块比较简单

(一)编辑功能

1、空白设置
  • tabSize:配置编辑器中制表符的大小(以空格为单位)。
  • lineSeparator:用于配置行分隔符。
  • indentUnit:设置一个缩进级别所添加的空白字符。
  • indentOnInput:配置某些(语言特定的)输入是否触发当前行的重新缩进。
2、只读设置

有两个特征控制编辑器是否允许修改其内容。不同的组合在不同情况下是适用的。

  • editable:决定编辑器视图是否像可编辑控件一样行为(显示光标等)。
  • readOnly:决定编辑命令是否可以修改内容。
3、编辑辅助功能
  • allowMultipleSelections:可以开启以允许选择具有多个范围(另见 drawSelection,实际绘制这些次选)。
  • autocompletion:是一组扩展,允许用户输入时提供内容提示(或明确查询补全信息)。
  • closeBrackets:在用户输入开括号时插入匹配的闭括号。
  • codeFolding:允许用户折叠(隐藏)文档的部分内容。另见 foldGutter
  • history:提供撤销/重做历史。
  • search:配置搜索面板。

(二)演示功能

1、样式设置
  • theme:可用于定义主题(例如 @codemirror/theme-one-dark)。
  • baseTheme:定义通用基本样式,用于与定义新 UI 元素的扩展一起使用。
  • editorAttributes:向编辑器的外部 DOM 元素添加 HTML 属性。
  • contentAttributes:向持有编辑器内容的元素添加属性。
  • decorations:用于向编辑器内容添加样式的基础。
2、演示特性
  • drawSelection:用自定义绘制的选择替换原生选择,支持多重选择范围。
  • lineWrapping:启用行换行。
  • highlightActiveLine:为光标所在行添加额外样式(另见 highlightActiveLineGutter)。
  • highlightSpecialChars:用占位符小部件替换不可打印或其他混淆字符。
  • scrollPastEnd:允许用户向下滚动,直到最后一行在视口顶部。
  • bracketMatching:高亮显示与光标当前所在的括号匹配的括号(如果有)。
  • highlightSelectionMatches:高亮显示当前选定文本的实例。
  • placeholder:在编辑器为空时显示占位符文本。
  • phrases:允许翻译编辑器界面中使用的文本。
3、边距设置
  • lineNumbers:在编辑器侧面添加行号边距。
  • foldGutter:提供一个显示哪些行可以折叠以及它们当前是否折叠的边距。
  • lintGutter:在出现 lint 错误的行旁列出错误。
  • gutters:可用于配置边距的行为。
  • highlightActiveLineGutter:为光标所在行的边距添加样式。
  • gutter:用于定义自定义编辑器边距的基础。
4、工具提示
  • tooltips:配置编辑器工具提示的行为(如自动补全提示)。
  • hoverTooltip:在指针悬停于内容的某些部分时显示工具提示。

(三)输入处理

  • domEventHandlers:提供原始浏览器事件的处理程序。
  • dropCursor:在用户拖动内容到编辑器时,在当前放置点显示伪光标。
  • keymap:用于向编辑器添加键盘映射的面。核心库定义了多个键盘映射:standardKeymapdefaultKeymapfoldKeymaphistoryKeymapsearchKeymapcompletionKeymapcloseBracketsKeymaplintKeymap
  • inputHandler:允许一个函数拦截并处理用户文本输入。
  • mouseSelectionStyle:提供一个钩子以实现某些类型的鼠标选择的自定义处理。
  • dragMovesSelection:决定在编辑器中拖动文本时是移动(而非复制)它。
  • clickAddsSelectionRange:配置哪种类型的点击添加新的选择范围。
  • rectangularSelection:在按住 Alt 键时,使指针选择选择一个矩形区域。
  • crosshairCursor:在按住 Alt 键时,将指针显示为十字形。

(四)语言支持

与语言相关的扩展通常从特定于语言的包中导入。例如,@codemirror/lang-javascript 导出 javascript(),可以添加到配置中以获得 JavaScript 的高亮和补全。

  • Language.data:可用于注册语言特定数据(如自动补全源)。
  • syntaxHighlighting:启用特定代码高亮样式。
  • foldService:定义代码折叠信息的源。通常最好通过语法树指定。
  • indentService:定义自动缩进的源。同样,最好通过语法树提供。
  • linter:可用于注册 linter,并在编辑器中显示其产生的诊断(另见 lintGutter)。

(五)基础组件

  • StateFields:通过将其包含在扩展集中添加到编辑器。
  • ViewPlugin:可作为扩展使用,注册其插件。
  • exceptionSink:用于将编辑器捕获的异常路由到你的代码。
  • updateListener:注册一个将在编辑器每次更新时调用的函数。

(六)事务处理

以下面可用于在事务生效之前检查和修改事务:

  • changeFilter:过滤或阻止文档更改。
  • transactionFilter:可以修改、扩展或取消整个事务。
  • transactionExtender:向事务添加额外的元数据或效果。

(七)扩展包

  • basicSetup:是启用此页面上列出的许多功能的扩展数组。
  • minimalSetup:是一个更为简约的扩展集合,仅包含每个编辑器推荐的扩展。

http://www.kler.cn/a/586847.html

相关文章:

  • Jetson Nano NX 重装系统
  • CSS3学习教程,从入门到精通, CSS3入门介绍的语法知识点及案例(1)
  • ssh通过22端口无法连接服务器问题处理
  • Python----数据可视化(Pyecharts三:绘图二:涟漪散点图,K线图,漏斗图,雷达图,词云图,地图,柱状图折线图组合,时间线轮廓图)
  • Java方法继承、方法重载、方法覆盖总结
  • Hive SQL 精进系列: IF 函数的强大功能与高级应用
  • Qlik Sense New Install with Restore
  • 【PlatformIO】基于Arduino的ESP8266 锂电池电压、电量测试
  • 射频前端模块(FEM)的基本原理与架构:从组成到WiFi路由器的应用
  • 1、操作系统引论
  • C语言 | 二叉树打印效果,控制台打印
  • 【Git学习笔记】Git初识及其结构原理分析(一)
  • JavaScript性能优化的几个方面入手
  • matlab 谐波分析公式绘图
  • Three.js 实现云状特效
  • Global Mapper 多功能的GIS软件
  • Python 本地翻译库 googletrans
  • 华为机试牛客刷题之HJ5 进制转换
  • 「为爱发电」的硬核打开方式,涂鸦智能用AIoT引领智慧能源变革
  • The Rust Programming Language 学习 (五)