問題タブ [draftjs]

convertToRaw を使用してコンテンツを DB に保存しました。それを draft.js エディタにロードして、ユーザーがコンテンツを再編集できるようにしようとしています。

draft.js エディターは、ユーザーがコンテンツの「編集」をクリックすると表示される、react-modalベースのコンポーネント内に含まれています。モーダル (およびエディター) は再インスタンス化されず、表示および非表示されるだけなので、これは重要です。

エディターは、(ES6) クラス コンストラクターで次のように使用して 1 回だけ開始されます。

ユーザーが「編集」をクリックすると、DB から生のコンテンツが読み込まれます。次に、次のさまざまなバリエーションを使用して、生のコンテンツをエディターに読み込んでみました。

しかし、newEditorState には明らかに正しいコンテンツが含まれていますthis.setState({editorState: newEditorState})が、コンポーネント (またはエディター) の状態にはまったく影響を与えないようです。

エディターの新しい状態を設定するにはどうすればよいですか? ありがとう！

更新this.setState({editorState: newEditorState})さらに調査すると、エディターコンポーネントだけで失敗しているの は明らかです。

テスト状態プロパティを設定して正常に更新することでテストしましたが、editorState は変更されません。

これを完全にテストするために、コンストラクターで次を使用してテスト値で状態を初期化しました。

次に、setState がテスト値に対してどのように機能するかを示すテスト コードをいくつか作成しましたが、draft.js の editorState に対しては機能しません。

コンソール出力は次のようになります。

testVal が更新されているときに、draft.js の editorState が更新されない理由がわかりません。

editorState でいくつかのトリッキーな状態の変更を行っていますが、選択が失われています。

currentText() を取得し、魔法のライブラリを使用して HTML に変換し、それを editorState に戻す必要があります。それはうまくいきます、それは非常に壊れる選択です。

現在、最初の最初に選択を取得してから実行しようとしてforceSelectionいますが、関連するエラーで失敗しますselection.hasFocus()(実際には関連していないようです...)。

アンカーとオフセットに基づいて「新しい」選択を計算する必要があると思いますが、それを行うためのアイデアはありませんか?

今私のコードは次のようになります：

ハックです。私は DraftJS をいじっているだけだとわかっています。それを達成できれば、スムーズに動作させる場合は、間違いなく Decorator を使用して、editorState 内に HTML を追加します。

御時間ありがとうございます！

今、私はマークダウンハイライターを作っています。

ハイライトインラインはそれほど難しくありません。CompositeDecorator を使用してテキストを書き換えます。https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html

しかし、複数行の構文 (コードブロックなど) は使用できません。デフォルトでは、改行は次のブロックになり、デコレーターはブロックごとに処理されます。

下の画像は私の実装例です。コードブロックの構文をデコレートできません。

ドラフトjsで複数行の蛍光ペンを作成するにはどうすればよいですか?

Draft-JS50 文字の行に制限されるfacebook のフレームワークを使用してエディターを実装しようとしています。

css を使用して行を分割したくありません。この 50 文字の制限に達したときに、行を実際に別々のブロックに分割したいのです。

改行は、50 番目の文字を超える単語の前の最後のスペースで発生する必要があります ( word-wrap: break-wordcss と同様)。

確かに、新しい行の最後にとどまるには選択が必要です。

どこから始めればよいかわかりません。何か案は？

• 簡単に開始できるように、現在の editorState のプレビューを含むドラフト js コードペンを作成しましたが、どこから始めればよいかわかりません: https://codepen.io/adamtal/pen/pbqVrL?editors=0010

更新:の回答 へJiang YDの回答として、ブロックの最後からテキストを取得して新しいブロックを作成するのは良い考えではないと思います.書式設定の状態がどの程度維持されるかはわかりません. 解決策は、おそらく何らかの選択操作でModifier.splitBlockを使用する必要があると思います。

私はdraft-jsのドキュメントに従って、draft-jsの非常に簡単なデモを作成しました。

すべてうまくいっているように見えますが、Chrome で URL を開くと、白い空白のページしか表示されません (そこには非表示のエディター コンポーネントがありますが、表示されません)。

ブラウザのコンソールにエラーはありません。

デモ プロジェクトはhttps://github.com/js-demos/react-draft-js-demoにあります。クローンを作成し、readme に従って実行できます。

コードを注意深く確認しましたが、その理由がわかりません。

こんにちは、reactJS プロジェクトで react-rte を使用しようとしています。サーバー側のレンダリングがあり、このパッケージを使用するたびに次のようになります。

問題は isomorphic-tools にあると思いますが、ウィンドウが既に定義されているクライアントへのパッケージのインポートを延期する方法がわかりません。