【vue3+ts版】使用Codemirror

最新推荐文章于 2024-06-12 09:31:59 发布

前端工程师的自我养成

最新推荐文章于 2024-06-12 09:31:59 发布

阅读量758

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46210899/article/details/138310440

版权

本文详细描述了如何在Vue3应用中使用Codemirror构建一个类似数据库查询的控制台组件，包括环境配置、安装步骤、全局注册以及组件的使用和效果展示。

摘要由CSDN通过智能技术生成

背景

需要一个控制台，类似数据库查询窗口的组件，网上对比了codemiroor和tiptap，最后因为前者有行数选择了它。

Codemirror使用流程

1. 环境

vue ：3.4.21
typescripty:5.4.2

2. 安装

// pnpm 
pnpm add codemirror-editor-vue3 codemirror@^5.65.12

// npm 
npm install codemirror-editor-vue3 codemirror@^5.65.12

// ts版 还需安装：
npm install @types/codemirror

// pnpm 
pnpm add @types/codemirror

3. 全局注册

// main.ts ---我这里是ts文件，大家注意！

import { createApp } from 'vue'

import App from './App.vue'

// 导入codemirror
import { InstallCodemirro } from "codemirror-editor-vue3"

const app = createApp(App)

app.use(InstallCodemirro)

app.mount('#app')

4. 组件使用

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from "vue"
  import "codemirror/mode/javascript/javascript.js"
  import Codemirror from "codemirror-editor-vue3"
  import type { CmComponentRef } from "codemirror-editor-vue3"
  import type { Editor, EditorConfiguration } from "codemirror"
 
  const code = ref(
    `const i = 0;
        for (; i < 9; i++) {
        console.log(i);
        // more statements
        }
    `
  )
  const cmRef = ref<CmComponentRef>()
  const cmOptions: EditorConfiguration = {
    mode: "text/javascript"
  }
 
  const onChange = (val: string, cm: Editor) => {
    console.log(val)
    console.log(cm.getValue())
  }
 
  const onInput = (val: string) => {
    console.log(val)
  }
 
  const onReady = (cm: Editor) => {
    console.log(cm.focus())
  }
 
  onMounted(() => {
    setTimeout(() => {
      cmRef.value?.refresh()
    }, 1000)
 
    setTimeout(() => {
      cmRef.value?.resize(300, 200)
    }, 2000)
 
    setTimeout(() => {
      cmRef.value?.cminstance.isClean()
    }, 3000)
  })
 
  onUnmounted(() => {
    cmRef.value?.destroy()
  })
</script>

5. 效果展示