Trang 1 / 5 1234 ... LastLast
Hiển thị kết quả từ 1 đến 10 / 43
  1. #1
    Tham gia
    01-01-2008
    Bài viết
    1,058
    Like
    5
    Thanked 15 Times in 11 Posts

    [tut] Xây dựng 1 simple text editor

    Chào các bạn. Nối tiếp bài viết của anh sacroyant về cách code 1 "rich text editor phần 1", em tiếp thêm 1 tut hướng dẫn cách code 1 "simple text editor". Do nhiều người không thích dùng rich text editor cho lắm, nên họ sẽ dùng simple text editor thay thế vì nó đơn giản hơn, và được các trình duyêt hỗ trợ nhiều hơn .

    Demo ở đây : http://zoejoe.net/store/test/STE/

    Đầu tiên ta tạo một giao diện gồm 3 nút nhấn : B - Bold, I - Italic, U - Underline. Các nút còn lại, các bạn có thể tự làm lấy. Chỉ cần biết chút ít về Javascript là có thể làm được.
    PHP Code:
    <!-- text editor -->
    <
    div class="editor">
    <
    input type="button" value="B" id="bold" />
    <
    input type="button" value="I" id="italic" />
    <
    input type="button" value="U" id="underline" />
    </
    div>

    <
    div class="editor">
    <
    textarea id="editor" name="editor"></textarea>
    </
    div
    Dùng CSS để đinh dạng :
    PHP Code:
    .editor {

      
    background#F4FAFF;
      
    padding3px 3px 3px 10px;
      
    margin-top1px;
      
    margin-bottom3px;
      
    margin-left10px;
      
    margin-right10px;

      
    border-bottom1px #0164F9 dashed;
      
    border-top1px #0164F9 dashed;

      
    font-familyVerdana;
      
    font-size12px;
      
    font-weightbold;
      
    letter-spacing5px;
    }


    #editor {
      
    height120px;
      
    width500px;
      
    backgroundurl(ldquo-grey.gifno-repeat;
      
    background-color#FFFFFF;

      
    background-position1px 1px;
      
    padding10px;
      
    border1px solid #0055E5;


    Các bạn cũng có thể tự tạo cho mình với phong cách khác.

    Tiếp theo ta sẽ tạo 2 mảng : một mảng chứ tag mở (tag open), một mảng chứ tag đóng (tag end). 2 mảng này cần được gián các giá trị tuơng đương nhau để lát nữa khi chèn tag, không bị lỗi "râu ông này cắm cằm bà kia".

    PHP Code:
    var tagO = new Array();
    var 
    tagE = new Array();

    tagO***91;0***93; = '{B}';
    tagO***91;1***93; = '{I}';
    tagO***91;2***93; = '{U}';

    tagE***91;0***93; = '{/B}';
    tagE***91;1***93; = '{/I}';
    tagE***91;2***93; = '{/U}'
    Đây là những biến toàn cục, có thể gọi được khi ở trong hàm. Các bạn có thể thay thế '{' và '}' bằng '[' và ']' cho giống BBCODE.

    Sau đó, ta viết một hàm để ấn định các việc sẽ làm khi có sự kiện onclick trên các button ta vừa tạo trên :

    PHP Code:
    var pre = function() {
        var 
    bold document.getElementById('bold');
        var 
    italic document.getElementById('italic');
        var 
    underline document.getElementById('underline');
        
        
        
    //--> Task onclick
        
    bold.onclick = function() { addTag(0) }
        
    italic.onclick = function() { addTag(1) }
        
    underline.onclick = function() { addTag(2) }
         
        

    Hàm này chút nữa sẽ đưa vào sự kiện onload.

    Tiếp theo ta viết hàm chèn tag. Code như sau :

    PHP Code:
    function addTag(num)
    {
       var 
    obj document.getElementById('editor');
        
       if(
    navigator.appName == 'Netscape') {  // for FF, Opera
            // code here
          
    try {
                var 
    pos obj.scrollTop;
                
                var 
    st obj.selectionStart;
                var 
    en obj.selectionEnd;
                
                var 
    before obj.value.substring(0,st);
                var 
    after  obj.value.substring(en,obj.value.length);
                var 
    str obj.value.substring(st,en);
                
                var 
    result before tagO***91;num***93; + str tagE***91;num***93; + after;
                
    obj.value result;
                
                
    obj.setSelectionRange(st,(en tagE***91;num***93;.length tagO***91;num***93;.length));
                
                
    obj.scrollTop pos;
           } catch(
    e) { alert('Error : ' e); }
           
            
    //--> end this code   
         
    } else { // for IE
            // code here 
            
    try {
                if(
    document.selection.createRange().parentElement().name == 'editor'){
                    var 
    str document.selection.createRange().text;
                    
    document.selection.createRange().text =    tagO***91;num***93; + str tagE***91;num***93;;
                    
    document.selection.createRange().select();
                 }
             } catch(
    e) { alert('Error: ' e); }
         }
            
    //--> end this code
         
            
            
          
    obj.focus();

    navigator.appName sẽ lấy tên trình duyệt mà ta đang sử dụng. Vì Netscape và Internet Explorer sẽ phải có những phuơng thức khác nhau để chèn code, nên ta mới kiểm tra. Hầu hết các trình duyệt đề có navigator.appName là "Netscape", riêng IE là "Internet Explorer". Các bạn có thể thử bằng javascript với câu lệnh alert(navigator.appName);

    Chúng ta truy vấn tới đối tượng textarea thông qua biến :
    var obj = document.getElementById('editor');

    obj.scrollTop sẽ lấy ra vị trí scroll trong textarea. Khi có nhiều dòng, việc này sẽ hữu ích. Ta lấy trước vị trí này, lát lại dùng thuộc tính obj.scrollTop gán lại vị trí cũ để tạo cảm giác thuận tiện cho người dùng.

    obj.selectionStartobj.selectionEnd giúp chúng ta lấy vị trí của đoạn text được chọn ở đầu và ở cuối. Nên nhớ, đầu tiên đối với lập trình luôn luôn là 0.

    Ta sẽ chèn tag bằng cách chèn lại đoạn text mới với tag của chúng ta. Ta sẽ lôi ra từng phần của đoạn text đó : Phần đầu - từ vị trí 0 đến vị trí đầu của vùng chọn, phân 2 - từ vị trí đầu vùng chọn cho đến cuối vùng chọn và phân 3 - từ cuối vùng chọn cho đến hết đoạn text :

    PHP Code:
    var before obj.value.substring(0,st);
    var 
    after  obj.value.substring(en,obj.value.length);
    var 
    str obj.value.substring(st,en);
                
    var 
    result before tagO***91;num***93; + str tagE***91;num***93; + after;
    obj.value result
    Sau đó ta sẽ đưa result vào lại value của textarea. Thật đơn giản.

    Sau đó, ta sẽ select vùng add tag bằng code :

    PHP Code:
    obj.setSelectionRange(st,(en tagE***91;num***93;.length tagO***91;num***93;.length)); 
    Ta chọn từ vị trí đầu được select ban nãy (trước khi chèn tag) tới vị trí cuối bằng tổng độ dài string các tags và vị trí cuối của vùng chọn ban nãy.

    Dùng obj.scrollTop = pos; để đưa vị trí scroll đến vị trí vùng chèn tags khi có nhièu dòng có scroll bar bên hông.

    Đối với IE thì Browser này có hỗ trợ bạn phưong thức document.selection.createRange() để xử lí chuỗi đang select.

    PHP Code:
    if(document.selection.createRange().parentElement().name == 'editor'){
                    var 
    str document.selection.createRange().text;
                    
    document.selection.createRange().text =    tagO***91;num***93; + str tagE***91;num***93;;
                    
    document.selection.createRange().select();
                 } 
    document.selection.createRange().parentElement().n ame == 'editor' kiểm tra để chắc rằng vùng text đựoc chọn phải là vùng có nút cha tên là 'editor'.

    Sau đó ta gán vùng text được chọn bằng đoạn text mới mang tags : document.selection.createRange().text = tagO[num] + str + tagE[num];

    Cuối cùng ta select lại vùng đó :
    PHP Code:
    document.selection.createRange().select(); 
    Ta focus lại textarea bằng obj.focus();

    Ta có thể viết hàm sau để thực thi hàm khi đã load xong trang web :
    PHP Code:
    function addLoadFunc(func)
    {
        var 
    oldLoad window.onload;
        if(
    typeof oldLoad != 'function') {
            
    window.onload func;
        } else {
            
    window.onload = function() {
                
    oldLoad();
                
    func();
            }
        }
        

    Có thể nó không cần thiết, nhưng với 1 số lượng lớn hàm cần đựoc thưc thi sau khi load thì tốt hơn hết là ta nên viết.

    Ta đưa hàm của ta vào là xong
    addLoadFunc(pre);

    Demo ở đây : http://zoejoe.net/store/test/STE/
    Được sửa bởi zoejoe lúc 18:31 ngày 07-12-2008
    Quote Quote

  2. 4 thành viên Like bài viết này:


  3. #2
    Tham gia
    03-04-2003
    Location
    Hà Nội
    Bài viết
    823
    Like
    1
    Thanked 15 Times in 5 Posts
    Bài viết hay, đơn giản cho một vấn đề mà web programer nào cũng sẽ và đã gặp.
    sticky!

  4. 2 thành viên Like bài viết này:


  5. #3
    Tham gia
    01-01-2008
    Bài viết
    1,058
    Like
    5
    Thanked 15 Times in 11 Posts
    Quote Được gửi bởi TheHeTre View Post
    Bài viết hay, đơn giản cho một vấn đề mà web programer nào cũng sẽ và đã gặp.
    sticky!
    Thanks. Về phần cách tạo liên kết, chèn hình ảnh, quote, code này nọ ... thì các bạn có thể tham khảo tại : http://ddth.com/showthread.php?t=160685

    Bài viết này của anh sacroyant, mình cũng học hỏi từ đó

  6. Thành viên Like bài viết này:


  7. #4
    Tham gia
    29-02-2008
    Bài viết
    4
    Like
    0
    Thanked 1 Time in 1 Post
    Chà, em cũng đang wan tâm fần này, thanks các anh!

  8. Thành viên Like bài viết này:


  9. #5
    Tham gia
    02-02-2004
    Bài viết
    309
    Like
    2
    Thanked 6 Times in 6 Posts
    Tớ đã làm thử và dường như đoạn code này có vấn đề trên IE
    if(document.selection.createRange().parentElement( ).name == 'editor'){
    var str = document.selection.createRange().text;
    document.selection.createRange().text = tagO[num] + str + tagE[num];
    document.selection.createRange().select();
    }

  10. Thành viên Like bài viết này:


  11. #6
    Tham gia
    01-01-2008
    Bài viết
    1,058
    Like
    5
    Thanked 15 Times in 11 Posts
    Quote Được gửi bởi Thanh duc View Post
    Tớ đã làm thử và dường như đoạn code này có vấn đề trên IE
    Bạn có thể download file html ở đây :
    http://zoejoe.net/store/test/STE/
    Được sửa bởi zoejoe lúc 18:31 ngày 07-12-2008

  12. Thành viên Like bài viết này:


  13. #7
    Tham gia
    02-02-2004
    Bài viết
    309
    Like
    2
    Thanked 6 Times in 6 Posts
    Tớ run thử demo của cậu rồi nhưng ở trên IE thì vẫn chưa được như tớ mong muốn, với đoạn mã trên thì thẻ bbcode chỉ được chèn vào nếu như có 1 đoạn text được chọn, còn bình thường bấm button thì nó ko chèn gì cả tớ nghĩ cậu nên fix thêm chỗ đó cho hoàn thiện.

  14. Thành viên Like bài viết này:


  15. #8
    Tham gia
    01-01-2008
    Bài viết
    1,058
    Like
    5
    Thanked 15 Times in 11 Posts
    Quote Được gửi bởi Thanh duc View Post
    Tớ run thử demo của cậu rồi nhưng ở trên IE thì vẫn chưa được như tớ mong muốn, với đoạn mã trên thì thẻ bbcode chỉ được chèn vào nếu như có 1 đoạn text được chọn, còn bình thường bấm button thì nó ko chèn gì cả tớ nghĩ cậu nên fix thêm chỗ đó cho hoàn thiện.
    Với FF thì mình đã optimize lại như sau :
    PHP Code:
    try {
       var 
    pos obj.scrollTop;

       var 
    st obj.selectionStart;
       var 
    en obj.selectionEnd;

       var 
    before obj.value.substring(0,st);
       var 
    after obj.value.substring(en,obj.value.length);
       var 
    str obj.value.substring(st,en);
     
       var 
    result before tagO***91;num***93; + str tagE***91;num***93; + after;
       
    obj.value result;
      
       
    obj.setSelectionRange((st tagO***91;num***93;.length),(en tagO***91;num***93;.length));
     
       
    obj.scrollTop pos;
       } catch(
    e) { alert('Error : ' e); } 
    Còn với IE thì mình chịu, chẳng biết làm sao cả !?

  16. Thành viên Like bài viết này:


  17. #9
    Tham gia
    02-02-2004
    Bài viết
    309
    Like
    2
    Thanked 6 Times in 6 Posts
    Tớ đã viết lại 1 bộ editor khá đầy đủ và giải quyết vấn đề trên xem tại:
    http://demo.banmai.org/editor/

    Mục đích của bộ editor này nhằm phục vụ cho diễn đàn tớ đang viết dùng zend framework
    http://demo.banmai.org/html

  18. Thành viên Like bài viết này:


  19. #10
    Tham gia
    01-01-2008
    Bài viết
    1,058
    Like
    5
    Thanked 15 Times in 11 Posts
    Quote Được gửi bởi hyutars View Post
    Đoạn code ở IE không chạy được là phải

    Cái này khai báo trong if, còn trong else (phần IE) chưa được khai báo, thế mà lấy ra xài.
    PHP Code:
    var str document.selection.createRange().text
    Cái này là cái gì ?

  20. Thành viên Like bài viết này:


Trang 1 / 5 1234 ... LastLast

Bookmarks

Quy định

  • Bạn không thể tạo chủ đề mới
  • Bạn không thể trả lời bài viết
  • Bạn không thể gửi file đính kèm
  • Bạn không thể sửa bài viết của mình
  •