Vue3项目中在线编辑组件，codemirror-editor-vue3-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3项目中在线编辑组件，codemirror-editor-vue3。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

#安装

npm install codemirror-editor-vue3 codemirror@5.x -S

#组件中使用

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
  <!-- <el-button type="primary" @click="handleSave">保存</el-button> -->

</template>
<script setup>
import { ref, reactive, onMounted,onUnmounted } from 'vue'
import "codemirror/mode/javascript/javascript.js"
import Codemirror from "codemirror-editor-vue3"
import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/neo.css";
const code = ref(
        `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}
`
      )

const cmRef = ref()
const cmOptions = reactive({
    mode: "text/javascript",
    lineNumbers: true, // Show line number
    smartIndent: true, // Smart indent
    indentUnit: 4, // The smart indent unit is 2 spaces in length
    foldGutter: true, // Code folding
    matchBrackets: true,
    autoCloseBrackets: true,
    styleActiveLine: true, // Display the style of the selected row
    readOnly:true,
    // theme:'ayu-mirage',
    // theme:'neo',


})
const onChange = (val, cm) => {
    console.log(val)
    console.log(cm.getValue())
}

const onInput = (val) => {
    console.log(val)
}

const onReady = (cm) => {
    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()
})
function handleSave() {
    console.log('codeValue: ', );
    console.log(code.value);
}


</script>

#如果想要更换不同的主题色，只需要在组件中引入你要使用的主题色的css文件，然后配置theme的名字为引入的css文件名称。 https://codemirror.net/5/theme/

#效果

vue在线编译组件,vue,前端知识,javascript,vue.js,前端