vue3使用codeMirror怎么获取到编译器里面的数据

• Z时代
• 2024-03-07
• 分类：IT

这是CodeMirror

<template>
  <div ref="el" class="code-edit-cu" />
</template>
<script setup>
import {
  ref,
  onMounted,
  onUnmounted,
  watchEffect,
  watch,
  defineProps,
  defineEmits,
  nextTick
} from 'vue'
import { useDebounceFn } from '@vueuse/core'
import { useWindowSizeFn } from '@/utils/useWindowSizeFn'
import CodeMirror from 'codemirror'
// css
import './codemirror.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/material-palenight.css'
// modes
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/css/css'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/yaml/yaml'
import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter'
import 'codemirror/mode/shell/shell'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/jsx/jsx'
// lint
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/lint/yaml-lint.js'
import 'codemirror/addon/lint/css-lint.js'
import 'codemirror/addon/lint/javascript-lint.js'
// option
import 'codemirror/addon/edit/closebrackets'
import 'codemirror/addon/edit/closetag'
import 'codemirror/addon/selection/active-line'
// import 'codemirror/addon/comment/comment'
// import 'codemirror/addon/fold/foldcode'
// import 'codemirror/addon/fold/foldgutter'
// import 'codemirror/addon/fold/brace-fold'
// import 'codemirror/addon/fold/indent-fold'
const props = defineProps({
  mode: {
    type: String,
    default: 'application/json'
  },
  value: { type: String, default: '' },
  readonly: { type: Boolean, default: false }
})
const emit = defineEmits(['change'])
const el = ref()
let editor
const debounceRefresh = useDebounceFn(refresh, 100)
watch(
  () => props.value,
  async(value) => {
    await nextTick()
    const oldValue = editor.getValue()
    if (value !== oldValue) {
      if (editor) {
        editor.setValue(value)
      }
    }
  },
  { flush: 'post' }
)
watch(
  () => props.readonly,
  (value) => {
    if (editor) {
      editor.setOption('readOnly', value)
    }
  },
  { flush: 'post' }
)
watchEffect(() => {
  if (editor) {
    editor.setOption('mode', props.mode)
  }
})
function refresh() {
  if (editor) {
    editor.refresh()
  }
}
async function init() {
  const addonOptions = {
    autoCloseBrackets: true,
    autoCloseTags: true,
    autoRefresh: true,
    foldGutter: true,
    styleActiveLine: true, // 光标所在行高亮
    lint: true,
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-lint-markers']
  }
  editor = CodeMirror(el.value, {
    value: '',
    mode: props.mode,
    readOnly: props.readonly,
    tabSize: 2,
    theme: 'material-palenight',
    lineWrapping: true,
    lineNumbers: true,
    ...addonOptions
  })
  editor.setValue(props.value)
  editor.on('change', () => {
    emit('change', editor.getValue())
  })
}
onMounted(async() => {
  await nextTick()
  init()
  useWindowSizeFn(debounceRefresh)
})
onUnmounted(() => {
  editor = null
})
</script>
<style>
.code-edit-cu {
  position: relative;
  height: 100% !important;
  width: 100%;
  overflow: hidden;
}
</style>

这是处理后的editor

<template>
  <div class="h-full">
    <CodeMirrorEditor
      :value="getValue"
      :mode="mode"
      :readonly="readonly"
      @change="handleValueChange"
    />
  </div>
</template>
<script setup>
import { computed, defineProps, defineEmits } from 'vue'
import CodeMirrorEditor from './codemirror/CodeMirror.vue'
//  model
//  JSON = 'application/json',
//   HTML = 'htmlmixed',
//   JS = 'javascript',
//   yaml = 'javascript',
// sql  jsx  shell
const props = defineProps({
  value: { type: String, default: '' },
  mode: {
    type: String,
    default: 'application/json'
  },
  readonly: { type: Boolean, default: false },
  autoFormat: { type: Boolean, default: true }
})
const emit = defineEmits(['change', 'update:value', 'format-error'])
const getValue = computed(() => {
  const { value, mode, autoFormat } = props
  if (!autoFormat || mode !== 'application/json') {
    return value
  }
  let result = value
  if (typeof value === 'string') {
    try {
      result = JSON.parse(value)
    } catch (e) {
      emit('format-error', value)
      return value
    }
  }
  return JSON.stringify(result, null, 2)
})
function handleValueChange(v) {
  emit('update:value', v)
  emit('change', v)
}
</script>

这是使用方法

<Code-editor style="height:500px" :value="jsonData" />

请问在使用方法这个页面 怎么拿到编译器里面的数据？

回答：

<Code-editor v-model:value="jsonData" style="height:500px" />
解决了，双向绑定即可

以上是 vue3使用codeMirror怎么获取到编译器里面的数据 的全部内容， 来源链接： utcz.com/p/937428.html