5

埋め込みテキスト エディターの機能を完全に制御する必要がある Web アプリケーションのアイデアがあり、テキスト エディターはすべてのブラウザーでまったく同じように機能する必要があります。今回の私のニーズには、標準のcontenteditable機能では十分ではありません。

そのため、カスタム テキスト エディターを実装するさまざまな方法を試してきました。私の最初のアプローチは、キャ​​レット挿入のマウス クリックを検出することでした (ただし、これを実現する方法がないように見えるため、キャレットは表示されません)。これはかなりうまくいきましたが、残念ながらキャレット (点滅する I ビーム) を表示する方法がありませんでした。

これは、点滅するキャレットもカスタムメイドである必要があることを意味します。すべてのブラウザーで互換性がある方法でこれを達成するための 2 つの良い方法しか思い浮かびません。

  1. 最初の (そしておそらくより良い) オプションは、Google が Google ドキュメントで行ったように、JavaScript でカスタム レイアウト エンジンを実装することです。

  2. 2 番目の解決策 (おそらくはるかに簡単) は、各文字を独自の<span>要素内にカプセル化して、特定の文字の間に偽のキャレットを配置できるようにすることです。これは、多くの span 要素が存在することを意味しますが、ブラウザー レイアウト エンジンを利用しながら、必要なものを確実に達成できます。このアプローチのもう 1 つの利点は、危険なブラウザー固有のテキスト選択ハックに頼る必要がないことです。

私の質問は、オプション #2 は本当に悪い考えですか? もしそうなら、なぜですか？

4

1 に答える 1

5

まず第一に、独自のエディターで本当に作業する必要がありますか? FirepadとEtherpadは非常にクールな共同編集機能を備えており、contenteditable. このようなエディタを作成するのは非常に難しいため、時間を無駄にすることは意味がありません。

ただし、本当に独自のソリューションに取り組みたいと思っていて、すべてのブラウザーでまったく同じ動作が必要な場合は、運命にあります;)。避けたとしても、contenteditable他にも間違いなくうまくいかないことがあります。

とにかく、答え：

  1. 最初のオプションは非常に難しく、最初は時間がかかりますが、2 番目のオプションよりも多くのパワーが得られます。たとえば、完全にカスタムのレイアウト エンジンを使用すると、CSS3 の実装を待たずに改ページを実装できます (すべてのブラウザーでまったく同じ動作が必要なため、CSS3 に依存することはできません)。実際、ブラウザのレンダリングの違いのほとんどを回避できます。しかし、まともな JS 開発者のチームと数か月 (少なくとも) を持っていない限り、私はそれについて考え始めることさえしません。

  2. 2 番目の解決策 - DOM を再利用する方がより現実的です。最初にいくつかのパフォーマンス テストを実行しますが、文字ごとにスパンを設定すると、マウス クリック後にキャレットを配置する場所を簡単に見つけることができます。それがなければ、いくつかのトリックが必要です...私にはわかりません。Etherpad と Firepad ( Ace code editorを使用) がそれをどのように処理するかを確認することができますが、それでも - ラッピングが最も簡単な選択であり、少なくとも適切なブラウザーでは、非常に長いドキュメントを編集したい場合を除き、パフォーマンスの問題は発生しません。 (ただし、いくつかの最適化を開始できます)。

于 2013-05-26T20:37:56.570 に答える