vue3+ts项目引入vue-codemirror实现yaml代码编辑器

news2024/11/15 14:02:03

重要提示

重新安装依赖后一定要重启项目！！！

网上搜到的案例拿过来都报错？那应该是插件的版本不一样，先弄清版本！！！

本示例相关版本如下

npm i vue-codemirror@6  

// 按自己所需的语言装，需要支持js就安装这个
npm i @codemirror/lang-javascript

// yaml语言就装这个，其他语言同理
npm i @codemirror/lang-yaml  

// 其中的一种深色主题
npm i @codemirror/theme-one-dark

vue-codemirror 说明

这个插件版本差异真的巨大，我在网上窜来窜去好久，搜到的很多例子实现方法各不相同怎么都有报错，后来才弄清楚这版本问题，差太多了。

vue codemirror v5/v6已经发布。这是一个基于以下内容的新版本CodeMirror@6并且仅对Vue3可用。自从CodeMirror@6新版本将不再支持直接浏览器引用UMD模块。简而言之，新版本是与之前的版本完全不兼容。

封装一个yaml代码编辑器的组件

示例效果如图

子组件代码

<template>
  <Codemirror
    :model-value="modelValue"
    :style="editorConfig.style"
    :extensions="editorConfig.extensions"
    @change="codeChange">
  </Codemirror>
</template>
<script lang="ts" setup>
import { Codemirror } from "vue-codemirror"
// 语言和主题也需要安装对应的依赖
import { javascript } from "@codemirror/lang-javascript"
import { yaml } from '@codemirror/lang-yaml'
import { oneDark } from "@codemirror/theme-one-dark"

defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

// const lang = { javascript, yaml }['yaml']这行代码没有什么深义，只是个新写法，也可以不要
// 然后extensions: [lang(), oneDark]这里 lang()直接写对应的语言yaml()或者javascript()这种就行
const lang = { javascript, yaml }['yaml']
const editorConfig = {
  style: {
    height: '350px',
    fontSize: '18px'
  },
  extensions: [lang(), oneDark]
}

const codeChange = (newVal: any) => {
  emit('update:modelValue', newVal)
}
</script>
<style scoped></style>

父组件代码

<template>
  <div>
    父组件中获取数据：{{ yamlCode }}

    <div class="code-mirror">
      <YamlEditor v-model="yamlCode"></YamlEditor>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import YamlEditor from '@/components/YamlEditor.vue';

const yamlCode = ref();// 这个变量可以向子组件传默认的数据，也可以实时同步子组件里更新后的数据
</script>
<style scoped>
.code-mirror {
   width: 500px;
}
</style>