codemirror6教程

文章目录

  • codemirror6教程
    • 两个概念
      • 编辑器视图
      • 编辑器状态
    • 安装Codemirror6
    • EditorState
      • 创建
    • EditorView
      • 创建
    • Compartment
      • 创建
      • 给编辑器动态的注入插件
      • 巧妙的封装
    • 插件
      • 基础插件（basicSetup）
      • 代码高亮插件
        • 静态高亮
        • 动态高亮
    • 在vue中的使用

两个概念

编辑器视图

视图用于展示文本的，在codemirror6中文本信息的展示使用的是EditorView这个类

编辑器状态

在codemirror6中，文本信息放到了EditorState这个类，EditorState可以展示在EditorView之上，改变EditorView里面的文本，可以更改页面上的文本展示。

安装Codemirror6

npm install codemirror

EditorState

编辑器状态，描述当前编辑器使用的插件，文本等信息

创建

import {EditorState,type Extension} from "@codemirror/state"
//创建编辑器状态
let state = EditorState.create({doc: str,  //这是文本extensions:this.codemirrorPlugin  //传入的插件数组
})

EditorView

编辑器视图，编辑器的展现

创建

let view = new EditorView({state:state, //编辑器状态，编辑器视图创建时初始化的状态parent:element //挂载的dom，可以通过parent挂载到指定的div块
})

Compartment

  • 一个特殊的插件类，也叫隔层，用于封装真正的插件，当插件传入EditorState后，我们是无法直接动态改变里面的插件的，如果要改变里面的插件，就需要用到Compartment封装插件。
  • Compartment就像一个隔箱一样，里面装插件
  • Compartment使用场景：用户需要根据选择的语言，动态更改语法高亮。（通过Compartment去修改编辑器的高亮插件）

创建

import {Compartment} from "@codemirror/state"
import { javascript } from '@codemirror/lang-javascript'
import {EditorState,Extension} from "@codemirror/state"const compartment = new Compartment()let state = EditorState.create({doc: "hello!!!",  //这是文本extensions:[compartment.of(javascript())  //]  //传入的插件数组
})//判断当前编辑器中是否存在当前的compartment封装过的插件
//当flag为真时，当前编辑器存在当前的compartment封装过的插件
let flag = compartment.get(view.state)

给编辑器动态的注入插件

import {EditorState,Extension, Compartment,StateEffect} from "@codemirror/state"
import {EditorView} from "@codemirror/view"
import {basicSetup} from "codemirror"
import { javascript } from '@codemirror/lang-javascript'
import {java} from '@codemirror/lang-java'let state = EditorState.create({doc: "hello!!!",  //这是文本extensions:[basicSetup]  //传入的插件数组
})
let view = new EditorView({state:state, //编辑器状态，编辑器视图创建时初始化的状态parent:element //挂载的dom，可以通过parent挂载到指定的div块
})
let compartment = new Compartment()// inject,向编辑器注入插件（如果在EditorState创建时传入，可以忽略这一步）
view.dispatch({ //通过dispatch发送事务effects: StateEffect.appendConfig.of(compartment.of(javascript()))
})// reconfigure，向编辑器修改某个插件
view.dispatch({ effects: compartment.reconfigure(java())
})

巧妙的封装

通过createEditorCompartment()函数，我们就可以巧妙地封装插件

