@train860/tide NPM

@train860/tide

介绍

本包提供了 React 易于使用的编辑器组件。

安装

如果你不希望启用代码块的语法高亮功能，可以不安装 highlight.js。

npm install --save @train860/tide @train860/tide-starter-kit highlight.js
# or
yarn add @train860/tide @train860/tide-starter-kit highlight.js
# or
pnpm add @train860/tide @train860/tide-starter-kit highlight.js

使用

import React, { useState } from 'react';
import { EditorRender, useEditor } from '@train860/tide';
import { StarterKit } from '@train860/tide-starter-kit';

import '@train860/tide/dist/style.css';
import 'highlight.js/styles/default.css';

function App() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '# Hello World!',
    onChange: (doc) => console.log('onChange', doc),
  });

  // Update editor content
  // editor.setContent('Changed content');

  return <EditorRender editor={editor} />;
}

如需自定义样式，可参考 @train860/tide-theme/dist/variable.less 中的 CSS Variables 进行覆盖。

配置

useEditor Options

配置	说明	类型	默认值
content	内容	`HTMLContent \\| JSONContent \\| JSONContent[] \\| null`	-
autofocus	是否自动聚焦	`'start' \\| 'end' \\| 'all' \\| number \\| boolean \\| null`	`false`
editable	是否允许编辑	`boolean`	`true`
fullscreen	是否全屏模式	`boolean`	`false`
readOnlyEmptyView	只读模式下无内容时的视图	`ReactNode`	`null`
readOnlyShowMenu	只读模式下是否显示菜单栏	`boolean`	`false`
menuEnableUndoRedo	菜单栏是否启用撤销重做	`boolean`	`true`
menuEnableFullscreen	菜单栏是否启用全屏	`boolean`	`true`
onFullscreenChange	全屏状态变更时的回调函数	`(fullscreen: boolean) => void`	-
onReady	初始化完成后的回调函数	`(editor: TideEditor) => void`	-
onChange	内容变更时的回调函数	`(doc: JSONContent, editor: TideEditor) => void`	-

更多配置可参考 TideEditorOptions 接口定义。

EditorRenderProps

属性	说明	类型	默认值
className	容器自定义 `className`	`string`	-
style	容器自定义 `style`	`CSSProperties`	-
menuClassName	菜单栏自定义 `className`	`string`	-
menuStyle	菜单栏自定义 `style`	`CSSProperties`	-
contentClassName	内容区自定义 `className`	`string`	-
contentStyle	内容区自定义 `style`	`CSSProperties`	-