# Prompt Editor

**Repository Path**: onlookee/prompt-editor

## Basic Information

- **Project Name**: Prompt Editor
- **Description**: Prompt Editor（轻量级模板编辑器）
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-19
- **Last Updated**: 2026-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Prompt Editor

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)](https://github.com/your-username/prompt-editor)

轻量级模板编辑器通用组件，无任何框架依赖，可方便嵌入其他系统。

## 特性

- **轻量级**：纯原生 JavaScript，无框架依赖
- **两种模式**：编辑模式（实时更新字段列表）和使用模式（字段列表初始化一次）
- **语法高亮**：变量语法高亮显示
- **变量导航**：Tab/Shift+Tab 快速跳转
- **字段列表**：可视化的字段导航面板

## 快速开始

```html
<div id="editor" style="width: 800px; height: 500px;"></div>

<link rel="stylesheet" href="./styles/editor.css">

<script type="module">
    import { createEditor } from './src/index.js'
    
    const instance = createEditor('#editor', {
        mode: 'edit',
        initialValue: '# {{ title | desc="标题" | required }}'
    })
</script>
```

## API

### createEditor(container, options)

创建编辑器实例。

#### 参数

- `container`: DOM 元素或选择器字符串
- `options`: 配置对象

#### 选项

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| mode | string | 'edit' | 模式：'edit'=编辑模式, 'use'=使用模式 |
| placeholder | string | '' | 占位符文本 |
| initialValue | string | '' | 初始内容 |
| highlight | boolean | true | 启用语法高亮 |
| navigation | boolean | true | 启用变量导航 |
| showFieldList | boolean | true | 显示字段列表 |
| fieldListPosition | string | 'right' | 字段列表位置：'right', 'left', 'bottom', 'none' |
| onChange | function | null | 内容变化回调 |
| onFieldClick | function | null | 字段点击回调 |

#### 返回值

```javascript
{
    editor: {
        getContent: () => string,
        setContent: (content) => void,
        jumpToVariable: (name) => boolean,
        getFields: () => array,
        destroy: () => void
    },
    fieldList: {
        setFields: (fields) => void,
        setCurrentField: (name) => void,
        destroy: () => void
    } | null,
    destroy: () => void
}
```

## 两种模式

### 编辑模式 (mode: 'edit')

- 字段列表实时更新
- 适合模板设计和测试

### 使用模式 (mode: 'use')

- 字段列表在初始化后不再随内容变化更新
- 点击字段跳转到编辑器位置（基于初始位置）
- 适合使用已有模板的场景

## 模板语法

```
{{ variable | option=value | flag }}
```

### 支持的属性

| 属性 | 说明 |
|------|------|
| desc | 字段描述 |
| required | 必填标记 |
| default | 默认值 |
| type | 字段类型 |
| enum | 枚举值 |
| min/max | 长度限制 |
| group | 分组名称 |

## 示例

### 基础用法

```javascript
const instance = createEditor('#container', {
    mode: 'edit',
    initialValue: '# {{ title | desc="标题" }}'
})

// 获取内容
const content = instance.editor.getContent()
```

### 监听变化

```javascript
const instance = createEditor('#container', {
    onChange: (data) => {
        console.log('内容:', data.content)
        console.log('字段:', data.fields)
    }
})
```

### 嵌入现有系统

```javascript
import { createEditor } from './prompt-editor/src/index.js'

const container = document.getElementById('my-editor')
const editor = createEditor(container, {
    mode: 'use',
    showFieldList: true,
    fieldListPosition: 'right',
    onChange: (data) => {
        // 同步到你的系统
        saveToMySystem(data.content)
    }
})
```

## 样式定制

通过 CSS 变量自定义主题：

```css
:root {
    --pe-primary-color: #1890ff;
    --pe-border-color: #d9d9d9;
    --pe-bg-color: #fff;
    --pe-text-color: #333;
    --pe-variable-bg: #e6f7ff;
    --pe-field-hover: #f5f5f5;
    --pe-field-active: #e6f7ff;
}
```

## 浏览器兼容

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

需要支持 ES Modules。

## 贡献指南

欢迎提交 Issue 和 Pull Request！请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解详情。

## 许可证

本项目基于 [MIT](LICENSE) 许可证开源。

## 感谢

感谢所有为该项目做出贡献的开发者！