0

私は自分のサイトにさまざまなエディターを組み込むために何日も費やしました. 誰も仕事に就いているようには見えません。私は彼らのコードを何度も掘り下げましたが、何かがうまくいきません。

私の要件は次のとおりです。

  • サイズ、太字、斜体、取り消し線、下付き文字、上付き文字などの基本的な書式設定
  • ajax による画像のアップロード、画像のサイズ変更と配置
  • リンク処理
  • 構文の強調表示を選択するためのドロップダウンを右上にあるコード タグまたはスタイル付き div。コードタグ/スタイル付きの div を離れると、テキストは ajax を介して更新され、行番号が含まれます。
  • ユーザーコードを貼り付けてエンコードする

私が試したエディタの主な問題は次のとおりです。

キャリッジ リターン/改行では、現在の要素からカーソルが移動しません。カーソルが移動した場合、現在の要素を再作成するか、現在の要素自体を再作成します。

複数のネストされた div など、多くの不要なコードを使用しています。あなたが得るいくつかのソースを見ると一体<div><div><div><div><div><div>Hello World</div></div></div></div></div></div>

彼らは私が必要とする癖では機能しません。

これが私のアイデアのイメージです。これは単なるノックアップです。

ここに画像の説明を入力

したがって、私の考えは、コンテンツの編集可能な div と正規表現を使用してコード タグを追跡し、独自の機能を実装することです。しかし、私はすべてのブラウザーでコンテンツ div の選択開始と長さを取得する必要があります。どうやってやるの?

また、コンテンツ div 内のテキストを置き換えます。

提案、アイデア、またはヘルプがあれば、ありがとうございます。

4

1 に答える 1

1

実際にはかなり簡単です。<div/>という属性を持つが必要なだけですcontenteditable。それ以降、ブラウザの問題は、その div に HTML を確実に挿入することだけです。しかし、以前はうまく機能していたので、実際の問題ではありません。

quirks モードについて言及したので、残念ながら色相ハックなしでは不可能ですが、簡単な修正があります。エディター (div) を別のページに配置し、iframe 内に埋め込みます。

画像のアップロード部分に関しては、サーバーがそれを処理する必要があります。編集者から見ればただの<img/>タグです。

于 2012-06-16T21:50:40.663 に答える