vue3 +ts +vite 中使用vue-codemirror(在线代码编辑器)

引言

最近在开发工作流引擎,遇到脚本节点。需要实现代码在线编辑功能。 在此记录一下codemirror整合过程以及一些持用经验。
codemirror文档
vue3 +ts +vite 中使用vue-codemirror

安装过程

• npm包安装

// npm
npm install codemirror-editor-vue3 codemirror@5.x -S
 
// yarn
yarn add codemirror-editor-vue3 codemirror@^5.65.12

//如果项目支持TS则还需要安装一个包
// npm
npm install @types/codemirror -D
 
// yarn
yarn add @types/codemirror

• package.json

自定义组件

• 自定义CodeEditor.vue

    <template>
        <codemirror v-model="code" 
            placeholder="Code gose here..." 
            :style="{ height: '100%' }" 
            :autofocus="true"
            :tabSize="21" 
            :extensions="extensions" />
    </template>
    <script lang="ts" setup>
    import { Codemirror } from "vue-codemirror";
    import { javascript } from "@codemirror/lang-javascript";
    import { oneDark } from "@codemirror/theme-one-dark";
    import { ref } from "vue";
    import { EditorView } from "@codemirror/view"

    let myTheme = EditorView.theme({
        // 输入的字体颜色
        "&": {
            color: "#0052D9",
            backgroundColor: "#FFFFFF"
        },
        ".cm-content": {
            caretColor: "#0052D9",
        },
        // 激活背景色
        ".cm-activeLine": {
            backgroundColor: "#FAFAFA"
        },
        // 激活序列的背景色
        ".cm-activeLineGutter": {
            backgroundColor: "#FAFAFA"
        },
        //光标的颜色
        "&.cm-focused .cm-cursor": {
            borderLeftColor: "#0052D9"
        },
        // 选中的状态
        "&.cm-focused .cm-selectionBackground, ::selection": {
            backgroundColor: "#0052D9",
            color:'#FFFFFF'
        },
        // 左侧侧边栏的颜色
        ".cm-gutters": {
            backgroundColor: "#FFFFFF",
            color: "#ddd", //侧边栏文字颜色
            border: "none"
        }
    }, { dark: true })
    interface IProps {
        height?: string,
    }
    // 接受的参数
    const props = withDefaults(defineProps<IProps>(), {
        height: '400px'
    })
    const code = ref(``);
    const extensions = [javascript(), myTheme];
    const Change = () => {

    }
    </script>

• 使用组件

<template>
 <CodeEditor></CodeEditor>

</template>

<script setup  lang="ts">
import { reactive, ref, toRefs } from "vue";
import CodeEditor from "@/components/CodeEditor.vue"


</script>