表示されるリッチテキストエディタの原理変換
9337 ワード
テキストドメインのように編集して、すぐに見ることができるようにするにはどうすればいいですか?答えはiframeをコンテンツ編集領域として使用することです.iframe自体もネストされたページで、どのように編集できますか?ここにはiframeを編集できるようにする重要なプロパティがあります.
(1). ifr.を使うcontentDocument || ifr.contentWindow.document方式iframeのドキュメントオブジェクトを取得する(2).それぞれdesignMode属性を「on」、contentEditable属性を「true」に設定iframeを編集可能にする(3).doc.を通過する.body.innerHTMLメソッドは、最終的にデータベースに挿入したり、ページに表示したりするコンテンツを取得します(ユーザーコメントなど)
しかし、実際に実行しているとき、chromeブラウザ以外(IETester、Firefox、Chromeテストで)このページを開いてもロード中の状態(その車輪が回っていて、回っていて...)doc.write()メソッドの前後にdoc.open(), doc.close()でいいです(書く前に開いて、書き終わったら閉じます).
最後に、私たちのWebプログラムではjQueryをベースクラスライブラリとしてよく使用していますので、上記のコードもjQueryに変更しましょう.コードは次のとおりです.
(1). ifr.を使うcontentDocument || ifr.contentWindow.document方式iframeのドキュメントオブジェクトを取得する(2).それぞれdesignMode属性を「on」、contentEditable属性を「true」に設定iframeを編集可能にする(3).doc.を通過する.body.innerHTMLメソッドは、最終的にデータベースに挿入したり、ページに表示したりするコンテンツを取得します(ユーザーコメントなど)
しかし、実際に実行しているとき、chromeブラウザ以外(IETester、Firefox、Chromeテストで)このページを開いてもロード中の状態(その車輪が回っていて、回っていて...)doc.write()メソッドの前後にdoc.open(), doc.close()でいいです(書く前に開いて、書き終わったら閉じます).
最後に、私たちのWebプログラムではjQueryをベースクラスライブラリとしてよく使用していますので、上記のコードもjQueryに変更しましょう.コードは次のとおりです.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>KF </title>
6 <script type="text/javascript" src="jquery.min.js">
7 </script>
8 <script type="text/javascript">
9 $(function(){
10 $d = $("#editor")[0].contentWindow.document; // IE、FF
11 $d.designMode="on";
12 $d.contentEditable= true;
13 $d.open();
14 $d.close();
15 $("body", $d).append("<div>A</div><div>B</div><div>C</div>");
16
17 $('#insert_img').click(function(){
18 // iframe
19 var img = '<img src="' + $('#path').val() +'" />';
20 $("body", $d).append(img);
21 });
22
23 $('#preview').click(function(){
24 // iframe body ，
25 alert($('#editor').contents().find('body').html());
26 $('#preview_area').html($('#editor').contents().find('body').html());
27
28 });
29 });
30
31 </script>
32
33 </head>
34
35 <body>
36
37
38 <p><iframe id="editor" width="600px" height="200px" style="border:solid 1px;"></iframe></p>
39 <input type="text" id="path" value="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"/>
40 <input type="button" id="insert_img" value=" " />
41 <input type="button" id="preview" value=" " />
42
43 <p style="border: 1px dashed #ccc;" id="preview_area"></p>
44
45 </body>
46 </html>