Reactに基づくリッチテキストエディタ－－Braft Editor

最近、React に関する多くの記事を発表し、新しい技術的なポイントやコードを書く過程で直面した問題を記録しています。同じ問題に直面している仲間に役立つことを願っています。

今日は、React に基づくリッチテキストエディタ - Braft Editor を紹介します。

Braft Editor 公式サイト：https://braft.margox.cn
Github リポジトリ：https://github.com/margox/braft-editor

このプラグインは非常に便利で、ダウンロードしてインポートするだけで直接使用できます。ページ全体のスタイルは新鮮で、ほとんどの人の美的感覚に合っています。画像や音声・動画の挿入をサポートしています。

公式の説明によれば、もしその機能に満足できない場合は、完全に拡張して自分でプラグインを書くことができます。

私のテストによれば、機能は絶対に強力で、市場のほとんどのニーズを満たすことができます。次に、このプラグインの使用方法について説明します。

1. インストール#

プロジェクト内で直接 npm または yarn を使用してプラグインをダウンロードします：

# npm を使用してインストール
npm install braft-editor --save

# yarn を使用してインストール
yarn add braft-editor

2. 使用#

新しいコンポーネント EditorDemo.js を作成し、以下のコードを記入します：

// EditorDemo.js

import React from 'react';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

export default class PageDemo extends React.Component {

  state = {
    editorState: BraftEditor.createEditorState(null)
  }

  render () {
    return (
      <BraftEditor value={this.state.editorState} onChange={this.handleChange}/>
    )
  }

  handleChange = (editorState) => {
    this.setState({ editorState })
  }

}

次に、index.js にインポートします。

3. 実行#

コンポーネントを書いた後、npm start で実行してみてください。

非常に良いですね。ページはシンプルで、スタイルが気に入らない場合は、自分で再カスタマイズすることもできます。非常に便利です。

4. ドキュメント#

より多くの機能やメソッドを使用したい場合は、Braft Editor 公式ドキュメントにアクセスしてください。さらに詳しい説明があります！

属性、メソッド、例がすべて揃っています。