問題タブ [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.
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 を使用しています。
関連する Github スレッド ( https://github.com/facebook/draft-js/issues/296 ) で、React の複数のバージョンについて言及されていました (ドラフトにはバージョン 15 以降が含まれているため)
v0.14...
。たった今)ドキュメントには、 (https://facebook.github.io/draft-js/docs/advanced-topics-issues-and-pitfalls.html#polyfills
es6-shim
)とともに使用することが記載されています。これを試しましたが、役に立ちませんでした。同じエラーが発生します。es5-shim
私が見逃している可能性のあるものは他にありますか?皆様のご意見をお待ちしております。
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 にドキュメントをインポートして書式を維持することは可能だと思いますか?
reactjs - Draft.js は、既にスタイル設定された要素の選択または範囲を取得します
私は react-rte を使用していますが、それを拡張したいと考えているので、Draft-js について話しましょう。
選択範囲を「インライン スタイル」にできる必要があります。次に、後続のレンダリングで、その選択の dom に再アクセスします。
では、選択範囲を強調表示するとします。次に、ドキュメントを永続化します。それから私は戻ってきて、ドキュメントをリロードします。強調表示されたセクションにアクセスできるようにする必要がありますが、dom 内にあります。
基本的に、ドキュメントの横に、draft-js の外側にマーカーを適用しています。これらのマーカーは、強調表示された部分に合わせる必要があります。したがって、最初の強調表示を行うと、window.getSelection() から dom の位置を取得でき、マーカーを配置できます。しかし、ドームは後で変更される可能性があり、マーカーを配置することはできません。
- 編集 -
したがって、別の使用例は、選択範囲を強調表示することです。同じセッションでも、選択範囲の色をプログラムで変更する必要があるため、カーソルがそのセクションになくてもドキュメントのセクションにアクセスする必要があります。
--編集終了--
したがって、私が本当に必要としているのは、一意のクラス名、ID、またはインライン スタイルを実行するときに作成される新しいスパンの反応参照のようなものです。
より良い説明が必要な場合はお知らせください。
javascript - getBoundingClientRect は、Safari で上、左、右、下に対して 0 を返します。
だから、私はFacebookのdraft-js
. そのdiv内のキャレットの視覚的な位置を取得する必要があり、これを実装しました(これはFirefoxとChromeで機能します):
Chrome と Firefox の場合、正しい座標を取得します。ただし、Firefox では、すべての位置プロパティに対して 0 を取得しています。これに対する回避策/クロスブラウザソリューションはありますか?
javascript - draft.js json から react.js コンテンツをレンダリングする方法
私はdraft.jsエディターを持っていて、編集が終了した後、結果をdataBaseに保存したとしましょう。結果をhtml文字列またはjsonオブジェクトとして保存するという2つのアプローチがあります。dataBase の html 文字列を使用すると、dangerouslySetInnerHTML を使用して簡単にレンダリングできます。しかし、このコンテンツを他のコンポーネントではなく、convertToRaw draft.js メソッドによって生成された json オブジェクトを使用するにはどうすればよいですか? を使用できることはわかっていますが、これがページ上に多くを表示するための最適化アプローチであるかどうかはわかりません。draft.js の json オブジェクトの例
emoji - Draft.js の絵文字ピッカーを提供する方法
私はdraft.jsをdraft-js-pluginsの絵文字で使用していますが、ユーザーに絵文字ピッカー(WhatsApp iMessageなど)を提供する方法があるのだろうかと思います。現在唯一の方法は、コロンを入力して、キーワードに基づいて提案を取得することです。私のすべてのユーザーは、これを非常にいらいらさせます。何か案は?