rennzhang / codemirror-editor-vue3

CodeMirror component for Vue3
https://rennzhang.github.io/codemirror-editor-vue3
MIT License
202 stars 41 forks source link

运行官网ts setup示例报错 #37

Closed withcancer closed 1 year ago

withcancer commented 1 year ago

Describe the bug

感谢作者大大们的努力!这里在开始使用的过程中遇到一些问题,请教下。 我使用vue-cli和官网网站的ts setup实例建立了一个基本demo,但是画面启动报错如下: 1678019386728 另外就是import codemirror这一行也有报错: 1678019477936 完整的页面代码如下,与网站上的例子完全一致:

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="测试 placeholder"
    :height="200"
    @change="onChange"
  />
</template>
<script lang="ts" setup>
import Codemirror from 'codemirror-editor-vue3'
import { Editor, EditorSelectionChange } from 'codemirror'
// placeholder
import 'codemirror/addon/display/placeholder.js'
// language
import 'codemirror/mode/javascript/javascript.js'

import { ref } from 'vue'
const code = ref('console.log("test");')

const cmOptions:EditorSelectionChange = {
  mode: 'text/javascript', // language mode
  theme: 'default' // theme
}

const onChange = (val: string, cm: Editor) => {
  console.log(val)
  console.log(cm.getValue())
}
</script>

Validations

rennzhang commented 1 year ago

需要看一下你的package.json

rennzhang commented 1 year ago

更新了一个版本,请参照文档再次尝试一下