web-dev-qa-db-ja.com

リッチテキストエディターの作成方法

リッチテキストエディターを作成する背後にある概念を知りたいと思います。リッチテキストエディターを作成する方法を意味します。実装を学びたいです。

PS：YUIやその他の組み込みライブラリの使用を提案しないでください。自分で作りたいです。

それでは、背後にある概念は何ですか？

ありがとう：）

javascripthtmlrich-text-editor
39
codeomnitrix

最も簡単な方法は次のとおりです。 TinyMCE および CKEditor および他の多くのユーザーが使用します。多くのバリエーションがあります。特に、コードエディターを作成する場合は、テキストエリアと等幅フォントを使用して行うことができる巧妙なトリックがあります。

  • Iframeを動的に作成し、そのiframeのドキュメント内に編集可能なコンテンツを配置します
  • ドキュメントのdesignModeプロパティを「on」に設定するか、_<body>_要素のcontentEditableプロパティをtrueに設定して、iframeを編集可能に設定します。 FirefoxではdesignModeがcontenteditableより前にサポートされているため、バグが少なくなります。
  • Iframe内の選択されたコンテンツに作用するメインドキュメントの適切な場所（編集可能なiframeの真上など）にボタン（太字、斜体、画像の挿入など）を追加します。すべてのブラウザはexecCommand()メソッドを提供します（ [〜＃〜] msdn [〜＃〜] および [〜＃〜]を参照） mdn [〜＃〜] 、たとえば）これらのアクションの多くを実行しますが、その動作方法や生成するマークアップには正確なバリエーションがあります。

それが動作の基本です。ブラウザー間の多くの違いを解決し、組み込みのブラウザーコマンドでカバーされない追加の機能を提供するために、ほとんどのエディターがすぐに明らかではない、他の多くの複雑なことがあります。それは非常に複雑で困難なことであり、高度な専門知識とコミットメントが必要であり、軽視するものではありません。

54
Tim Down

他のユーザーに使用することはお勧めしませんが、jQueryでどのようにコーディングされているかを確認するために jWYSIWYG を参照することをお勧めします。

1
Chris Bornhoft