JCodeEditor - xinwu-yang/cube-vue GitHub Wiki

JCodeEditor 代码编辑器组件

一个简易的代码编辑器，支持语法高亮。

代码演示

<template>
	<div>
    <j-code-editor
      style="min-height: 100px"
      language="javascript"
      :fullScreen="true"
      v-model="editorValue"
    />
    {{ editorValue }}
  </div>
</template>
<script>
	export default {
    data() {
      return {
        form: this.$form.createForm(this),
        editorValue: ''
      }
    }
  }
</script>

api

props

属性 说明 类型 必填 默认值
language 代码语言类型 string
languageChange 是否显示切换语言类型 boolean false
placeholder 默认文字 string
lineNumbers 是否显示行号 boolean true
fullScreen 是否显示全屏按钮 boolean false
zIndex 全屏后的z-index number | string 999
autoHeight 是否自适应高度，string只能填写'!ie' boolean | string true
height 固定高度 string | number '240px'

事件

事件名称 说明 回调参数
input 输入内容变化时调用 function(code)
language-change 修改语言类型时调用 function(language)

支持的代码类型

  • 'css'
  • 'javascript'
  • 'html'
  • 'x-java'
  • 'x-objectivec'
  • 'x-python'
  • 'x-rsrc'
  • 'x-sh'
  • 'x-sql'
  • 'x-swift'
  • 'x-vue'
  • 'markdown'
⚠️ **GitHub.com Fallback** ⚠️