KUI Code Editor

一个基于 React 和 CodeMirror 6 的可扩展代码编辑器组件，支持多种语言和插件扩展。

特性

• 支持多种语言编辑（HTML、JavaScript、JSON、SQL、Formula、Mermaid）
• 语法高亮与自动补全
• 搜索与替换功能
• 代码格式化（使用 Prettier）
• 集成 ESLint 进行代码检查
• 支持自定义语言插件

使用方法

基本使用

import React from 'react';
import { CodeEditor } from 'kui-code-editor';
import 'kui-code-editor/style.css';

function App() {
  return (
    <CodeEditor
      value="console.log('Hello World');"
      editorType="JS"
      autoComplete={[
        { label: 'console', type: 'variable' },
        { label: 'log', type: 'method' }
      ]}
    />
  );
}

export default App;

使用对外暴露的方法

通过 ref 可以访问编辑器实例并调用其方法：

import React, { useRef } from 'react';
import { CodeEditor, CodeEditorRef } from 'kui-code-editor';
import 'kui-code-editor/style.css';

function App() {
  const editorRef = useRef<CodeEditorRef>(null);

  const handleInsertText = () => {
    editorRef.current?.insertContent('Hello World');
  };

  const handleChangeValue = () => {
    editorRef.current?.changeValue('console.log("Hello World");');
  };

  const handleGetCursor = () => {
    const cursor = editorRef.current?.getCursor();
    console.log('当前光标位置:', cursor);
  };

  return (
    <div>
      <div>
        <button onClick={handleInsertText}>插入文本</button>
        <button onClick={handleChangeValue}>更改值</button>
        <button onClick={handleGetCursor}>获取光标位置</button>
      </div>
      <CodeEditor
        ref={editorRef}
        value="console.log('Hello World');"
        editorType="JS"
      />
    </div>
  );
}

export default App;

支持的编辑器类型

type CodeEditorType =
  | 'SQL'      // SQL 编辑器
  | 'JS'       // JavaScript 编辑器
  | 'HTML'     // HTML 编辑器
  | 'FORMULA'  // 计算公式
  | 'JSON'     // JSON 编辑器
  | 'DYNAMIC'  // 动态编辑器
  | 'MERMAID'  // Mermaid 图表
  | null;      // 纯净模式

属性说明

属性	类型	说明
value	string	编辑器的初始值
disabled	boolean	是否禁用编辑器
editorType	CodeEditorType	编辑器类型
autoComplete	AutoCompleteModel[]	自动补全列表
indentUnit	number	缩进单位
placeholder	string	提示文字
lineWrapping	boolean	是否启用行换行
autoFocus	boolean	是否自动聚焦
inclusive	boolean	是否将关键字匹配视为整体
keywordMatching	KeywordMatchingModel[]	关键字匹配列表
initMatchList	any[]	初始化匹配列表
keyMap	KeyMapModel[]	键盘映射
customMatchRule	(keyword: string) => (contentDOM: HTMLElement) => any	自定义匹配规则
onClickMirror	(event: MouseEvent) => void	点击编辑器时的回调
matchListChange	(matchList: any[]) => void	匹配列表变化时的回调
onChange	(value: string) => void	编辑器内容变化时的回调
loaded	(view: any) => void	编辑器加载完成时的回调

Interfaces

AutoCompleteModel 编辑器关键字的自动补全提示

属性	类型	说明
label	string	关键字
type	AutoCompleteType	关键字的类型; (关键字前的图标, 不同类型对应不同图标)
info	string	选择完成时显示的附加信息。可以是纯字符串或在调用时呈现 DOM 结构以显示的函数。
detail	string	在标签后显示的可选短信息
children	AutoCompleteModel[]	上下文补全提示，当前关键字按"."键触发，会显示上下文补全提示

KeywordMatchingModel 关键字匹配

属性	类型	说明
label	string	关键字
attributes	{ id?: string; 'data-tooltip'?: string; [key: string]: any }	自定义属性
className	string	设置关键字的样式类名
tagName	string	包裹层的标签。默认span
inclusive	boolean	匹配字段是否看为整体。
children	KeywordMatchingModel[]	上下文关键字列表

SearchFormModel 搜索表单的表单模型

属性	类型	说明
search	string	要搜索的字符串
caseSensitive	boolean	是否区分大小写
wholeWord	boolean	是否启用全字匹配
replace	string	要替换的字符串

KeyMapModel 键盘映射模型

属性	类型	说明
key	string	win键盘映射按键
mac	AutoCompleteType	mac键盘映射按键
run	(view) => boolean	运行时触发的按键

开发

安装依赖

npm install

启动开发服务器

npm run dev

构建

npm run build

许可证

MIT