codemirror6实现在线代码编辑器使用详解

目录
  • 背景
  • 介绍
    • codemirror5、codemirror6对比
  • codemirror6 核心包
  • vue3+codemirror6实现简易在线代码编辑器
    • 安装依赖
    • 创建编辑器
      • 效果截图
    • 主题
    • 获取、更改编辑器的值
  • 总结

背景

最近在升级一个老项目,其中涉及将codemirror5迁移到codemirror6,本文特意记录一下codemirror6的学习及升级过程~

介绍

CodeMirror是Web的代码编辑器组件。它可以在网站中用于实现文本输入字段,并支持许多编辑功能,并具有丰富的编程接口以允许进一步扩展。

codemirror5、codemirror6对比

其实codemirror官网中的迁移指南有详细列举两个版本关键特性的一些对比,下面列举一些实际项目中用到的特性对比:

对比项 codemirror5 codemirror6
创建编辑器 codemirror.fromTextarea(element) import { basicSetup, EditorState, EditorView } from '@codemirror/basic-setup';
const editor = new EditorView({state:EditorState.create(
{doc: code,extensions: [basicSetup]}),
parent: this.$refs.editor as HTMLDivElement,});
设置值 cm.setValue(text) ①更改值:cm.dispatch({changes: {from: 0, to:cm.state.doc.length, insert: text}})
②替换整个状态:cm.setState(EditorState.create({doc: text, extensions: ...}))
取值 cm.getValue() cm.state.doc.toString()

codemirror6 核心包

由上表的对比也可以看出,codemirror6创建编辑器需要靠自己组装,组装部分并不难,但必须安装并导入所需的组件。以下是核心包,没有它们就很难设置一个编辑器,它们是:

  • @codemirror/state,它定义了表示编辑器状态和对该状态的更改的数据结构。
  • @codemirror/view,这是一个显示组件,它知道如何向用户显示编辑器状态,并将基本的编辑操作转换为状态更新。
  • @codemirror/commands定义了很多编辑命令和一些键绑定。

举个栗子,我们可以看官网对于最轻量的编辑器的示例:

import {EditorState} from "@codemirror/state"
import {EditorView, keymap} from "@codemirror/view"
import {defaultKeymap} from "@codemirror/commands"
let startState = EditorState.create({
  // 显示文本
  doc: "Hello World",
  // 扩展,**keymap:** 配置要使用的快捷键;语言包等也是作为扩展在此配置
  extensions: [keymap.of(defaultKeymap)]
})
let view = new EditorView({
  // 状态
  state: startState,
  // 绑定元素
  parent: document.body
})

vue3+codemirror6实现简易在线代码编辑器

安装依赖

// 安装codemirror
npm i codemirror
// 这里语言包要自行安装
npm i  @codemirror/lang-javascript

创建编辑器

<template>
  <div ref="editorRef" class="editor-main"></div>
</template>
<script lang="ts" setup>
import { basicSetup, EditorView } from "codemirror";
import { EditorState } from "@codemirror/state";
import { javascript } from "@codemirror/lang-javascript";
import {json} from '@codemirror/lang-json'
import { onMounted, ref } from "vue";
const editorRef = ref();
const editorView = ref();
const initEditor = () => {
  if (typeof editorView.value !== "undefined") {
    editorView.value.destroy();
  }
  const jsonString = `{
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier",
    "vue-global-api"
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    endOfLine: "auto",
    "prettier/prettier": ["error", { "endOfLine": "auto" }]
  },
}`
  const startState = EditorState.create({
    doc:jsonString,
    extensions: [basicSetup, javascript(),json()],
  });
  if (editorRef.value) {
    editorView.value = new EditorView({
      state: startState,
      parent: editorRef.value,
    });
  }
};
// onMounted生命周期可以保证读取到dom元素
onMounted(() => {
  initEditor();
});
</script>
<style lang="scss" scoped>
.editor-main{
  width: 100vw;
  height: 100vh;
}
</style>

这里的basicSetup扩展包含了行号,不需要再做额外的配置~

效果截图

主题

codemirror6目前提供了theme-one-dark主题,也可以使用theme进行拓展

