@wcfdehao/code-editor

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)

License

Licensed under the MIT License.