javascriptリッチテキストエディター

Question

Javascriptで記述された（非常に優れた）リッチテキストWebエディターがいくつかあります（例：FCKeditor、YUI Texteditor、その他多数）。

ただし、このようなコンポーネントの作成方法に関するチュートリアルは見つかりませんでした。高レベルの考慮事項（アーキテクチャ）および/または低レベルの「クリティカル」の詳細を説明するもの。ポイント（つまり、ほとんどのエディターがiFrameを使用する理由、Ctrl-B、Ctrl-Cなどのキーボード入力をテキストが選択されている場合とされていない場合など）

私の主な動機は好奇心です。今日そのようなエディターを開発しなければならなかった場合、どこから始めればよいかわかりません。

上記の問題をカバーするチュートリアルを知っている人はいますか？

Answer 1

さらに調査した結果、次のことがわかりました。リッチテキストエディターを構築する機能は、ブラウザーで既に実装されています。 IEはそのようなAPIを最初に作成し、Firefoxはそれを複製しました。

概要

主なポイントは、javascriptオブジェクト＆quot; document＆quot; 「on」に設定できるdesignModeというプロパティがあります。これにより、すべてのページがtextareaのようなコンポーネントに変換されます。ブラウザがMS-Wordと同じようにページを開くと想像してください。ユーザーは書式設定を確認できますが、ページに入力することもできます（通常、ブラウザはページを読み取り専用で開きます）。

window.document.designMode = "On";

上記はすべてのWebページに影響するため、ほとんどのエディターはiFrameを使用し、編集可能な領域は独自のドキュメントオブジェクトを持つiFrameのみになります。

さらに、スタイリングへの簡単なJavaScriptアクセスを可能にするAPIがあります。これは、execCommand（）メソッドをスローして公開されます。たとえば、Javascriptから呼び出すことができます

document.execCommand('bold', false, '');

そして選択されたテキストは太字になります。

チュートリアル

次を見つけました：

ステップごとの短いステップガイド。

Mozilla ガイド。私が見つけた最も便利なAPIリファレンスと、さらにリンクがあります。

microsoft によるガイド。

Answer 2

好奇心を駆使して、お気に入りのエディターでソースコードを開き、探索を開始するよう動機付けてください。これらのエディターはJavaScriptで記述されているため、回答は無料です。

あなたはもっと簡単に消化できるものを探していることを理解していますが、ソースコードを読むことは非常にやりがいのあることです。

エディターの構築を開始するには、既存のオープンソースエディターを使用して、独自の特別なニーズに合わせて変更するだけで済みます。