Web : Other

Web : Other http://dot.net.vn/Desktop.aspx/Threads/OtherWeb/ Code web site by other language Vietnam .NET Community vi-VN automail-noreply@dot.net.vn automail-noreply@dot.net.vn Copyright 2005-2008 Vietnam .NET Community Sat, 30 Aug 2008 10:42:06 GMT Web 60 http://cyber.law.harvard.edu/rss/rss.html VIE Portal RSS Generator - Version 5.5.3057.24265 - http://www.vieportal.vn/ Xây dựng một Rich Text Editor http://dot.net.vn/Desktop.aspx/Threads/OtherWeb/Xay_dung_mot_Rich_Text_Editor/ Link download http://vsviet.com/Desktop.aspx/dotNET-Libraries/ASP-Components/79D15812448C41CB9858F56D2A11363D/ Đã có khá nhiều trình soạn thảo văn bản WYSIWYG miễn phí được share trên mạng, nhưng nếu bạn là một web developer đích thực, có thể một lúc nào đó bạn sẽ muốn xây dựng cho riêng mình một Rich Text Editor. Nếu vậy, bài viết này chắc hẳn sẽ đem lại cho bạn một chút gì đó hữu ích. Thoạt tiên, khi nảy ra ý muốn viết 1 cái RTE, tôi đã nghĩ đến việc sử dụng 1 thẻ DIV để làm khung soạn thảo. Không khó trong việc giả lập con trỏ nhấp nháy, và chuyển các ký tự từ bàn phím vào trong phần tử DIV này. Một ví dụ là chương trình mô phỏng giao diện dòng lệnh của Window mà tôi đặt tên là <a href="http://sacroyantlabs.googlepages.com/cmd.htm" target="_blank">Web Command Line</a> (nó chỉ để chơi thôi chứ không giải quyết công việc gì <img src="http://www.ddth.com/images/smilies/emlaugh.gif" alt="" title="Emlaugh" class="inlineimg" border="0">). Nhưng rồi sau nhiều cuộc tìm kiếm, tôi đã phát hiện ra 1 điều quan trọng khác giúp cho công việc tự đơn giản hóa đi rất nhiều, đó là : DesignMode. DesignMode là 1 thuộc tính của đối tượng document, giá trị mặc định của nó là "off". Khi bạn sửa đổi giá trị này thành "on", hồ sơ web trở thành dạng có thể chỉnh sửa - editable, và bạn có thể thao tác với trang web trong cửa sổ như đang làm việc trên MS Word ! Đây chính là bí quyết để xây dựng nên những RTE cho các trình duyệt web. Bây giờ chúng ta sẽ làm 1 trình soạn thảo WYSIWYG đơn giản, gồm một trường nhập text, và các nút lệnh cho phép định dạng văn bản in đậm - B, in nghiêng - I, gạch dưới - U. Ngoài ra, chúng ta cũng thêm vào 2 nút cho phép chèn hình ảnh và liên kết. Sau cùng là một nút để gỡ bỏ các định dạng. Giao diện của editor trông sẽ như thế này : <img src="http://farm3.static.flickr.com/2278/2142569192_1e4f841419_o.jpg" alt="" onload="NcodeImageResizer.createOn(this);" border="0"> Khung soạn thảo là 1 iframe, như cách thường dùng của các RTE. Chúng ta cho nó 1 ID và dùng CSS để thiết lập kích thước và khả năng scroll : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> <iframe id="textArea" style="width:500px;height:240px;overflow:auto;"></iframe>  </code> </code> </div> </div>Để biến vùng iframe này về dạng editable, chúng ta thiết lập giá trị của thuộc tính designMode thành on bằng script sau : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 98px; text-align: left;"> <code style="white-space: nowrap;"> <code> var editor = document.getElementById('textArea').contentWindow.document;   editor.designMode='On';   editor.open();   editor.write('<html><head></head><body></body></html>');   editor.close();  </code> </code> </div> </div> Đoạn code JavaScript này phải được gọi sau khi iframe đã hiện diện trong trang web. contentWindow là 1 thuộc tính của các frames, iframes trong hồ sơ HTML. document.getElementById('textArea').contentWindow cho phép tham chiếu đến đối tượng iframe mà định danh được thiết lập : ID = "textArea". Trong Mozilla , chúng ta có thể tham chiếu đến 1 đối tượng cửa sổ iframe bằng script : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> window.frames["myFrame"]  </code> </code> </div> </div>Script tương ứng cho IE là : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> document.all.myFrame.contentWindow  </code> </code> </div> </div>Còn script mà chúng ta dùng sẽ thích hợp cho cả IE, Mozilla và Opera. Như vậy, chúng ta có 1 biến toàn cục editor, để tham chiếu đến đối tượng document của phần tử iframe giả lập khung soạn thảo văn bản. Dòng lệnh tiếp theo thiết lập designMode của nó thành "on". Các lệnh open, write, close chèn vào iframe các tags cơ bản của 1 hồ sơ HTML, những gì nằm giữa <body> và </body> sẽ hiển thị trên khung soạn thảo như phần text mặc định của Editor. Sau thiết lập designMode = "on", đối tượng document của iframe sẽ tự kích hoạt một số phương thức hỗ trợ thực hiện định dạng phần văn bản được chọn (selected text) bên trong nó. Chúng bao gồm : <ul><li>queryCommandEnabled</li><li>queryCommandIndeterm</li><li>queryCommandState</li><li>queryCommandSupported</li><li>queryCommandValue</li></ul> Trong đó, quan trọng hơn cả là 2 phương thức execCommand và queryCommandEnabled. Syntax của execCommand như sau : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> editableDocument.execCommand(sCommand [, bUserInterface] [, vValue])  </code> </code> </div> </div>Nếu không có text được chọn, phương thức này không làm gì cả. Tham số bắt buộc sCommand là 1 chuỗi tên lệnh định dạng (command identifiers), chẳng hạn "bold", "italic"... <a href="http://http//www.quirksmode.org/" target="_blank">QuirksMode</a> liệt kê khá chi tiết những lệnh định dạng này, và cả cách chúng làm việc trong từng trình duyệt : <a href="http://www.quirksmode.org/dom/execCommand.html" target="_blank">http://www.quirksmode.org/dom/execCommand.html</a> Tham số thứ hai, bUserInterface, thuộc dạng tùy chọn và mang 1 giá trị boolean (mặc định : false). Trong Mozilla, nếu đặt là true, bạn có thể nhận 1 lỗi (NS_ERROR_NOT_IMPLEMENTED). Tham số thứ 3, vValue, cũng thuộc dạng tùy chọn. Bạn sẽ phải dùng đến nó trong một số trường hợp mà tham số đầu tiên cần 1 giá trị cụ thể. Chẳng hạn khi muốn định dạng màu chữ, tham số thứ nhất sẽ là "forecolor", và chúng ta cần tham số thứ 3 để cho trình duyệt biết màu gì sẽ được sử dụng. Ví dụ : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> editableDocument.execCommand("forecolor", false, "#0000ff");  </code> </code> </div> </div>Hoặc khi chèn 1 hình ảnh, tham số thứ nhất sẽ là "insertimage", và tham số thứ 3 cho biết đường dẫn của hình ảnh đó : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> editableDocument.execCommand('insertimage', false, imageURL);  </code> </code> </div> </div>Để biết 1 command có thể thực thi hay không, chúng ta dùng queryCommandEnabled. Phương thức này nhận 1 tham số là tên của command (như : "bold", "italic", "forecolor", "insertimage"...), và trả về 1 giá trị boolean cho biết khả năng thi hành command đó. Thông thường chúng ta kiểm tra command trước khi gọi nó. Script dưới đây kiểm tra command tạo liên kết, nếu có thể thực hiện thì sẽ chèn vào khung soạn thảo 1 HyperLink (aLink) : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 66px; text-align: left;"> <code style="white-space: nowrap;"> <code> if(editableDocument.queryCommandEnabled("createlink")){    editableDocument.execCommand('createlink', false, aLink); }  </code> </code> </div> </div> Bây giờ, chúng ta xem xét các button. Chúng là những hình ảnh mà bạn tùy ý trình bày sao cho hợp lý. Thông thường các button định dạng nằm ngay trên khung soạn thảo như trong ví dụ mẫu này. Các lệnh in đậm, in nghiêng, gạch dưới được liên kết với hàm doFormat qua sự kiện click : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 66px; text-align: left;"> <code style="white-space: nowrap;"> <code>      <img src="bold.gif" onclick="doFormat('bold');">       <img src="italic.gif" onclick="doFormat('italic');">       <img src="underline.gif" onclick="doFormat('underline');">  </code> </code> </div> </div> Hàm doFormat như sau : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 114px; text-align: left;"> <code style="white-space: nowrap;"> <code>     function doFormat(a,b){       if(editor.queryCommandEnabled(a)){         if(!b){b=null;}             editor.execCommand(a,false,b);       }     }  </code> </code> </div> </div> Như vậy, doFormat nhận vào 2 tham số : - a : tên của command - b : giá trị của command Ở đây, editor là biến toàn cục đã định nghĩa bên ngoài hàm như trình bày phía trên. Khi được gọi, doFormat sử dụng phương thức queryCommandEnabled của editor để kiểm tra khả năng thực thi command a. Sau đó, tiếp tục kiểm tra tham số thứ 2, nếu không thấy thì gán cho nó giá trị null. Nếu có thể thực thi command thì gọi phương thức execCommand. Đối với việc chèn hình ảnh và liên kết, có một chút khác biệt, chúng ta viết 2 hàm addLink và insertImage dành riêng cho nhiệm vụ này. Chúng được gọi theo cách tương tự như 3 nút lệnh trước. <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 50px; text-align: left;"> <code style="white-space: nowrap;"> <code>       <img src="image.gif" onclick="insertImage();">       <img src="link.gif" onclick="addLink();">  </code> </code> </div> </div> Trong IE, bạn có thể viết : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code>     editor.execCommand("CreateLink", true);  </code> </code> </div> </div> Hoặc : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code>    editor.execCommand("InsertImage", true);  </code> </code> </div> </div> Trình duyệt này sẽ hiển thị một hộp thoại để người sử dụng nhập vào các tham số thích hợp : <img src="http://farm3.static.flickr.com/2014/2143437544_9b83c775e1_o.jpg" alt="" onload="NcodeImageResizer.createOn(this);" border="0"> <img src="http://farm3.static.flickr.com/2225/2143456580_e53ca630eb_o.jpg" alt="" onload="NcodeImageResizer.createOn(this);" border="0"> Tuy nhiên tính năng này chưa được Mozilla và Opera hỗ trợ, vì vậy, một số người lập trình Rich Text Editor đã tự xây dựng các kiểu DialogBox riêng để thay thế. Việc đó không khó, nhưng trong bài viết này, chúng ta sẽ đơn giản hóa công việc bằng 1 hộp thoại prompt. Dưới đây là hàm addLink : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 114px; text-align: left;"> <code style="white-space: nowrap;"> <code> function addLink(){   var aLink=prompt('Enter or paste a link :', '');     if(aLink){         doFormat('CreateLink',  aLink);     } }  </code> </code> </div> </div>Và hàm insertImage : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 130px; text-align: left;"> <code style="white-space: nowrap;"> <code> function insertImage(){   document.getElementById('textArea').contentWindow.focus();   var iURL=prompt('Enter or paste a URL :', '');     if(iURL){         doFormat('InsertImage',  iURL);     } }  </code> </code> </div> </div>Khi người sử dụng click trên nút [<img src="http://sacroyantlabs.googlepages.com/link.gif" alt="" onload="NcodeImageResizer.createOn(this);" border="0">], một hộp thoại prompt bật ra để họ nhập chuỗi siêu liên kết. Hàm addLink kiểm tra lại chuỗi này, nếu có giá trị thị gọi doFormat với 2 tham số : "CreateLink" - tên command, và aLink - URL đích do người dùng cung cấp. Khi hàm insertImage được gọi, chúng ta sử dụng dòng lệnh đầu tiên để focus vào vùng soạn thảo. (Điều này là cần thiết cho trình duyệt IE, bạn thử bỏ đi và chạy thử chương trình thì sẽ hiểu tại sao !). Tiếp đó, 1 hộp thoại prompt mở ra yêu cầu người sử dụng nhập vào URL của hình ảnh. Cuối cùng, chúng ta gọi doFormat với command "InsertImage" và giá trị iURL mà người dùng đã nhập. Nút lệnh [<img src="http://sacroyantlabs.googlepages.com/removeformatting.gif" alt="" onload="NcodeImageResizer.createOn(this);" border="0">] cho phép gỡ bỏ mọi định dạng trên phần text được chọn. <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> <img src="removeformatting.gif" onclick="unformat();">  </code> </code> </div> </div>Chúng ta viết hàm xử lý như sau : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 82px; text-align: left;"> <code style="white-space: nowrap;"> <code> function unformat(){     doFormat('removeformat');     doFormat('unlink'); }  </code> </code> </div> </div>Không có gì để giải thích nhiều. Command "removeformat" loại bỏ toàn bộ các thiết lập kiểu dáng văn bản. Command "unlink" gỡ bỏ liên kết cho phần văn bản đó. Cuối cùng, chúng ta có toàn bộ mã HTML và JavaScript như dưới đây : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 498px; text-align: left;"> <code style="white-space: nowrap;"> <code>     <h1>Rich Text Editor</h1>      <table border="0" cellpadding="0" cellspacing="1" bgcolor="#e1f2ff">         <tr height="20">             <td>             &nbsp;             <img src="bold.gif" title="Bold" onclick="doFormat('bold');">             <img src="italic.gif" title="Italic" onclick="doFormat('italic');">             <img src="underline.gif" title="Underline" onclick="doFormat('underline');">             <img src="image.gif" title="Insert Image" onclick="insertImage();">             <img src="link.gif" title="Hyperlink" onclick="addLink();">             <img src="removeformatting.gif" title="Remove Formatting" onclick="unformat();">                     </td>         </tr>         <tr>             <td align="center" bgcolor="#ffffff">     <iframe id="textArea" style="width:500px;height:240px;overflow:auto;"></iframe>             </td>         </tr>     </table>     <script type="text/javascript">     var editor = document.getElementById('textArea').contentWindow.document;         editor.designMode='On';       editor.open();       editor.write('<html><head></head><body></body></html>');       editor.close();          function doFormat(a,b){   if(editor.queryCommandEnabled(a)){     if(!b){b=null;}         editor.execCommand(a,false,b);   } } function addLink(){   var aLink=prompt('Enter or paste a link :', '');     if(aLink){         doFormat('CreateLink',  aLink);     } } function insertImage(){  document.getElementById('textArea').contentWindow.focus();   var aLink=prompt('Enter or paste a URL :', '');     if(aLink){         doFormat('InsertImage',  aLink);     } } function unformat(){     doFormat('removeformat');     doFormat('unlink'); }     </script>  </code> </code> </div> </div>Bây giờ thì Editor của chúng ta đã có thể hoạt động trên Mozilla, IE, Opera và Safari. <div class="smallfont"> Những command thường dùng </div> <hr style="color: rgb(252, 252, 252);" size="1">   <div id="post_message_976284">Định dạng văn bản tại chỗ : bold : in đậm text fontname : font chữ, vValue :tên font. VD : arial, verdana... fontsize : khổ chữ, vValue : các số từ 1 đến 7. forecolor : màu chữ. vValue : chuỗi tên hoặc mã màu. VD : #0000ff, navy... hilitecolor : màu nền (1). vValue : chuỗi tên hoặc mã màu. VD : #0000ff, navy... italic : làm nghiêng text subscript : text thấp xuống so với bình thường superscript : đẩy text lên cao hơn bình thường underline : gạch dưới text Định dạng khối văn bản : heading : Định dạng cho một tiêu đề. vValue : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. indent : cho khối văn bản lui vào 1 tab insertorderedlist : liệt kê theo số thứ tự insertunorderedlist : liệt kê không đánh số. justifycenter : căn giữa justifyfull : dàn đều 2 biên justifyleft : căn trái justifyright : căn phải outdent : cho khối văn bản lui ra 1 tab Các command khác : createlink : tạo liên kết. vValue : chuỗi URL delete : xóa phần selection inserthorizontalrule : chèn vào 1 phần tử <hr> inserthtml : chèn vào 1 chuỗi HTML (2) insertimage : chèn hình ảnh. vValue : đường dẫn đến file ảnh. removeformat : loại bỏ các định dạng ở phần selection. unlink : loại bỏ liên kết ở phần selection. Các command điều khiển editor : undo : khôi phục lại tình trạng trước khi có 1 thay đổi được ghi nhận (3) redo : khôi phục lại tình trạng trước khi undo 1 bước. selectall : chọn toàn bộ nội dung editor. Danh sách trên chưa đầy đủ, nhưng là những gì cơ bản nhất cho 1 trình soạn thảo văn bản. Chúng là các commands nhận được sự hỗ trợ chung của nhiều trình duyệt. Nhắc lại cú pháp của execCommand : editableDocument.execCommand(sCommand [, bUserInterface] [, vValue]) Trong đó : editableDocument : tên biến tham chiếu đến phần tử document của đối tượng iframe được dùng để giả lập khung soạn thảo. sCommand : chuỗi tên command. Không phân biệt hoa - thường. bUserInterface : biến tùy chọn hiển thị các DialogBox. Luôn thiết lập là false để tránh lỗi trong Mozilla và Opera. vValue : giá trị cho command. Nếu command không cần chỉ định giá trị, sử dụng null. Thông thường vValue là 1 chuỗi, ngoại trừ giá trị cho kích thước chữ có thể để dạng interger, nhưng nói chung vẫn nên đưa về kiểu string. * Chú thích : <ol style="list-style-type: decimal;"><li>Với IE, cần thay bằng command backcolor.</li><li>Chỉ duy nhất Mozilla hỗ trợ command này. Với IE, có thể dùng các command cụ thể cho từng đối tượng muốn chèn, như : InsertInputButton, InsertTextArea, InsertMarquee... <a href="http://msdn2.microsoft.com/en-us/library/ms533049%28VS.85%29.aspx" target="_blank">Xem thêm tại đây</a>.</li><li>Các thay đổi được ghi nhận có thể là bất cứ hành động nào làm khác đi nội dung vốn có trong Editor, chẳng hạn như việc gõ vào, xóa đi, hay đổi màu 1 ký tự... Undo và Redo chỉ làm việc hoàn hảo trong Mozilla.</li></ol>FireFox 3 đã hỗ trợ thuộc tính contentEditable. Như vậy có nghĩa là với IE 5+ và FireFox 3, chúng ta có thể gõ text trên bất cứ phần tử nào, sau khi thiết lập giá trị true cho thuộc tính contentEditable của nó. Ví dụ : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 130px; text-align: left;"> <code style="white-space: nowrap;"> <code> <div     contenteditable="true"     style="width:500px;height:200px;border:1px inset black; overflow:auto;"> Có thể xử lý văn bản ở đây như trong textArea </div>  </code> </code> </div> </div>Và việc làm 1 WYSIWYG Editor sẽ trở nên dễ dàng hơn nữa : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 194px; text-align: left;"> <code style="white-space: nowrap;"> <code>     <script language="javascript">       function doFormat(cmd) {         document.execCommand(cmd, null, null);       }     </script> <button onclick="doFormat('bold');">B</button> <div     contenteditable="true"     style="width:500px;height:200px;border:1px inset black; overflow:auto;"> </div>  </code> </code> </div> </div><a href="http://starkravingfinkle.org/blog/wp-content/uploads/2007/07/contenteditable.htm" target="_blank"></a> <div class="smallfont"> Viết class cho editor </div> <hr style="color: rgb(252, 252, 252);" size="1">  Khi nắm được những khái niệm xung quanh thuộc tính designMode và phương thức execCommand, việc xây dựng Rich Text Format Editor không còn là điều khó khăn nữa. Có lẽ những bạn nào mà qua topic này, lần đầu tiên nghe nói đến các khái niệm trên, sẽ có cùng cảm giác như vậy. Hiểu được vấn đề là giải quyết được vấn đề. Các trình WYSIWYG xây dựng sẵn thường khá cồng kềnh. Chúng càng cố khoác lên mình dáng vẻ của các ứng dụng soạn thảo văn bản desktop thì hình thức càng rườm rà, bề bộn, với những tính năng mà có thể chúng ta không bao giờ dùng đến. Đây là một số trình soạn thảo WYSIWYG phổ biến : <blockquote> * <a href="http://www.freerichtexteditor.com/page/3.htm" target="_blank">Free Rich Text Editor</a> * <a href="http://www.solmetra.com/en/disp.php/en_products/en_spaw/en_spaw_demo" target="_blank">SPAW Editor</a> * <a href="http://xinha.webfactional.com/" target="_blank">Xinha</a> * <a href="http://koivi.com/WYSIWYG-Editor/" target="_blank">Through-The-Web Editor</a> * <a href="http://kevinroth.com/rte/demo.htm" target="_blank">Cross-Browser Rich Text Editor</a> </blockquote>Các Editor cũng giống như mọi ứng dụng nền web, đều có hạn chế là phải phụ thuộc vào mức độ hỗ trợ của các trình duyệt. Một ứng dụng web có thể hoạt động trong nhiều trình duyệt khác nhau, không có lỗi khi chạy, và ít rắc rối, thì dễ gây cảm tình hơn những trò hoa lá. Về phía những editor mà các dịch vụ web sử dụng thì cái của <a href="http://mail.google.com/" target="_blank">Gmail</a> hợp với mỹ cảm của tôi hơn cả. Ở đó có sự hài hòa giữa tính đơn giản, vẻ đẹp trang nhã và khả năng hoạt động chuẩn xác, hoàn hảo. Do bài viết này chỉ nhằm mục đích giới thiệu cách xây dựng trình soạn thảo WYSIWYG, nên chúng ta vẫn giữ nguyên hình thức của bản trước mà không cần thêm các nút lệnh định dạng khác trên toolBar, tránh làm phức tạp vấn đề. Chúng ta mở đầu bằng đoạn script : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 402px; text-align: left;"> <code style="white-space: nowrap;"> <code> var RTE=null; var isIE=document.all?true:false; var isMz=(navigator.appName=='Netscape')?true:false; function rel(id){   return document.getElementById (id)||null; } function setHTML(el,sHTML){   if(rel(el)){    rel(el).innerHTML=sHTML;   }   else{     alert('The element "'+el+'" not found !');   } } function setBtnAction(btnID, Action){    var el = rel(btnID);     if(el.addEventListener){         el.addEventListener('click', new Function(Action), false);     }     else if (el.attachEvent){         el.attachEvent('onclick', new Function(Action));       }   }  </code> </code> </div> </div>rel trả về phần tử dựa trên id của nó. setHTML có nhiệm vụ gán code HTML vào 1 phần tử nào đó. setBtnAction chỉ định 1 hành động cho 1 button dưới sự kiện click. Hàm này nhận vào 2 tham số : ID của button và chuỗi tên hành động. Ví dụ chúng ta có button btnBold hiện diện dưới dạng 1 icon nhỏ : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> <img id="btnBold" src="bold.gif" title="Bold">  </code> </code> </div> </div>Nếu muốn chương trình thực thi lệnh doFomat("bold"), khi click vào hình ảnh này, chúng ta chỉ việc gọi hàm : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> setBtnAction('btnBold', 'doFormat("bold")');  </code> </code> </div> </div>Khi chuỗi 'doFormat("bold")' được truyền vào hàm setBtnAction, vì addEventListener và attachEvent bắt buộc tham số thứ 2 phải là 1 hàm, nên setBtnAction sẽ dùng chuỗi này để tạo ra 1 đối tượng Function với toán tử new. Giữ nguyên các thành phần điều khiển Editor như cũ, chúng ta viết lại code HTML : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 306px; text-align: left;"> <code style="white-space: nowrap;"> <code>    <table border="0" cellpadding="0" cellspacing="1" bgcolor="#e1f2ff">         <tr height="20">             <td>             &nbsp;             <img id="btnBold" src="bold.gif">             <img id="btnItalic" src="italic.gif">             <img id="btnUnderline" src="underline.gif">             <img id="btnInsertImage" src="image.gif">             <img id="btnAddLink" src="link.gif">             <img id="btnUnformat" src="removeformatting.gif">                    </td>         </tr>         <tr>             <td align="center" bgcolor="#ffffff">                 <span id="wysiwyg"></span>             </td>         </tr>     </table>  </code> </code> </div> </div>Thay vì nhúng các hàm vào từng button, chúng ta đã cho mỗi hình ảnh một giá trị ID. Nếu hình dung điều khiển WYSIWYG của chúng ta như 1 đối tượng, nó có thể mang các thuộc tính căn bản như : tên, kích thước vùng làm việc, nội dung bên trong. Và bên cạnh đó là 1 loạt các phương thức thi hành việc định dạng văn bản : chèn link, chèn hình ảnh... Đây là hàm dựng : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 402px; text-align: left;"> <code style="white-space: nowrap;"> <code> function RichTextEditor(sID, oContain, sDefaultText, iWidth, iHeight){      this.ID=sID;   this.content=sDefaultText;   this.width=(iWidth>300?iWidth:500);   this.height=(iHeight>80?iHeight:200);         var sEditor='<iframe id="'+this.ID;         sEditor+='" style="width:'+this.width;         sEditor+='px;height:'+this.height;         sEditor+='px;overflow:auto;"></iframe>';              setHTML(oContain,sEditor);      this.UI=document.getElementById(this.ID).contentWindow;   this.editor=this.UI.document;     with(this.editor){       designMode='On';       open();       write('<html><head></head><body>'+this.content+'</body></html>');       close();     } }  </code> </code> </div> </div>Các tham số : sID : chuỗi tên riêng cho mỗi Editor, bằng cách này, chúng ta có thể sử dụng nhiều Editor trên cùng 1 trang web. oContain : phần tử chứa Editor mà khung soạn thảo sẽ được tạo ra bên trong. sDefaultText : văn bản mặc định hiển thị khi Editor mở ra. Đây là 1 chuỗi HTML. iWidth : chiều rộng của khung soạn thảo. iHeight : chiều cao của khung soạn thảo. Trong hàm dựng, chúng ta thiết kế các thuộc tính : ID : định danh riêng content : nội dung văn bản trong editor width : chiều rộng height : chiều cao UI : tham chiếu đến khung iframe editor : tham chiếu đến đối tượng document của khung iframe. Biến này trực tiếp thi hành các command. Hàm doFormat ở bản cũ sẽ trở thành phương thức formatText của lớp đối tượng RichTextEditor : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 114px; text-align: left;"> <code style="white-space: nowrap;"> <code> RichTextEditor.prototype.formatText=function(command, value){   if(this.editor.queryCommandEnabled(command)){     if(!value){value=null;}         this.editor.execCommand(command,false,value);   } }  </code> </code> </div> </div> Và tương tự cho addLink, insertImage, unformat : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 290px; text-align: left;"> <code style="white-space: nowrap;"> <code> RichTextEditor.prototype.addLink=function(){   var aLink=prompt('Enter or paste a link :', '');     if(aLink){         this.formatText('CreateLink',  aLink);     } } RichTextEditor.prototype.insertImage=function(){   this.UI.focus();   var aLink=prompt('Enter or paste a URL :', '');     if(aLink){         this.formatText('InsertImage',  aLink);     } } RichTextEditor.prototype.unformat=function(){     this.formatText('removeformat');     this.formatText('unlink'); }  </code> </code> </div> </div>Ngoài ra chúng ta cũng thêm vào 1 phương thức mới là getContent để lấy nội dung văn bản : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 66px; text-align: left;"> <code style="white-space: nowrap;"> <code> RichTextEditor.prototype.getContent=function(){     return this.editor.body.innerHTML; }  </code> </code> </div> </div>Cuối cùng là 1 hàm dùng để khởi tạo trình soạn thảo, được gọi sau khi trang load xuống hoàn chỉnh : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 194px; text-align: left;"> <code style="white-space: nowrap;"> <code> function init(){   RTE=new RichTextEditor('RTE', 'wysiwyg', '', 500, 240);     setBtnAction('btnBold', 'RTE.formatText("bold")');   setBtnAction('btnItalic', 'RTE.formatText("italic")');   setBtnAction('btnUnderline', ' RTE.formatText("underline");');   setBtnAction('btnInsertImage', 'RTE.insertImage();');   setBtnAction('btnAddLink', 'RTE.addLink();');   setBtnAction('btnUnformat', ' RTE.unformat();'); }  </code> </code> </div> </div>Biến RTE được dùng làm một thể hiện của lớp RichTextEditor. Các dòng sau thiết lập hành động cho từng nút lệnh trên toolBar. init được gọi cùng sự kiện onload : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">PHP Code:</div> <div class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 34px; text-align: left;"> <code style="white-space: nowrap;"> <code> window.onload=init ;  </code> </code> </div> </div>Và thế là chúng ta đã có phiên bản Rich Text Editor mới, tuy không thay đổi trên giao diện, nhưng cấu trúc chương trình đã trở nên chặt chẽ hơn hẳn : Demo : <a href="http://sacroyantlabs.googlepages.com/rte2.htm" target="_blank">http://sacroyantlabs.googlepages.com/rte2.htm</a> Download code : <a href="http://snlibs.googlepages.com/DemoEditor.zip" target="_blank">http://snlibs.googlepages.com/DemoEditor.zip</a> Còn đây là sản phẩm hoàn thiện : <a href="http://sacroyant.googlepages.com/r_editor.htm" target="_blank"><img src="http://farm3.static.flickr.com/2415/2151215572_d8a243314e_m.jpg" alt="" onload="NcodeImageResizer.createOn(this);" border="0"></a> Từ bản demo rút gọn đến sản phẩm sau cùng chỉ còn một quãng đường ngắn, và chắc hẳn bạn sẽ cảm thấy dễ chịu hơn nếu đi tới đó một mình Clipboard là một vùng nhớ tạm trong window, nơi chứa dữ liệu mà chúng ta đã copy hay cut. Các ứng dụng khác nhau vẫn được phép sử dụng chung khối dữ liệu này. Có nghĩa là có thể bạn copy text trong MS Word, sau đó dán lên khung soạn thảo của <a href="http://docs.google.com/" target="_blank">Google Docs</a>. Các command "copy", "cut", "paste" cho phép RTE của chúng ta làm điều này. Nhưng vì lý do an toàn, ngoại trừ IE, các trình duyệt khác đều mặc định vô hiệu hóa tính năng trên. Nếu Java Script cố gọi thử lệnh này trên Mozilla, trình duyệt sẽ trả về lỗi : <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;">Quote:</div> <table border="0" cellpadding="6" cellspacing="0" width="100%"> <tbody><tr> <td class="alt2" style="border: 1px inset ;"> <div> Được gửi bởi Mozilla Eror Console </div> <div style="font-style: italic;">Error: [Exception... "Access to XPConnect service denied" code: "1011" nsresult: "0x805303f3 (NS_ERROR_DOM_XPCONNECT_ACCESS_DENIED)"</div> </td> </tr> </tbody></table> </div>Google Docs bắt lỗi này lại và cho ra thông báo : <img src="http://farm3.static.flickr.com/2111/2158772881_27c098df3f_o.jpg" alt="" onload="NcodeImageResizer.createOn(this);" border="0"> Nhiều phương pháp đã được đưa ra để khắc phục trở ngại này, đồng thời tránh khỏi việc phải yêu cầu người dùng thay đổi cấu hình trên hệ thống của họ. Một trong những phương pháp khá thú vị là sử dụng Action Script. Do ngôn ngữ này có thể can thiệp sâu vào hệ thống của client nên 1 chương trình flash đã được viết ra để bổ sung khả năng vào nơi mà Java Script bất lực. (<a href="http://www.jeffothy.com/weblog/clipboard-copy/" target="_blank">Xem chi tiết</a>) Nhưng nếu bạn từng sử dụng <a href="http://writer.zoho.com/" target="_blank">Zoho Writer</a>, bạn sẽ thấy họ vẫn làm cho các lệnh copy, cut và paste hoạt động được trên FireFox. Lần tìm giải pháp trong source code của một ứng dụng web phức tạp như <a href="http://writer.zoho.com/" target="_blank">Zoho Writer</a> là một việc không mấy dễ dàng. Chỉ còn cách dựa trên các biểu hiện để phán đoán. Điều dễ nhận thấy là chúng ta không thể đem paste khối văn bản được copy hay cut từ khung soạn thảo của Zoho Writer vào MS Word, và ngược lại, cũng không thể dùng lệnh paste trên khung soạn thảo của Zoho Writer để chèn vào nó những gì có tr