問題タブ [draftjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
0 に答える
772 参照

javascript - DraftJS と Internet Explorer

IE11 で DraftJS エディターをレンダリングすると、次のエラーが発生します - Invariant Violation: PluginEditor.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

この同じセットアップは、Chrome/FF でも正常に機能します。ES6 のトランスパイルにはすでに babel を使用しています。

私が見逃している可能性のあるものは他にありますか?皆様のご意見をお待ちしております。

0 投票する
2 に答える
2191 参照

reactjs - フォーカス エディター、カーソルを最初のブロックの先頭に配置

Draft.js エディターにフォーカスを適用し、カーソルを最初の行/ブロックの先頭に配置する必要があります。エディターには複数の行/ブロックが含まれています。

適用されるだけthis.refs.editor.focus()で、カーソルは常にエディター内の 2 番目のブロック/行の先頭に配置されます。

この質問この問題をガイドとして使用して、以下のコードを試しましたが成功しませんでした。に渡すblockMapcreateFromBlockArray()は正しくないと思われます:

0 投票する
1 に答える
744 参照

html - ドラフト js の react-rte は、インポート時に html タグを尊重しません

Google ドキュメントによって生成された html があります。タイトルが中心です。Google Docsは私にaをくれました<p style='text-align:center' >が、それはrteのテキストを中央に配置しなかったので、テキストも中央に配置<center>しないタグに変更しました。

rte レンダリング後のページの html に、センター タグが表示されません。HTMLパーサーがそれを無視しているようです。

a)draft.js が処理する html の既知のサブセットはありますか?

b) Word や Google Docs から rte にドキュメントをインポートして書式を維持することは可能だと思いますか?

0 投票する
1 に答える
2964 参照

reactjs - Draft.js は、既にスタイル設定された要素の選択または範囲を取得します

私は react-rte を使用していますが、それを拡張したいと考えているので、Draft-js について話しましょう。

選択範囲を「インライン スタイル」にできる必要があります。次に、後続のレンダリングで、その選択の dom に再アクセスします。

では、選択範囲を強調表示するとします。次に、ドキュメントを永続化します。それから私は戻ってきて、ドキュメントをリロードします。強調表示されたセクションにアクセスできるようにする必要がありますが、dom 内にあります。

基本的に、ドキュメントの横に、draft-js の外側にマーカーを適用しています。これらのマーカーは、強調表示された部分に合わせる必要があります。したがって、最初の強調表示を行うと、window.getSelection() から dom の位置を取得でき、マーカーを配置できます。しかし、ドームは後で変更される可能性があり、マーカーを配置することはできません。

- 編集 -

したがって、別の使用例は、選択範囲を強調表示することです。同じセッションでも、選択範囲の色をプログラムで変更する必要があるため、カーソルがそのセクションになくてもドキュメントのセクションにアクセスする必要があります。

--編集終了--

したがって、私が本当に必要としているのは、一意のクラス名、ID、またはインライン スタイルを実行するときに作成される新しいスパンの反応参照のようなものです。

より良い説明が必要な場合はお知らせください。

0 投票する
1 に答える
3165 参照

javascript - getBoundingClientRect は、Safari で上、左、右、下に対して 0 を返します。

だから、私はFacebookのdraft-js. そのdiv内のキャレットの視覚的な位置を取得する必要があり、これを実装しました(これはFirefoxとChromeで機能します):

Chrome と Firefox の場合、正しい座標を取得します。ただし、Firefox では、すべての位置プロパティに対して 0 を取得しています。これに対する回避策/クロスブラウザソリューションはありますか?

0 投票する
1 に答える
1258 参照

javascript - draft.js json から react.js コンテンツをレンダリングする方法

私はdraft.jsエディターを持っていて、編集が終了した後、結果をdataBaseに保存したとしましょう。結果をhtml文字列またはjsonオブジェクトとして保存するという2つのアプローチがあります。dataBase の html 文字列を使用すると、dangerouslySetInnerHTML を使用して簡単にレンダリングできます。しかし、このコンテンツを他のコンポーネントではなく、convertToRaw draft.js メソッドによって生成された json オブジェクトを使用するにはどうすればよいですか? を使用できることはわかっていますが、これがページ上に多くを表示するための最適化アプローチであるかどうかはわかりません。draft.js の json オブジェクトの例

0 投票する
0 に答える
544 参照

emoji - Draft.js の絵文字ピッカーを提供する方法

私はdraft.jsをdraft-js-pluginsの絵文字で使用していますが、ユーザーに絵文字ピッカー(WhatsApp iMessageなど)を提供する方法があるのだろうかと思います。現在唯一の方法は、コロンを入力して、キーワードに基づいて提案を取得することです。私のすべてのユーザーは、これを非常にいらいらさせます。何か案は?