@duskmoon-dev/el-markdown-input
一个与窗体相关的自定义元素,提供全功能的平分标记编辑器.
特征
- 写入/ 预览标签 ——在编辑和输出之间切换
- 丰富的预览 ——突出YAML前题,内置彩色芯片,软线断开等
- 语法突出显示 - 带有Prism.js(懒惰的CDN载荷)的背景技术
- 文件上传 拖放、剪贴板粘贴或文件拾取器
- 自动完成 —— 说
@mention财务报告和审定财务报表#reference键盘导航 - 状态栏 ——活字/字符计数可选
max-words上限 - 形式参与 ——本地
<form>通过ElementInternals - 活视钩 ——一等凤凰活佛融合
安装
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 样式表.
基本用途
<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
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) | 上传进度栏 |
文件上传
<el-dm-markdown-input upload-url="/api/uploads"></el-dm-markdown-input>
终点必须接受 POST multipart/form-data 有字段 file 并回复如下:
{ "url": "https://cdn.example.com/file.png" }
自动完成
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
})));
});
凤凰直播
// app.js
import { MarkdownInputHook, register } from '@duskmoon-dev/el-markdown-input';
register();
let liveSocket = new LiveSocket('/live', Socket, {
hooks: { MarkdownInput: MarkdownInputHook }
});
<el-dm-markdown-input
id="body-input"
name="body"
data-value={@content}
phx-hook="MarkdownInput"
/>