@train860/tide v0.2.0-beta.9

@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

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

EditorRenderProps