# @seafile/seafile-editor 中文文档

规范地址：https://npmcn.com/package/%40seafile/seafile-editor/

版本：3\.0\.48
npm 元数据更新时间：2026-11-02T07:45:54.269Z
中文译文更新时间：2026-11-02T10:53:43.887Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40seafile/seafile-editor
原文对照：https://npmcn.com/package/%40seafile/seafile-editor/?lang=original

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

- 包体积（解压后）：3.5 MB，313 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：28 个
- 首次发布：2018-07-09T08:41:55.959Z
- 最新版本发布：2026-11-02T07:45:54.111Z
- 已发布版本数：893（近 12 个月 133 个）

## 中文简介

seammarkdown编辑器是一个基于slate.js的WYSIWYG Markdown编辑器。它用于海上和海上工程。

## 安装

```sh
npm install @seafile/seafile-editor
```

也可以使用：`pnpm add @seafile/seafile-editor`、`yarn add @seafile/seafile-editor`、`bun add @seafile/seafile-editor`

## README

# sea-markdown-editor

seammarkdown编辑器是一个基于slate.js的WYSIWYG Markdown编辑器。它用于海上和海上工程。

## 降价编辑器UI

![markdown editor](https://npmcn.com/package/%40seafile/seafile-editor/assets/imgs/demo-markdown-editor.png)

## 集成的降价编辑器UI

> 一个集成的演示。您可以根据您设计的样式自定义它。

![markdown editor](https://npmcn.com/package/%40seafile/seafile-editor/assets/imgs/demo-markdown-editor.png)

## 简单的编辑器UI

![simple editor](https://npmcn.com/package/%40seafile/seafile-editor/assets/imgs/simple-editor.png)

## 集成简单编辑器UI

> 一个集成的演示。您可以根据您设计的样式自定义它。

![simple editor](https://npmcn.com/package/%40seafile/seafile-editor/assets/imgs/demo-simple-editor.png)

## 安装

通过npm安装：

```bash
npm install @seafile/seafile-editor --save
```

将库导入到项目中：

```javascript
import { MarkdownEditor } from '@seafile/seafile-editor';
```

## 提供组件和功能

### 组件

| 名字 | 解释 |
| --- | --- |
| MarkdownEditor | Markdown富文本编辑器组件 |
| SimpleEditor | 简单的标记编辑器组件 |
| MarkdownViewer | 标记内容预览组件 |

### 功能

| 名字 | 解释 |
| --- | --- |
| mdStringToSlate | 将标记字符串转换为编辑器使用的数据格式 |
| slateToMdString | 将编辑器使用的数据格式转换为标记字符串 |
| 处理器 | 将标记字符串转换为html格式内容 |

## MarkdownEditor用法

### 定义api

```javascript
import axios from 'axios';

class API {

  getFileContent() {
    const fileUrl = '';
    return axios.get(fileUrl);
  }

  saveFileContent(content) {
    const updateLink = '';
    const formData = new FormData();
    const blob = new Blob([data], { type: 'text/plain' });
    formData.append('file', blob);
    axios.post(updateLink, formData);
  }

  uploadLocalImage(file) {
    const uploadLink = '';
    const formData = new FormData();
    formData.append('file', file);
    return axios.post(uploadLink, formData);
  }

}

const editorApi = new API();

export default editorApi;
```

### 将simple集成到您自己的页面中

```javascript
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Button } from 'reactstrap';
import { MarkdownEditor } from '@seafile/seafile-editor';
import editorApi from './api';

export default function MarkdownEditorDemo() {

  const editorRef = useRef(null);
  const [fileContent, setFileContent] = useState('');
  const [isFetching, setIsFetching] = useState(true);
  const [contentVersion, setContentVersion] = useState(0);

  const mathJaxSource = '';

  useEffect(() => {
    editorApi.getFileContent().then(res => {
      setFileContent(res.data);
      setIsFetching(false);
    });
  }, []);

  const onSave = useCallback(() => {
    const content = editorRef.current.getValue();
     editorApi.saveFileContent(content).then(res => {
      window.alert('Saved successfully')
    });
  }, []);

  const onContentChanged = useCallback(() => {
    setContentVersion(contentVersion + 1);
  }, [contentVersion]);

  return (
    <div className='seafile-editor'>
      <MarkdownEditor
        ref={editorRef}
        isFetching={isFetching}
        value={fileContent}
        initValue={''}
        editorApi={editorApi}
        onSave={onSave}
        onContentChanged={onContentChanged}
        mathJaxSource={mathJaxSource}
      />
    </div>
  );
}

```

### 道具

你可能想要指定的常见道具包括：

-   ref：对编辑器的引用，用于获取编辑器中的当前内容
    -   ref.current.getValue：在编辑器中获取当前的降价字符串值
    -   ref.current.getSlateValue：获取编辑器中当前石板数据格式的值
-   is抓取：是否正在获取编辑器的值，如果在获取的同时显示加载效果，如果获取完成，则在编辑器中显示获取到的相应内容。
-   value：获取的文本内容
-   initValue：如果value不存在，可以通过initValue提供一个默认值
-   onSave：当编辑器内容更改时，将从外部触发onSave回调事件。用户可以通过实现这个回调函数来保存文档。
-   onContentChanged：当编辑器内容发生变化时，触发一个变化事件，方便用户记录文档是否发生变化
-   mathJaxSource：支持插入公式。如果要支持插入公式，请提供一个可以加载公式资源的路径。如果不需要支持，可以忽略此参数。 [math-jax文档](https://docs.mathjax.org/en/stable/start.html)

## SimpleEditor用法

### 定义api

```javascript
import axios from 'axios';

class API {

  getFileContent() {
    const fileUrl = '';
    return axios.get(fileUrl);
  }

  saveFileContent(content) {
    const updateLink = '';
    const formData = new FormData();
    const blob = new Blob([data], { type: 'text/plain' });
    formData.append('file', blob);
    axios.post(updateLink, formData);
  }

  uploadLocalImage(file) {
    const uploadLink = '';
    const formData = new FormData();
    formData.append('file', file);
    return axios.post(uploadLink, formData);
  }

}

const editorApi = new API();

export default editorApi;
```

### 将simple集成到您自己的页面中

```javascript
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Button } from 'reactstrap';
import { SimpleEditor } from '@seafile/seafile-editor';
import editorApi from './api';

export default function SimpleEditorDemo() {

  const editorRef = useRef(null);
  const [fileContent, setFileContent] = useState('');
  const [isFetching, setIsFetching] = useState(true);
  const [contentVersion, setContentVersion] = useState(0);

  const mathJaxSource = '';

  useEffect(() => {
    editorApi.getFileContent().then(res => {
      setFileContent(res.data);
      setIsFetching(false);
    });
  }, []);

  const onSave = useCallback(() => {
    const content = editorRef.current.getValue();
     editorApi.saveFileContent(content).then(res => {
      window.alert('Saved successfully')
    });
  }, []);

  const onContentChanged = useCallback(() => {
    setContentVersion(contentVersion + 1);
  }, [contentVersion]);

  return (
    <div className='seafile-editor'>
      <SimpleEditor
        ref={editorRef}
        isFetching={isFetching}
        value={fileContent}
        initValue={''}
        editorApi={editorApi}
        onSave={onSave}
        onContentChanged={onContentChanged}
        mathJaxSource={mathJaxSource}
      />
    </div>
  );
}

```

### 道具

你可能想要指定的常见道具包括：

-   ref：对编辑器的引用，用于获取编辑器中的当前内容
    -   ref.current.getValue：在编辑器中获取当前的降价字符串值
    -   ref.current.getSlateValue：获取编辑器中当前石板数据格式的值
-   is抓取：是否正在获取编辑器的值，如果在获取的同时显示加载效果，如果获取完成，则在编辑器中显示获取到的相应内容。
-   value：获取的文本内容
-   onSave：当编辑器内容更改时，将从外部触发onSave回调事件。用户可以通过实现这个回调函数来保存文档。
-   onContentChanged：当编辑器内容发生变化时，触发一个变化事件，方便用户记录文档是否发生变化
-   mathJaxSource：支持插入公式。如果要支持插入公式，请提供一个可以加载公式资源的路径。如果不需要支持，可以忽略此参数。 [math-jax文档](https://docs.mathjax.org/en/stable/start.html)

## 功能

### `mdStringToSlate(mdString)`

将标记字符串转换为编辑器支持的数据结构（slate）

**参数个数**

-   mdString：降价字符串

**返回**

  石板节点

### `slateToMdString(slateNodes)`

将编辑器（slate）支持的数据结构转换为标记字符串

**参数个数**

-   slateNodes：单板节点

**返回**

  减价字符串

### `processor` processor.process (mdString)

将标记字符串转换为html

**参数个数**

-   mdString：降价字符串

**返回**

 承诺

演示

```javascript
const string = '# Hello, I am first level title'
processor.process(string).then(result => {
  const html = String(result);
  ...
})

```

## 场景支持

-   现代浏览器

### 现代浏览器

| [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/)  
边缘 | [![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/)  
火狐 | [![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/)  
铬 | [![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/)  
Safari |
| --- | --- | --- | --- |
| 边缘 | 假 | 最后2个版本 | 假 |

## 常见问题

### @seafile/seafile-editor 是什么？

seammarkdown编辑器是一个基于slate\.js的WYSIWYG Markdown编辑器。它用于海上和海上工程。

### 如何安装 @seafile/seafile-editor？

在项目目录运行 npm install @seafile/seafile-editor，或使用 pnpm add / yarn add / bun add。

### @seafile/seafile-editor 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/seafile\_\_seafile-editor 是否存在。

### @seafile/seafile-editor 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @seafile/seafile-editor 可以商用吗？

@seafile/seafile-editor 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @seafile/seafile-editor 还在维护吗？

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