import {EditorState,type Extension, Compartment,StateEffect} from "@codemirror/state"
import {EditorView} from "@codemirror/view"
import { javascript } from '@codemirror/lang-javascript'
import {java} from '@codemirror/lang-java'
/*** 创建一个compartment,并和对其修改的run函数* @param view * @returns */// https://codemirror.net/examples/config/// https://github.com/uiwjs/react-codemirror/blob/22cc81971a/src/useCodeMirror.ts#L144// https://gist.github.com/s-cork/e7104bace090702f6acbc3004228f2cb
const createEditorCompartment = () => {const compartment = new Compartment()const run = (extension: Extension,view: EditorView) => {if(compartment.get(view.state)){//动态地重新配置插件view.dispatch({ effects: compartment.reconfigure(extension) }) // reconfigure}else{//向编辑器注入某一个插件view.dispatch({ effects: StateEffect.appendConfig.of(compartment.of(extension)) })// inject}}return { compartment, run }
}//使用
let {compartment, run} = createEditorCompartment()
//注入
run(javascript(),view)
//修改
run(java(),view)

插件

基础插件（basicSetup）

basicSetup提供了基础的插件功能，如：行数，折叠，历史记录，选择高亮，快捷键映射

import {basicSetup} from "codemirror"
EditorState.create({doc: str,  //这是文本extensions:[basicSetup]  //传入的插件数组
})

basicSetup的源码

const basicSetup = (() => [view.lineNumbers(),  //行数view.highlightActiveLineGutter(),view.highlightSpecialChars(),commands.history(), //历史插件language.foldGutter(), //折叠view.drawSelection(),view.dropCursor(),state.EditorState.allowMultipleSelections.of(true), //复数选择（编辑器查找替换功能会用到）language.indentOnInput(),language.syntaxHighlighting(language.defaultHighlightStyle, { fallback: true }),language.bracketMatching(),autocomplete.closeBrackets(),autocomplete.autocompletion(),  //语法提示view.rectangularSelection(),view.crosshairCursor(),view.highlightActiveLine(),  //激活行高亮插件search.highlightSelectionMatches(),  //选择匹配高亮view.keymap.of([   //一些快捷键映射...autocomplete.closeBracketsKeymap,...commands.defaultKeymap,...search.searchKeymap,...commands.historyKeymap,...language.foldKeymap,...autocomplete.completionKeymap,...lint.lintKeymap])
])();

代码高亮插件

静态高亮

如果只是高亮个别代表代码，可以通过加载不同的高亮包去高亮代码

import { javascript } from '@codemirror/lang-javascript'EditorState.create({doc: str,  //这是文本extensions:[javascript()]  //传入的插件数组
})
动态高亮

如果需要动态加载高亮，需要引用包加载，其中languageDescription.support指向的是高亮插件，只有当语言包加载了后languageDescription.support才不为空

//语言包描述
import {LanguageDescription} from "@codemirror/language"
//语言包
import {languages} from "@codemirror/language-data"//根据语言名称匹配语言描述信息
const languageDescription = LanguageDescription.matchLanguageName(languages, "java", true);
//语言高亮插件支持
let support = languageDescription.supportif(support){//已经加载//跟新语言高亮插件支持//...........
}else{//去加载并跟新languageDescription.load().then(s=>{//s是语言高亮插件//...........})
}

加载完语言包，还有一个重要的步骤，替换编辑器视图中的语言包，结合上面的Compartment，我们就可以很轻松的对高亮插件进行注入和修改。

//语言包描述
import {LanguageDescription} from "@codemirror/language"
//语言包
import {languages} from "@codemirror/language-data"/*** 创建一个compartment,并和对其修改的run函数* @param view * @returns */// https://codemirror.net/examples/config/// https://github.com/uiwjs/react-codemirror/blob/22cc81971a/src/useCodeMirror.ts#L144// https://gist.github.com/s-cork/e7104bace090702f6acbc3004228f2cb
const createEditorCompartment = () => {const compartment = new Compartment()const run = (extension: Extension,view: EditorView) => {if(compartment.get(view.state)){//动态地重新配置插件view.dispatch({ effects: compartment.reconfigure(extension) }) // reconfigure}else{//向编辑器注入某一个插件view.dispatch({ effects: StateEffect.appendConfig.of(compartment.of(extension)) })// inject}}return { compartment, run }
}let state = EditorState.create({doc: "hello!!!",  //这是文本extensions:[basicSetup]  //传入的插件数组
})
let view = new EditorView({state:state, //编辑器状态，编辑器视图创建时初始化的状态parent:element //挂载的dom，可以通过parent挂载到指定的div块
})
//根据语言名称匹配语言描述信息
const languageDescription = LanguageDescription.matchLanguageName(languages, "java", true);
//注入Java高亮插件
languageDescription.load().then(support=>{run(support,view)
})

在vue中的使用

<template><div id="editor"></div>
</template><script lang="ts" setup>
import {onMounted} from 'vue'
import {EditorState,Extension, Compartment,StateEffect} from "@codemirror/state"
import {EditorView} from "@codemirror/view"
import {basicSetup} from "codemirror"/*** 创建一个compartment,并和对其修改的run函数* @param view * @returns */// https://codemirror.net/examples/config/// https://github.com/uiwjs/react-codemirror/blob/22cc81971a/src/useCodeMirror.ts#L144// https://gist.github.com/s-cork/e7104bace090702f6acbc3004228f2cb
const createEditorCompartment = () => {const compartment = new Compartment()const run = (extension: Extension,view: EditorView) => {if(compartment.get(view.state)){//动态地重新配置插件view.dispatch({ effects: compartment.reconfigure(extension) }) // reconfigure}else{//向编辑器注入某一个插件view.dispatch({ effects: StateEffect.appendConfig.of(compartment.of(extension)) })// inject}}return { compartment, run }
}//动态语言包函数
let {compartment, run } = createEditorCompartment()
let editor = null
const updateLang = (lang:string) => {//根据语言名称匹配语言描述信息const languageDescription = LanguageDescription.matchLanguageName(languages, "java", true);//注入高亮插件languageDescription.load().then(support=>{run(support,editor)})
}//挂载
onMounted(() => {let element = document.getElementById("editor")let state = EditorState.create({doc: "hello!!!",  //这是文本extensions:[basicSetup]  //传入的插件数组})let view = new EditorView({state:state, //编辑器状态，编辑器视图创建时初始化的状态parent:element //挂载的dom，可以通过parent挂载到指定的div块})editor = view
})</script>

codemirror6教程相关推荐

  1. 使用Docker搭建svn服务器教程

    使用Docker搭建svn服务器教程 svn简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很 ...

  2. mysql修改校对集_MySQL 教程之校对集问题

    本篇文章主要给大家介绍mysql中的校对集问题,希望对需要的朋友有所帮助! 推荐参考教程:<mysql教程> 校对集问题 校对集,其实就是数据的比较方式. 校对集,共有三种,分别为:_bi ...

  3. mysql备份psb文件怎么打开_Navicat for MySQL 数据备份教程

    原标题:Navicat for MySQL 数据备份教程 一个安全和可靠的服务器与定期运行备份有密切的关系,因为错误有可能随时发生,由攻击.硬件故障.人为错误.电力中断等都会照成数据丢失.备份功能为防 ...

  4. php rabbmq教程_RabbitMQ+PHP 教程一（Hello World）

    介绍 RabbitMQ是一个消息代理器:它接受和转发消息.你可以把它当作一个邮局:当你把邮件放在信箱里时,你可以肯定邮差先生最终会把邮件送到你的收件人那里.在这个比喻中,RabbitMQ就是这里的邮箱 ...

  5. 【置顶】利用 NLP 技术做简单数据可视化分析教程（实战）

    置顶 本人决定将过去一段时间在公司以及日常生活中关于自然语言处理的相关技术积累,将在gitbook做一个简单分享,内容应该会很丰富,希望对你有所帮助,欢迎大家支持. 内容介绍如下 你是否曾经在租房时因 ...

  6. Google Colab 免费GPU服务器使用教程 挂载云端硬盘

    一.前言 二.Google Colab特征 三.开始使用 3.1在谷歌云盘上创建文件夹 3.2创建Colaboratory 3.3创建完成 四.设置GPU运行 五.运行.py文件 5.1安装必要库 5 ...

  7. 理解和实现分布式TensorFlow集群完整教程

    手把手教你搭建分布式集群,进入生产环境的TensorFlow 分布式TensorFlow简介 前一篇<分布式TensorFlow集群local server使用详解>我们介绍了分布式Ten ...

  8. 高级教程: 作出动态决策和 Bi-LSTM CRF 重点

    https://www.zhihu.com/question/35866596 条件随机场 CRF(条件随机场)与Viterbi(维特比)算法原理详解 https://blog.csdn.net/qq ...

  9. PyTorch 高级实战教程：基于 BI-LSTM CRF 实现命名实体识别和中文分词

    20210607 https://blog.csdn.net/u011828281/article/details/81171066 前言:译者实测 PyTorch 代码非常简洁易懂,只需要将中文分词 ...

最新文章

  1. 赚到！4个Python初学者必学的Numpy小技巧
  2. 在DevExpress中使用CameraControl控件进行摄像头图像采集
  3. 《大话数据结构》第9章 排序 9.3 冒泡排序（上）
  4. Andriod --- JetPack (三)：ViewModel 的诞生
  5. MySQL带OR关键字的多条件查询
  6. twilio_15分钟内使用Twilio和Stormpath在Spring Boot中进行身份管理
  7. 前端学习（142）：行级标签和块级标签
  8. linux-centos7 常用的基本命令--用户账号管理、查看和修改主机名
  9. svn基本常见操作设置
  10. [Java] 蓝桥杯ADV-176 算法提高 陶陶摘苹果
  11. 2018年香港访港旅客超6500万人次 创16年新高
  12. SpringBoot 系列教程(九十一)：SpringBoot+Redis生成图片验证码并校验
  13. xp无法连接win10计算机,win10共享的打印机xp无法连接
  14. 游戏更新-拖拉机升级 Android
  15. ＜＜算法竞赛进阶指南＞＞:陪审团
  16. 从 IT 的角度思考 BIM（一）：面向对象
  17. ImportError: cannot import name ‘structural_similarity‘ from ‘skimage.measure‘
  18. 【论文解读 WSDM 2018 | SHINE】Signed HIN Embedding for Sentiment Link Prediction
  19. Revit二开--复制视图裁剪
  20. 01_使用jupyter

热门文章

  1. 【Python基础语法记录】
  2. OGR遍历要素及重置
  3. 痞子衡嵌入式：IAR内部C-SPY调试组件配套宏文件(.mac)用法介绍
  4. Sun Jan 05 2020 00:00:00 GMT 0800 (中国标准时间) 时间转换为 2020-01-05 08:00:00
  5. UVA-12627（考眼力~）
  6. cad批量打印快捷键_原来CAD还能这么打印？批量打印了解一下？1分钟打印100张...
  7. 悍将余承东「调防」，华为云能翻盘吗？
  8. 寄存器一般多大，cpu一级缓存一般多大
  9. 微型计算机的 I3 I5是,电脑i3和i5有什么区别
  10. python中什么叫函数_Python中的函数