vue3 + codemirror

1. 镜像

npm install codemirror --save
npm install vue-codemirror --save
npm install @codemirror/lang-css --save
npm install @codemirror/lang-html --save
npm install @codemirror/lang-javascript --save
npm install @codemirror/lang-python --save
npm install @codemirror/lang-java --save
npm install @codemirror/lang-php --save
npm install @codemirror/theme-one-dark --save

2. 编写组件

<script setup lang="ts">
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { css } from '@codemirror/lang-css';
import { html } from '@codemirror/lang-html';
import { java } from '@codemirror/lang-java';
import { python } from '@codemirror/lang-python';
import { php } from '@codemirror/lang-php';
import { oneDark } from '@codemirror/theme-one-dark';
import { ref, onMounted } from 'vue';

// 编辑器内容
let content = ref('');

// 扩展
let extensions = [css(), html(), javascript(), java(), python(), php(), oneDark];

onMounted(() => {
    // 赋值，初始化
    content.value = props.code;
});

// 属性
const props = defineProps(['code']);

// 获取值
const getValue = () => {
  return content.value
}

// 暴露方法，外部引用
defineExpose({
  getValue
})
</script>
<template>
    <Codemirror id="codemirror" v-model="content" :spellcheck="true" :autofocus="true" :indent-with-tab="true" :tabSize="4"
        :extensions="extensions" />
</template>
<style lang="less" scoped>
#codemirror {
    width: 100%;
    height: 300px;

    :deep(.cm-editor) {
        width: 100%;
    }
}
</style>

3. 引用

<script setup lang='ts'>
import CodeEditor from '@/components/CodeEditor.vue';
import { ref } from 'vue';

// codemirror 的 ref
const codemirrorRef = ref<any>()

// 编码
const code = ref<string>('')

// 打印
const print = () => {
    console.log(tinymceRef.value.getValue())
}
</script>
<template>
     <CodeEditor ref="codemirrorRef" :code="code" />
    <button @click="print">打印</button>
</template>

4. 效果