8

オンライン エディタ (FCKEditor など) を開発しようとしていますが、どのように機能するのかわかりません。WYSIWYG に Javascript と IFrame があることは知っていますが、実際にはどのように機能するのでしょうか?

エディターに入力されている内容をリアルタイムでプレビューできることに特に興味があります。

4

6 に答える 6

9

RTE は通常 (常に?) iframe を使用して実装されます。その iframe 内で使用可能なドキュメント オブジェクトでは、プロパティdesignMode を on に設定する必要があります。この時点で、太字、斜体、色、背景などの基本機能を実装するために必要な作業はすべて、ドキュメント オブジェクトの execCommand メソッドを使用して行います。

iframe を使用する主な理由は、スタイル ボタンをクリックしたときに選択範囲のフォーカスが失われないことです (Firefox では、iframe でのみこのプロパティを設定できます)。さらに、 contentEditable 属性は Firefox バージョン 3 より前では利用できません。

その RTE で派手なことをしたい場合、事態はもう少し複雑になります。その時点で、Range オブジェクトを使用する必要があります(さまざまなブラウザーで実装が異なります)。

于 2009-02-02T15:45:59.187 に答える
4

FCKEditorはオープン ソースであり、ソース コードは自由に入手できます。

Stackoverflowで使用するエディタのコードも公開

ソースコードを読むのに時間を費やす価値があるかもしれません。ここにいる人々は、不明なコードのビットを喜んで説明してくれます。

于 2009-02-02T14:41:33.140 に答える
2

WYSIWYG エディターの鍵はcontenteditable属性だと思います (これはどの HTML タグにも適用できますが、この場合はおそらく div のようなものです)。残りの機能は通常、DOM にアクセスして HTML を操作する Javascript によって提供されます。プレビュー機能に関しては、これはおそらく、ユーザーが要素を編集したときに発生するイベントをフックし、その HTML をフェッチして、比較的単純な Javascript を使用してページの別の場所に表示するだけの問題です。

于 2009-02-02T14:42:09.473 に答える
1

（例：ああ、実際に表示されている部分と同期する入力テキストのボーダーレスがあります。したがって、文字を赤で表示するには、スタイルを変更するだけです）など..

それが行われる方法です。

于 2009-02-02T14:35:00.237 に答える
1

更新: 編集者だけが必要な場合は、ここで提供された他の提案のいずれかを使用することをお勧めします。しかし、これを構築するための学術的な目的がある場合は、次のことが出発点になります。

これは比較的簡単に実現できます (一部)。たとえば、jQuery を使用して、すぐに起動して実行することができます。

div.theScreen {
  width:320px;
  height:75px;
  border:1px solid #CCCCCC;
  background-color:#f1f1f1;
}

<div class="theScreen"></div>
<div><textarea class="typePad"></textarea></div>

マークアップとスタイルが整ったので、簡単な Javascript を追加して、リアルタイム プレビューをトリガーできます。

$(document).ready(function(){
  $(".typePad").keyup(function(){
    $(".theScreen").html($(".typePad").val());
  });
});

これは非常に大雑把で単純な例ですが、この例から始めることができます。

于 2009-02-02T14:42:12.560 に答える
0

約1年半前にリッチテキストエディタを作るオープンソースの「sourceforge」プロジェクトを始めました。コードをそこに入れる方法がわかりませんでしたが、それを開発するには、IE と Firefox で「コンテンツ編集可能モード」がどのように機能するかを調査する必要がありました。私の調査には、主に Firefox の Web サイトと Microsoft の Web サイトが含まれていました。

これを行うために私が見たコードは醜く、OO フレンドリーではありませんでした (申し訳ありませんが、私はオブジェクト偏屈者であり、どうしようもありません)。そのため、開発可能な形にするために多くのリファクタリングが必要でした。と延長します。

残念ながら、ブラウザーの「コンテンツ編集可能モード」が提供する機能に従っても、バグだらけのエディターになってしまいます。その理由は、「コンテンツ編集可能モード」は、MS Word からの貼り付け (誰もがこれを試みます) や番号付きリストの作成と一貫して機能せず、それが生成するマークアップは一貫性がなく、形式が不十分になるためです。

これが、現在TinyMCEを使用している理由です。TinyMCE には、私が個人的に回避したであろう設計上の決定事項がたくさんありますが、独自のエディターを作成しようとしたときに発生するバグの大部分は修正されています。また、必要に応じてカスタマイズできる機能も満載です。

代替案を実際に試していないため、他のものはお勧めできません。

TinyMCE が最良の選択肢のように思えますが、Word 文書の貼り付けはまだ予測不可​​能であり、HTML では WYSIWYG の約束は実際には可能ではありませんが、顧客はそれを期待しており、開始すると忍び寄る多くの問題があるため、依然として頭痛の種です。ユーザーが生の HTML をデータベースに挿入できるようにします。(特に、コードベースに 1993 年に最後に更新された部分がある場合...)

于 2009-02-02T15:31:08.047 に答える