@wcfdehao/code-editor NPM

code-editor

CodeMirror(6) component for Vue(3).

Usage

Install

npm install @wcfdehao/code-editor

local component

<template>
  <code-editor
    v-model="code"
    :dark="true"
    language="javascript"
  />

</template>

<script>
  import {ref} from 'vue'
  import { codeEditor } from '@wcfdehao/code-editor'

  export default {
    components: {
      codeEditor
    },
    setup() {
      const code = ref(`console.log('Hello, world!')`)

      return {
        code
      }
    }
  }
</script>

global component

import { createApp } from 'vue'
import App from './App.vue'
import CodeEditor from '@wcfdehao/code-editor'
createApp(App).use(CodeEditor, {
    dark:true,
    language:'python',
    tabSize: 2
}).mount('#app')

Component Props

prop	description	type	default
modelValue	input value 双向绑定	`String`	`''`
readOnly	是否只读，只读时编辑框禁止编辑，内容禁止更改。	`Boolean`	`false`
language	编辑框的语言，默认支持，json,html,xml,python,javascript,markdown	`String`	`json`
dark	编辑框深模式，使用的是 oneDark 主题	`Boolean`	`false`
tabSize	编辑时一个tab键表示的空格数	`Number`	`2`
folded	代码是否折叠	`Boolean`	`False`
fixedHeight	编辑框的固定高度，表示像素。这个属性会被css覆盖。0表示根据内容自适应	`Number`	`0`
minHeight	编辑框最小高度，表示像素。这个属性会被css覆盖。0表示根据内容自适应	`Number`	`0`
border	编辑器边框样式，`1px solid red`	`String`	`''`

Component Events

event	description	params
`update:modelValue`	当编辑框中的内容发生改变时触发	`(value: string, viewUpdate: ViewUpdate)`
change	同上	同上
update	当编辑框的任何状态发生改变时触发	`(viewUpdate: ViewUpdate)`
focus	当编辑框获取焦点时	`(viewUpdate: ViewUpdate)`
blur	当编辑框失去焦点时	`(viewUpdate: ViewUpdate)`