@aglyn/aglyn-markdown-编辑器

标记-升 WYSIWYG 编辑器:视觉表面、工具栏、源/相 切换, HTML- to- markdown 粘贴, 链接对话框, 以及只读视图 。 这是 编辑 Aglyn 控制台对内容的用法,以及其中的用法 @aglyn/besigner-ui 用于Markdown组件 content 属性。 自己安装,如果 您需要编辑或预览 Aglyn 在 React 和 MUI 中的标记下-升方言 应用程序; 大部分消费者作为依赖 @aglyn/besigner-ui。 。 。 .

从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .

安装

npm install @aglyn/aglyn-markdown-editor

同伴依赖性 :

• react
• @mui/material
• @mui/icons-material

里面有什么东西

组件 :

• MarkdownField 是完整字段:标签、工具栏、视觉 编辑器和原始源模式,由 value 财务报告和审定财务报表 onChange它需要一个 选项 onPickImageFromMedia 调用后, 调用者可以自行提供 媒体拾取器和 editorRef 手拿回来 MarkdownFieldHandle 页:1 插入所选图像.
• MarkdownVisualEditor 是视觉编辑表面本身,以及 MarkdownEditorToolbar 是它的工具栏,对于拨出棋子的呼叫者 他们自己.
• MarkdownLinkDialog 财务报告和审定财务报表 LinkTargetAutocomplete 是链接控件。 这个 自动完成提供呼叫者通过的目标,并搜索条目 当核心的链接-目标搜索上下文被挂载时.
• MarkdownLiteView 使马克- 升 source 只读.

函数 :

• markdownToRows, (中文(简体) ), rowsToMarkdown 财务报告和审定财务报表 readInlinesFromElement 转换 介于markdown-lite source和编辑器的行模型之间.
• htmlToRows 财务报告和审定财务报表 htmlToInlines 转换已粘贴的 HTML.
• applyCommandToSource 财务报告和审定财务报表 applyLinkToSource 将工具栏命令应用到一个 原始源选择.

标记下-升方言本身(它的分解器和序列器)生活在 @aglyn/aglyn不在这里。 这个包是UI在它上面.

每个文件下 src/lib 也可以通过子路径达到,例如 @aglyn/aglyn-markdown-editor/markdown-lite-view.component。 。 。 .

使用量

import { MarkdownField, MarkdownLiteView } from '@aglyn/aglyn-markdown-editor'
import { useState } from 'react'

export function BodyEditor() {
  const [body, setBody] = useState('')
  return (
    <>
      <MarkdownField label="Body" value={body} onChange={setBody} />
      <MarkdownLiteView source={body} />
    </>
  )
}

怎样才合适

这个包裹坐落在 core 包图作为其UI 块的范围: 它 仅限进口 @aglyn/aglyn因为编辑会说"减"字 核心定义的方言. 这也是为什么它不是普通的 @aglyn/shared-* 软件包,可能不知道Aglyn的型号。 是个图书馆 而不是应用程序的一部分 因为控制台和设计者UI都需要 同名编辑。 它不导入插件, 也不导入其他 UI 软件包 .

许可证

阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/aglyn-markdown-editor 页面存档备份,存于互联网档案馆