4

現在のアプリケーションでは、カスタム BBCode エディターを作成しました。多くの BBCode 拡張機能を使用しており、他の統合要件があるため、市販のエディターよりも独自のエディターを使用することが不可欠です。

これを作成し、生成された BBCode が常に有効であること、適切な HTML に変換されることなどを確認するのは大変な作業でしたが、結果には非常に満足しています。ただし...現状では、エンドユーザーにBBCodeの表示と編集を義務付けています。WYSIWYG を使用した方がよいでしょう。SCEditorには WYSIWYG インターフェイスがあることに注意してください。Chrome の優れたデバッガーで内部を調べたところ、次のことがわかりました。

  • 元のテキスト領域が非表示になっています
  • iframe を含む div が挿入されます
  • iframe 内のドキュメントには contenteditable div と非表示の textarea コントロールが含まれています

調査を続けて、これらすべてがどのように行われるかを理解することができました. ただし、ここで必要なものについて、誰かが私にいくつかの指針を与えることができることを願っています. 入力された BBCode が何らかの方法で非表示のテキスト領域に「流用」され、オンザフライで HTML に解析され、結果がコンテンツ編集可能な div またはそれらの行に沿って何かに表示されると思いますか? また、マウスのクリックと選択を正しく処理するという問題もあります。

4

1 に答える 1

6

SCEditor は、BBCode パーサーと DOM から BBCode へのコンバーターを備えていることで機能します (現時点では少し見にくいです)。

最初に、エディターtextareaは BBCode パーサーを介して から HTML に BBCode を変換し、それを の contentEditable 要素内に配置しiframeます。その後、ユーザーは、他の HTML WYSIWYG エディターと同様に contentEditable 要素のコンテンツを編集できます。

フォームが送信されるか、ユーザーが BBCode ソースを表示したい場合、DOM はコンバーターを介して BBCode に変換されます。DOM から BBCode への変換は正確に行うことができます。これは基本的に BBCode が解析されるためです。

たとえば、太字の場合、ノードstyle.fontWeightに太字があるかどうか、<strong>または or<b>タグであるかどうかを確認できます。リンクなどの他の要素については、属性を使用してコンテンツをタグhref内にラップするだけです。[url]

最後に、結果の BBCode が BBCode パーサーによって再度解析され、設定されている BBCode 出力オプションで出力されます。BBCode の標準は実際には存在しないため、ブロック レベル要素の後の改行などは構成可能にする必要があります。

基本的に、SCEditor が行うことは次のとおりです。

  • BBコード -> DOM
  • contentEditable による編集
  • DOM -> BBコード

SCEditor の作成から学んだことは、何年も費やして完成させたい場合を除き、contentEditable を使用して WYSIWYG エディターを作成するのではなく、他の誰かのものを使用/構築するだけだということです。ほぼ同じことを言っている CKEditor 開発者による別の投稿に回答があります。

独自の WYSIWYG エディターを作成したい場合は、Rangyを使用してブラウザーの選択を処理すると、作業がずっと簡単になります。ネイティブのブラウザー選択 API は (または少なくとも) 非常にバグがあります。それだけでなく、IE < 9 では、選択範囲にアクセスするための完全に非標準的な方法が使用されます。Rangy は、ブラウザのバグを回避するだけでなく、IE の非標準的なアプローチでも機能する共通の API を提供します。

于 2013-10-23T16:08:24.760 に答える