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 公式ドキュメントにアクセスしてください。さらに詳しい説明があります！

属性、方法、例がすべて揃っています。