tutorial codemirror6

tutorial codemirror6

dos conceptos

Vista del editor

La vista se utiliza para mostrar texto. Esta clase codemirror6se utiliza para mostrar información de texto en China.EditorView

Estado del editor

En codemirror6, la información de texto se coloca en EditorStateesta clase, EditorStateque se puede mostrar en EditorViewella, cambiar EditorViewel texto dentro y cambiar la visualización del texto en la página.

Instalar Codemirror6

npm install codemirror

Estado del editor

Estado del editor, que describe los complementos, el texto y otra información utilizada actualmente por el editor.

crear

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

EditorVer

Vista del editor, visualización del editor

crear

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

Compartimiento

• Se utiliza una clase de complemento especial, también llamada compartimento, para encapsular el complemento real. Cuando el complemento se pasa a EditorState, no podemos cambiar directa y dinámicamente el complemento interno. Si queremos cambiar el complemento dentro, necesitamos usar Compartment para encapsular el complemento.
• El compartimento es como un compartimento con complementos en su interior.
• Escenario de uso del compartimento: los usuarios deben cambiar dinámicamente el resaltado de sintaxis según el idioma seleccionado. (Utilice Compartment para modificar el complemento de resaltado del editor)

crear

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)

Inyecte complementos dinámicamente en el editor

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()) 
}) 

Embalaje inteligente

A través de createEditorCompartment()funciones, podemos encapsular complementos de manera inteligente.

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)

enchufar

Complemento básico (basicSetup)

basicSetup proporciona funciones básicas de complemento, como: número de fila, plegado, historial, resaltado de selección, asignación de teclas de acceso directo

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

código fuente de configuración básica

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
    ])
])();

Complemento de resaltado de código

Resaltado estático

Si solo resalta códigos representativos individuales, puede resaltar el código cargando diferentes paquetes de resaltado.

import {
    
     javascript } from '@codemirror/lang-javascript'

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

Resaltado dinámico

Si necesita cargar resaltado dinámicamente, debe hacer referencia a la carga del paquete , que languageDescription.supportapunta al complemento de resaltado. No estará vacío languageDescription.supporthasta que

//语言包描述
import {
    
    LanguageDescription} from "@codemirror/language"
//语言包
import {
    
    languages} from "@codemirror/language-data"

//根据语言名称匹配语言描述信息
const languageDescription = LanguageDescription.matchLanguageName(languages, "java", true);
//语言高亮插件支持
let support = languageDescription.support

if(support){
    
    //已经加载
    //跟新语言高亮插件支持
	//...........
}else{
    
    //去加载并跟新
    languageDescription.load().then(s=>{
    
    
        //s是语言高亮插件
        //...........
    })
}

Después de cargar el paquete de idioma, hay otro paso importante, que es reemplazar el paquete de idioma en la vista del editor. Combinado con el Compartimento anterior, podemos inyectar y modificar fácilmente el complemento resaltado.

//语言包描述
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)
})

Usar en vista

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