marktion

中文/英语

引入标记

Marktion是基于Prosemirror的Wysiwyg Markdown编辑器，致力于增强Markdown的编辑体验。

请参阅我们的网站MarkTion.io在行动中。

特征

• [NEW] AI集成：内置的AI对话接口，支持AI插件扩展名，并通过按下空间在行的开头调用；

• Wysiwyg编辑：Markdown渲染结果的实时预览，提供直观的编辑体验，您可以使用CTRL + /在源代码模式和Wysiwyg编辑模式之间切换；

• Slash菜单和气泡菜单：快速受到inteion的编辑的启发。黑暗模式支持：支持打开或关闭黑暗模式。

• 黑暗模式支持：启用深色模式，在弱光环境中提供视觉舒适的编辑体验。

安装和用法

1. 安装依赖项。

npm intall marktion

2. 用法

 import { ReactEditor } from 'marktion' ;
import 'marktion/dist/style.css' ;

function Editor ( ) {
  return < ReactEditor content = { `# Hello World` } /> ;
}

3. 例子

看看示例以查看Marktion.io在作用中。

API

ReacteditorProps

财产	描述	类型	默认
内容	编辑器的初始markdown内容。	细绳	-
黑暗的	在编辑器中启用或禁用暗模式。	布尔	错误的
uploadoptions.uploader	用于上传图像的回调功能。	(file: File, event: ClipboardEvent | InputEvent, view: ProsemirrorView) => Promise<url>	-
使成为	渲染器模式	WYSIWYG | SOURCE
Onchange	编辑内容更改回调	(editor: Marktion) => void

咨询Tiptap的文档以查找更多API。

Marktionref

财产	描述	类型	默认
编辑	标记实例	标记	-

示例用法：

 import { ReactEditor , ReactEditorRef } from 'marktion' ;

function App ( ) {
  const editorRef = useRef < ReactEditorRef > ( null ) ;

  const onExport = ( ) => {
    const content = editorRef . current ?. editor . getContent ( ) ;
    console . log ( content ) ;
  } ;

  return (
    < >
      < button onClick = { onExport } > export </ button >
      < ReactEditor ref = { editorRef } />
    </ >
  ) ;
} 

插件

AI插件

AI插件基于Vercel AI。在开始之前，您需要创建一个AI路由器。请参阅文档以获取更多信息：入门。

示例用法：

 function Editor ( ) {
  const ai = useAI ( {
    basePath : import . meta . env . VITE_OPENAI_BASE_URL
  } ) ;

  return (
    < ReactEditor ref = { editorRef } plugins = { [ ai . plugin ] } >
      { ai . element }
    </ ReactEditor / >
  )
} 

贡献

感谢您考虑为Marktion做出贡献！如果您想做出贡献，请按照以下步骤：

1. 将存储库分配给您的GitHub帐户。

2. 克隆分叉的存储库到您的本地机器。

git clone https://github.com/yourusername/marktion.git
cd marktion

3. 安装依赖项。

pnpm i

4. 进行更改并测试您的修改。

5. 提交您的更改。

6. 创建拉动请求。

转到原始存储库，然后单击“新拉请求”。填写必要的细节并描述您所做的更改。

我们将尽快审查您的拉力请求。谢谢您的贡献！

执照

该项目已根据MIT许可获得许可。有关更多详细信息，请参见许可证文件。

接触

如果您有任何疑问，建议或问题，请随时通过以下渠道与我们联系：

• 电子邮件：[email protected]

• 问题跟踪器：项目问题（请指定问题标题中的问题类型）