// 安装
npm i @codemirror/theme-one-dark
// 使用
import { oneDarkTheme } from "@codemirror/theme-one-dark";
const startState = EditorState.create({
    doc: jsonString,
    extensions: [basicSetup,oneDarkTheme, javascript(), json()],
  });
// 自定义主题
const  myTheme = EditorView.theme({
  "&": {
    color: "white",
    backgroundColor: "#034"
  },
  ".cm-content": {
    caretColor: "#0e9"
  },
  "&.cm-focused .cm-cursor": {
    borderLeftColor: "#0e9"
  },
  "&.cm-focused .cm-selectionBackground, ::selection": {
    backgroundColor: "#074"
  },
  ".cm-gutters": {
    backgroundColor: "#045",
    color: "#ddd",
    border: "none"
  }
}, {dark: true})
// 使用
  const startState = EditorState.create({
    doc: jsonString,
    extensions: [basicSetup,myTheme, javascript(), json()],
  });

主题效果截图:

获取、更改编辑器的值

从两个版本对比中也可以知道,codemirror6值的操作主要是对state的操作,数据流的互动如下图所示,即该视图聆听事件。当DOM事件进来时,它(或绑定到密钥的命令或按扩展名注册的事件处理程序)将其转换为状态交易并分配它们。这建立了一个新状态。当将新状态授予视图时,它将自行更新。

const undateValue = ()=>{
  const value = editorView.value.state.doc.toString()
  if(value){
   // 具体逻辑根据自己业务场景做变化
    editorView.value.dispatch({changes: {from: 0, to:editorView.value.state.doc.length, insert: 'test'}})
  }
}

总结

至此,codemirror6的实践算告一段落,当然还有很多复杂的功能可以拓展,感兴趣的小伙伴也可以阅读官方文档进行实践,虽然codemirror6的写法跟5的有很大差异,需要自行组装,但codemirror6的好处也显而易见,减少重复代码引入的同时可定制性也更强!

