sea-markdown-editor

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

降价编辑器UI

集成的降价编辑器UI

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

简单的编辑器UI

集成简单编辑器UI

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

安装

通过npm安装：

npm install @seafile/seafile-editor --save

将库导入到项目中：

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

提供组件和功能

组件

功能

MarkdownEditor用法

定义api

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集成到您自己的页面中

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文档

SimpleEditor用法

定义api

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集成到您自己的页面中

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文档

功能

mdStringToSlate(mdString)

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

参数个数

• mdString：降价字符串

返回

  石板节点

slateToMdString(slateNodes)

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

参数个数

• slateNodes：单板节点

返回

  减价字符串

processor processor.process (mdString)

将标记字符串转换为html

参数个数

• mdString：降价字符串

返回

 承诺

演示

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

场景支持

• 现代浏览器

现代浏览器

边缘	火狐	铬	Safari
边缘	假	最后2个版本	假