vue3+typescript 使用Codemirror

本文主要是介绍vue3+typescript 使用Codemirror，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

安装

// npm 
npm install codemirror-editor-vue3 codemirror@^5.65.12// ts版 还需安装：
npm install @types/codemirror

全局注册

修改main.ts：

import { createApp } from 'vue'import App from './App.vue'import { InstallCodemirro } from "codemirror-editor-vue3"const app = createApp(App)
app.use(InstallCodemirro)
app.mount('#app')

当然也可以不全局注册，使用的时候再注册：

使用

<template><Codemirror v-model:value="item.content" border ref="cmRef" :options="options" :height="height" width="100%" />
</template><script setup lang="tsx" name="generatorPreview">
import { ref } from "vue";
import { getPreview } from "@/views/tools/generator/preview/api/http";const data = ref<Generator.PreviewItem[]>();
const options = {mode: "text/javascript", // 语言foldGutter: true, // 代码折叠readOnly: true, //只读styleActiveLine: true //选中行的样式
};const height = document.documentElement.clientHeight - 190 + "px";
getPreview("system_user").then(res => {data.value = res.data;});
</script>

这篇关于vue3+typescript 使用Codemirror的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---