以上就是codemirror6实现在线代码编辑器使用详解的详细内容,更多关于codemirror 代码编辑器的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue实现codemirror代码编辑器中的SQL代码格式化功能

    vue实现codemirror代码编辑器中的SQL代码格式化功能 1.首先使用npm安装sql-formatter插件 npm install --save sql-formatter 2.然后引入该sql-formatter.js文件 import sqlFormatter from "sql-formatter"; 3.接下来就是针对需要格式化的代码调用该方法就OK啦 /*代码格式化*/ format(){ /*获取文本编辑器内容*/ let sqlContent="&q

  • 使用CodeMirror实现Python3在线编辑器的示例代码

    一.编写页面 主要是引入相关的css文件和js文件,这里采用简单插入link和script标签的形式. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • 前端插件库之vue3使用vue-codemirror插件的步骤和实例

    目录 使用 1.命令行安装 2.在需要的组件中配置 配置说明: 个人代码编辑区Demo 总结 vue-codemirror 基于 CodeMirror ,适用于 Vue 的 Web 代码编辑器. 使用 1.命令行安装 npm install vue-codemirror --save // cnpm install vue-codemirror --save 如果运行官网例子时, 报错: @codemirror/lang-javascript@codemirror/theme-one-dark

  • 在vue项目中使用codemirror插件实现代码编辑器功能

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示),具体内容如下所示: 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 <template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;&quo

  • 使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器

    前提 写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么做的,这里我把公司项目里用到的那部分抽出来,单独写篇博客,并把抽出来的那部分代码提交到 GitHub 去(地址),以防日后可能会再次用到(没准毕业设计里可能用的到). 简单介绍 CodeMirror 是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 可能光看官网,第一眼觉得那些在线编辑器有点丑,反

  • vue codemirror实现在线代码编译器

    前言 如果我们想在Web端实现在线代码编译的效果,那么需要使用组件vue-codemirror,他是将CodeMirror进行了再次封装 支持代码高亮 62种主题颜色,例如monokai等等 支持json, sql, javascript,css,xml, html,yaml, markdown, python编辑模式,默认为 json 支持快速搜索 支持自动补全提示 支持自动匹配括号 环境准备 npm install jshint npm install jsonlint npm instal

  • codemirror6实现在线代码编辑器使用详解

    目录 背景 介绍 codemirror5.codemirror6对比 codemirror6 核心包 vue3+codemirror6实现简易在线代码编辑器 安装依赖 创建编辑器 效果截图 主题 获取.更改编辑器的值 总结 背景 最近在升级一个老项目,其中涉及将codemirror5迁移到codemirror6,本文特意记录一下codemirror6的学习及升级过程~ 介绍 CodeMirror是Web的代码编辑器组件.它可以在网站中用于实现文本输入字段,并支持许多编辑功能,并具有丰富的编程接口

  • Monaco Editor开发SQL代码提示编辑器实例详解

    目录 安装 简易 SQL 编辑器 相关功能 获取选中代码 替换选中代码 处理光标位置 自定义 SQL 库表提示,并保留原有 SQL 提示 编辑器 resize 编辑器设置主题 SQL 代码格式化 右键菜单汉化 记得销毁编辑器对象哦 踩坑 如何快速去看懂 Monaco Editor 安装 安装依赖,这里请注意版本 yarn add monaco-editor@0.29.1 yarn add monaco-editor-webpack-plugin@5.0.0 配置 webpack 插件 // vu

  • Python实现屏幕截图的代码及函数详解

    废话不多说,先给大家看下python实现屏幕截图的代码,具体代码如下所述: from selenium import webdriver import time def capture(url, save_fn="capture.png"): browser = webdriver.Firefox() # Get local session of firefox browser.set_window_size(1200, 900) browser.get(url) # Load pag

  • java 中JDBC连接数据库代码和步骤详解及实例代码

    java 中JDBC连接数据库代码和步骤详解 JDBC连接数据库 •创建一个以JDBC连接数据库的程序,包含7个步骤:  1.加载JDBC驱动程序:  在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机),这通过java.lang.Class类的静态方法forName(String  className)实现. 例如: try{ //加载MySql的驱动类 Class.forName("com.mysql.jdbc.Driver") ; }catch(Class

  • 对Python 窗体(tkinter)文本编辑器(Text)详解

    如下所示: import tkinter win=tkinter.Tk() text=tkinter.Text(win) #文本编辑器(用于展示数据) text.insert(tkinter.INSERT,"因为你在我心中是那么的具体") text.insert(tkinter.INSERT,"\r\n") #换行 text.insert(tkinter.INSERT,"因为你在我心中是那么的具体") text.insert(tkinter.IN

  • vue-quill-editor+plupload富文本编辑器实例详解

    1,先给vue项目中下载vue-quill-editor依赖npm install vue-quill-editor --save 2,下载plupload依赖npm install plupload --save 3,在组件中分别引入对应的js import { quillEditor }from 'vue-quill-editor' import '@/assets/js/crypto1/crypto/crypto.js' import '@/assets/js/crypto1/hmac/h

  • JS三级联动代码格式实例详解

    这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现js多级联动的代码格式 <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </h

  • 使用C++调用Python代码的方法详解

    一.配置python环境问题 1.首先安装Python(版本无所谓),安装的时候选的添加python路径到环境变量中 安装之后的文件夹如下所示: 2.在VS中配置环境和库 右击项目->属性->VC++目录 1)包含目录: Python安装路径/include 2)库目录: Python安装路径/libs 右击项目->属性->连接器->输入->附加依赖库 debug下: python安装目录/libs/python37_d.lib release下: python安装目录

  • python3 通过 pybind11 使用Eigen加速代码的步骤详解

    python是很容易上手的编程语言,但是有些时候使用python编写的程序并不能保证其运行速度(例如:while 和 for),这个时候我们就需要借助c++等为我们的代码提速.下面是我使用pybind11调用c++的Eigen库的简单介绍: 第一步:准备系统和IDE: Windows 10 vs2015 (用于调试c++代码) vscode (调试python代码) 第二步:python虚拟环境: 1.创建虚拟python虚拟环境: 在vscode的terminal中执行 python -m v

随机推荐