https://github.com/dbfu/bp-script-editor

低代码脚本编辑器
https://github.com/dbfu/bp-script-editor

Last synced: 4 months ago
JSON representation

低代码脚本编辑器

• Host: GitHub
• URL: https://github.com/dbfu/bp-script-editor
• Owner: dbfu
• Created: 2023-03-19T03:23:10.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-26T03:34:06.000Z (almost 2 years ago)
• Last Synced: 2024-08-01T13:18:26.410Z (7 months ago)
• Language: TypeScript
• Homepage: https://dbfu.github.io/bp-script-editor/
• Size: 4.21 MB
• Stars: 44
• Watchers: 1
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 组件demo地址: 

# 组件使用文档

1. 安装依赖

``` jsx

npm i @byteplan/bp-script-editor 

yarn add @byteplan/bp-script-editor 

pnpm i @byteplan/bp-script-editor 

```

2. 代码示例

``` jsx

import Editor from '@byteplan/bp-script-editor';

```

3. 属性说明

| 属性    | 说明  | 数据格式

|  ----  | ----  | ----

| completions |  自动补全定义的数据 | [CompletionsType[]](#completionstype)

| keywords | 关键字 | string[]

| keywordsColor | 关键字颜色 支持#ffffff或white格式 | string

| keywordsClassName | 关键字类名 | string

| height | 高度 | string

| width | 宽度 | string

| placeholderThemes | 占位符类型主题 | [PlaceholderThemesType](#placeholderthemestype)

| defaultValue | 默认值 | string

| functions | 函数 | [CompletionsType[]](#completionstype)

| mode | 模式 | code ｜ name

| hintPaths | 代码提示 | [[HintPathType]](#hintpathtype)

| onValueChange | 值改变的回调 | (value: string) => void

4. 方法

| 名称    | 说明  | 参数

|  ----  | ----  | ----

| insertText | 插入文本  | (text, isTemplate) =>  void，有类似${}这样的占位符，需要把isTemplate设置为true

| clearText | 清空文本  | () =>  void

| setText | 设置文本  | (text) =>  void，会把编辑器的内容使用text替换掉

# CompletionsType

```js

   template: string; // 自动插入时补全的文本

   label: string;    // 要匹配的文本

   detail: string;   // 描述

   type: string;     // 类型

```

# PlaceholderThemesType

```js

   [K: string]: CommonPlaceholderTheme;

```

# CommonPlaceholderTheme

```js

    textColor: string;

    backgroudColor: string;

    borderColor: string;

```

# CompletionsType

```js

    template: string;

    label: string;

    detail: string;

    type: string;

```

# HintPathType

```js

    label: string;

    detail: string;

    type: 'function' | 'keyword' | 'variable' | 'text' | 'property';

    template: string;

    children?: HintPathType[];

```