# @duskmoon-dev/el-markdown-input 中文文档

规范地址：https://npmcn.com/package/%40duskmoon-dev/el-markdown-input/

版本：1\.10\.3
npm 元数据更新时间：2026-11-11T10:54:37.463Z
中文译文更新时间：2026-11-13T00:48:11.021Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40duskmoon-dev/el-markdown-input
原文对照：https://npmcn.com/package/%40duskmoon-dev/el-markdown-input/?lang=original
项目主页：https://github.com/duskmoon-dev/duskmoon-elements#readme
源码仓库：https://github.com/duskmoon-dev/duskmoon-elements

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：41.7 MB，49 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：13 个
- 首次发布：2026-03-10T03:52:26.579Z
- 最新版本发布：2026-11-11T10:54:37.061Z
- 近 30 天下载量：2651（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：46（近 12 个月 46 个）

## 中文简介

一个与窗体相关的自定义元素,提供全功能的平分标记编辑器.

## 安装

```sh
npm install @duskmoon-dev/el-markdown-input
```

也可以使用：`pnpm add @duskmoon-dev/el-markdown-input`、`yarn add @duskmoon-dev/el-markdown-input`、`bun add @duskmoon-dev/el-markdown-input`

## README

# `@duskmoon-dev/el-markdown-input`

一个与窗体相关的自定义元素,提供全功能的平分标记编辑器.

## 特征

-   **写入/ 预览标签** ——在编辑和输出之间切换
-   **丰富的预览** ——突出YAML前题,内置彩色芯片,软线断开等
-   **语法突出显示** - 带有Prism.js(懒惰的CDN载荷)的背景技术
-   **文件上传** 拖放、剪贴板粘贴或文件拾取器
-   **自动完成** —— 说 `@mention` 财务报告和审定财务报表 `#reference` 键盘导航
-   **状态栏** ——活字/字符计数可选 `max-words` 上限
-   **形式参与** ——本地 `<form>` 通过 `ElementInternals`
-   **活视钩** ——一等凤凰活佛融合

## 安装

```bash
bun add @duskmoon-dev/el-markdown-input
```

## 预览依赖关系

出版的软件包包括评论/修饰数学适配器和一个单独的, 懒惰的"美人鱼"用补丁的"KaTeX"捆绑. 消费者不需要依赖 覆盖或单独安装人鱼。 装入这些适配器可以避免它们 上游为KaTeX 0.16依赖范围.

在浏览器中,第一个美人鱼图会装入这个软件包的版本被固定 `dist/esm/mermaid.js` 资产来自jsDelivr。 这需要网络访问和许可 页:1 `https://cdn.jsdelivr.net` 在您的内容安全政策中。 给自主机,复制 从已安装的软件包到您的 HTTPS 服务器并设定 `mermaid-src` 进入其 URL。 该资产是自成一体的,包括其补丁的KaTeX运行时间. 本地节点/ Bun 消费者装入包 - 本地捆绑。 没有路径 装入美人鱼,直到预览中包含一幅美人鱼图.

默认的数学样式表也使用jsDelivr并匹配了 KaTeX 0.18.2; `katex-css-url` 可以提供自定义的 HTTPS 样式表.

## 基本用途

```html
<script type="module">
  import { register } from '@duskmoon-dev/el-markdown-input';
  register();
</script>

<form method="post">
  <el-dm-markdown-input name="body" placeholder="Write markdown…"></el-dm-markdown-input>
  <button type="submit">Save</button>
</form>
```

## 属性

| 属性 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `name` | 字符串 | `""` | 窗体字段名称 |
| `value` | 字符串 | `""` | 初始降标内容 |
| `placeholder` | 字符串 | `"Write markdown…"` | 文本区域占位符 |
| `disabled` | 布尔 | `false` | 禁用编辑 |
| `upload-url` | 字符串 | —— 说 | POST 结束点返回 `{ url: string }` |
| `max-words` | 编号 | —— 说 | 状态栏中的软字盖 |
| `dark` | 布尔 | `false` | 暗棱镜主题 + 暗 CSS 变量默认 |

## 公共 API

```ts
el.getValue(): string
el.setValue(str: string): void
el.insertText(str: string): void
el.setSuggestions(list: Suggestion[]): void
```

## 活动

| 活动 | 细节 | 何时 |
| --- | --- | --- |
| `change` | `{ value: string }` | 每次输入时 |
| `upload-start` | `{ file: File }` | 接受上传的文件 |
| `upload-done` | `{ file: File, url: string, markdown: string }` | 上传完成 |
| `upload-error` | `{ file: File, error: string }` | 上传失败 |
| `mention-query` | `{ trigger: "@", query, resolve }` | 用户输入 `@word` |
| `reference-query` | `{ trigger: "#", query, resolve }` | 用户输入 `#word` |

## CSS 自定义属性

| 财产 | 默认( 光) | 目的 |
| --- | --- | --- |
| `--md-border` | `var(--color-outline)` | 编辑器边框 |
| `--md-border-focus` | `var(--color-primary)` | 焦点环颜色 |
| `--md-bg` | `var(--color-surface)` | 编辑背景 |
| `--md-bg-toolbar` | `var(--color-surface-variant)` | 工具栏背景 |
| `--md-text` | `var(--color-on-surface)` | 主文本颜色 |
| `--md-text-muted` | `var(--color-on-surface-variant)` | 静音文本颜色 |
| `--md-accent` | `var(--color-primary)` | 标签活动指标 |
| `--md-radius` | `6px` | 边界半径 |
| `--md-upload-bar` | `var(--color-primary)` | 上传进度栏 |

## 文件上传

```html
<el-dm-markdown-input upload-url="/api/uploads"></el-dm-markdown-input>
```

终点必须接受 `POST multipart/form-data` 有字段 `file` 并回复如下:

```json
{ "url": "https://cdn.example.com/file.png" }
```

## 自动完成

```js
el.addEventListener('mention-query', async (e) => {
  const users = await fetchUsers(e.detail.query);
  e.detail.resolve(users.map(u => ({
    id: u.handle,
    label: u.name,
    subtitle: u.email
  })));
});
```

## 凤凰直播

```js
// app.js
import { MarkdownInputHook, register } from '@duskmoon-dev/el-markdown-input';
register();

let liveSocket = new LiveSocket('/live', Socket, {
  hooks: { MarkdownInput: MarkdownInputHook }
});
```

```heex
<el-dm-markdown-input
  id="body-input"
  name="body"
  data-value={@content}
  phx-hook="MarkdownInput"
/>
```

## 常见问题

### @duskmoon-dev/el-markdown-input 是什么？

一个与窗体相关的自定义元素,提供全功能的平分标记编辑器\.

### 如何安装 @duskmoon-dev/el-markdown-input？

在项目目录运行 npm install @duskmoon-dev/el-markdown-input，或使用 pnpm add / yarn add / bun add。

### @duskmoon-dev/el-markdown-input 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @duskmoon-dev/el-markdown-input 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @duskmoon-dev/el-markdown-input 可以商用吗？

@duskmoon-dev/el-markdown-input 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @duskmoon-dev/el-markdown-input 的下载量有多少？

根据 npm 官方下载统计，@duskmoon-dev/el-markdown-input 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,651 次，日均约 88 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @duskmoon-dev/el-markdown-input 还在维护吗？

最新版本 1\.10\.3 发布于 2026/11/11（2 天前）；至今共发布 46 个版本，其中过去 12 个月发布了 46 个；首次发布于 2026/03/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。