Package - @uyun/ec-code-editor

category: Components type: Automation title: CodeEditor subtitle: 代码编辑器 cols: 1

作者：夏显林

API

<CodeEditor />

参数列表

属性	说明	类型	默认值
value	编辑器的值	object	{lang:'',content:''}
languages	可选择语言集合，头部使用	array	[]
showHeader	是否显示编辑器头部	boolean	true
theme	编辑器主题，浅色是 eclipse，深色是 monokai	string	eclipse
showFullScreen	是否显示全屏按钮	boolean	true
readOnly	是否只读。只读时，头部不在显示 languages 的全部数据，只显示当前类型的数据	boolean	false
disabled	是否禁用	boolean	false
placeholder	占位符，如果传入回调函数，则结构为 lang => {}	string\|Element\|Function	''
highlightLines	高亮行号集	array	[]
onChange	修改回调函数	Function	value => {}
handleShowHint	自定义输入提示	Function	value => {}

其他参数参考 CodeMirror 官方文档：https://codemirror.net/doc/manual.html#config

值数据结构，用于 value 属性

{
  lang:"",
  content:""
}

属性	说明	类型	默认值
lang	语言类型	string	''
content	代码内容	string	''

语言数据集结构，用于 languages 属性

目前提供高亮的语言类型：shell、python、vbscript、groovy、yaml、powershell、perl、batch。

{
  lang:"",
  title:""
}

属性	说明	类型	默认值
lang	语言类型	string	''
title	语言标题，在编辑器头部做展示使用	string	''

高亮行数据集结构，用于 highlightLines 属性

支持行号集，如[1，2，3]，也支持自定义背景颜色

{
  index:1,
  background:"red"
}

属性	说明	类型	默认值
index	行索引	index	-1
background	背景颜色	string	‘'

自定义输入提示

支持输入字符，提示自定义提示

const handleShowHint = () => {
    const hintList = [
      {
        name: '自定义提示1',
        value: 'a'
      },
      {
        name: '自定义提示2',
        value: [
          {
            name: '自定义提示2-1'
          },
          {
            name: '自定义提示2-2'
          }
        ]
      }
    ]
    const cmInstance = input.current.instance
    // 得到光标
    const cursor = cmInstance.getCursor()
    // 得到行内容
    const cursorLine = cmInstance.getLine(cursor.line)
    // 得到光标位置
    const end = cursor.ch
    const start = end
    const Two = `${cursorLine.charAt(start - 2)}${cursorLine.charAt(start - 1)}`
    const One = `${cursorLine.charAt(start - 1)}`
    let list = []
    if (Two === '${') {
      hintList.forEach(e => {
        list.push(e.name)
      })
    } else if (One === '.') {
      const lastIndex = cursorLine.lastIndexOf('${', start)
      const key = cursorLine.substring(lastIndex + 2, start - 1)
      list = []
      hintList.forEach(e => {
        if (e.name === key && lastIndex !== -1 && Object.prototype.toString.call(e.value) === '[object Array]') {
          e.value.forEach(el => {
            list.push(el.name)
          })
        }
      })
    }
    // 得到光标标识
    const token = cmInstance.getTokenAt(cursor)
    return {
      list: list,
      from: { ch: end, line: cursor.line },
      to: { ch: token.end, line: cursor.line }
    }
  }

属性	说明	类型	默认值
index	行索引	index	-1
background	背景颜色	string	‘'

Current Tags

2.0.0-dev.0 ... dev (3 years ago)
2.1.4 ... latest (2 years ago)

category: Components type: Automation title: CodeEditor subtitle: 代码编辑器 cols: 1

API

参数列表

值数据结构，用于 value 属性

语言数据集结构，用于 languages 属性

高亮行数据集结构，用于 highlightLines 属性

自定义输入提示

Current Tags

21 Versions