Javascript で書かれた (非常に優れた) リッチ テキスト Web エディターがいくつかあります (例: FCKeditor、YUI Texteditor など)。
ただし、そのようなコンポーネントを構築する方法に関するチュートリアルは見つかりませんでした。高レベルの考慮事項 (アーキテクチャ) および/または低レベルの「重要な」ポイントの詳細 (つまり、ほとんどのエディターが iFrame を使用する理由、Ctrl-B、Ctrl などのキーボード入力をどのように処理するか) の両方を説明するもの-C テキストが選択されている場合と選択されていない場合など)
私の主な動機は好奇心です。今日、そのようなエディターを開発しなければならないとしたら、どこから始めればよいかわかりません。
上記の問題をカバーするチュートリアルを知っている人はいますか (理想的には、wsiwyg エディターをゼロから構築する方法を説明するもの)?
さらに調査した結果、次のことがわかりました。リッチテキスト エディターを構築するための機能は、既にブラウザーに実装されています。IE はそのような API を最初に作成し、Firefox はそれを複製しました。
要点は、javascript オブジェクト "document" には、"on" に設定できる designMode というプロパティがあることです。これにより、すべてのページがテキストエリアのようなコンポーネントに変換されます。ブラウザーが MS-Word と同じ方法でページを開くと想像してください。ユーザーは書式設定を確認できますが、ページに入力することもできます (通常、ブラウザーはページを読み取り専用で開きます)。
window.document.designMode = "On";
上記はすべての Web ページに影響するため、ほとんどの編集者は iFrame を使用して、編集可能な領域が独自のドキュメント オブジェクトを持つ iFrame のみになるようにします。
その上、スタイリングへの簡単な JavaScript アクセスを可能にする API があります。これは、execCommand() メソッドをスローして公開されます。たとえば、Javascript から呼び出すことができます
document.execCommand('bold', false, '');
選択したテキストが太字になります。
私は以下を見つけました：
簡単なステップ バイ ステップガイド。
Mozillaガイド. これには、私が見つけた最も便利な API リファレンスと、さらにいくつかのリンクがあります。
マイクロソフトによるガイド。