前言：
现时咱们对“jscodemirror”可能比较看重，同学们都需要剖析一些“jscodemirror”的相关知识。那么小编在网摘上网罗了一些对于“jscodemirror””的相关资讯，希望大家能喜欢，你们一起来了解一下吧！今天给大家分享一个 vue3.js 代码编辑预览组件CodemirrorEditor-Vue3。
codemirror-editor-vue3 基于vue3.x 构建开箱即用的代码编辑器组件。适用于嵌入后台管理系统。
安装
npm install codemirror-editor-vue3 codemirror@5.x -S引入组件
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="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( `var 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>codemirror-editor-vue3 提供了非常丰富的参数配置，感兴趣的可以去看看。
// 文档地址 仓库地址
OK，今天的分享就到这里了。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jscodemirror
