Advanced Comment Editor - Khung soạn thảo comment mới cho blogspot

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Như đã biết thì khung soạn thảo comment mà Blogger cung cấp cho bạn cực kì đơn giản. Vì quá đơn giản nên đôi khi gây ra chút khó khăn khi ta cần định dạng comment của mình theo ý muốn vì phải tự sử dụng các thẻ mà blogger cho phép dùng trong comment (<b><u><i>...).

Do đó mình đã viết widget tạo thêm 1 khung soạn thảo comment mới bên trên khung comment cura blogger, bổ sung thêm các button chức năng dùng để định dạng text, chèn ảnh, link...vào comment. Khi cần sử dụng thì ta chỉ cần sử dụng chuột click để định dạng và copy code được sinh ra và paste vào khung comment của blogger rồi Xuất bản nó.

Khung soạn thảo comment mới này đơn giản và giúp dễ dàng định dạng comment hơn đặc biệt là đối với những ai không thành thạo HTML.

Demo

Và bây giờ chúng ta bắt đầu nhé ^^

Đầu tiên bạn chèn đoạn code này vào trước thẻ ]]></b:skin>

a.button {display: inline-block;margin: 0;padding: 1px 10px;border: 1px  solid #C4C4C4;border-top-color: #E4E4E4;border-left-color:  #E4E4E4;color: #424242 !important;text-align: center;text-shadow: 0 -1px  0 white;text-decoration: none;-webkit-border-radius:  2px;-moz-border-radius: 2px;border-radius: 2px;background:  #EDEDED;background: -webkit-gradient( linear, left top, left bottom,  color-stop(.2, white), color-stop(1, #E5E5E5) );background:  -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );font:  12px/18px sans-serif;}
a.button:hover {text-decoration: none !important;;background:  #ccc;;background: -webkit-gradient(linear,left top,left  bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;background:  -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;}
#help-box div {display:none}

Chèn tiếp đoạn code này trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<link href='http://webdesignandsuch.com/posts/fancybox-youtube/fancybox/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/> 
<script src='http://ngoclb.comyr.com/_itdl/jquery.mousewheel-3.0.4.pack.js' type='text/javascript'></script> 
<script src='http://ngoclb.comyr.com/_itdl/jquery.fancybox-1.3.4.pack.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
// ****************************************************************************
// @name          Advanced Comment Editor for Blogger
// @author        Luong Bao Ngoc - http://itdl.blogspot.com
// @description   Adds some advanced editing options to help writing comments in Blogger
// ****************************************************************************
$.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based  
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      var selectionText = this.value.substring(startPos, endPos);
      myValue = myValue.replace('$', selectionText);
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  })
}
});

$(document).ready(function() { 
    $("a#btnFancybox").fancybox({
        'transitionIn'        : 'elastic',
        'transitionOut'        : 'none'
    });
});

function insert_URL() {
    var url = prompt("Nhập url trang","http://");
    var text = prompt("Nhập text hiển thị","[link]");
    if (url!=null && url!="" && text!=null && text!="")
     addText('<a href="'+url+'" rel="nofollow">'+text+'</a>');
    else
     alert("Vui lòng nhập đầy đủ thông tin yêu cầu !");
}

function insert_CODE() {
    var HTMLElement = document.getElementById("html");
    var reGT = />/gi;
    var reLT = /</gi;
    var reAMP = /&/gi;
    var reDQUOTE = /"/gi;
    var reQUOTE = /'/gi;
    var strXML = HTMLElement.value.replace(reAMP,"&amp;").replace(reLT,"&lt;").replace(reGT, "&gt;").replace(reDQUOTE,"&quot;").replace(reQUOTE,"&#039;");
    addText(strXML);    
}

var _0xf197=["\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x22\x66\x6C\x6F\x61\x74\x3A\x72\x69\x67\x68\x74\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x38\x30\x25\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x74\x65\x78\x74\x2D\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x3A\x6E\x6F\x6E\x65\x3B\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x69\x74\x64\x6C\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E\x41\x64\x76\x61\x6E\x63\x65\x64\x20\x43\x6F\x6D\x6D\x65\x6E\x74\x20\x45\x64\x69\x74\x6F\x72\x20\x66\x6F\x72\x20\x42\x6C\x6F\x67\x67\x65\x72\x3C\x2F\x61\x3E","\x61\x70\x70\x65\x6E\x64","\x23\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x5F\x66\x6F\x72\x6D","\x72\x65\x61\x64\x79","\x69\x6E\x73\x65\x72\x74\x41\x74\x43\x61\x72\x65\x74","\x74\x65\x78\x74\x61\x72\x65\x61","\x66\x69\x6E\x64"];$(document)[_0xf197[3]](function (){$(_0xf197[2])[_0xf197[1]](_0xf197[0]);} );function addText(_0xeb40x2){return $(_0xf197[2])[_0xf197[6]](_0xf197[5])[_0xf197[4]](_0xeb40x2);};
//]]></script>

Lưu ý :
- Dòng code màu đỏ để chèn jquery, nếu bạn đã sử dụng jquery có thể xóa dòng này đi để tránh xung đột, tuy nhiên phải chắc chắn rằng jquery được chèn trước đoạn code màu đen nhé.
- Nếu blog của bạn đang dùng hiệu ứng Fancybox thì có thể bỏ 3 dòng code màu xanh.

Vậy là xong phần code, tiếp theo là phần hiển thị khung soạn thảo comment mới

Bạn tìm đến đoạn <a name='comment-form'/> trong template và thay bằng đoạn code sau:

<a name='comment-form'/>
<!-- Khung soan thao comment moi -->
<DIV id='new_comments_form' style='margin:5px 0 0 0'>
<a class="button" href="javascript: void(0);" onClick="addText('&lt;b&gt;$&lt;/b&gt;');" title="Chữ đậm"><b>b</b></a>
<a class="button" href="javascript: void(0);" onClick="addText('&lt;i&gt;$&lt;/i&gt;');" title="Chữ nghiêng"><i>i</i></a>
<a class="button" href="javascript: void(0);" onClick="addText('&lt;u&gt;$&lt;/u&gt;');" title="Gạch chân"><u>u</u></a>
<a class="button" href="javascript: void(0);" onClick="insert_URL();" title="Chèn liên kết"><u><font color="blue">link</font></u></a>
<a id="btnFancybox" class="button" href="#html-code" title="Chèn mã HTML">code</a>
<div style="display: none;">
  <div id="html-code" style="width:380px;overflow:hidden;">
    <textarea id='html' name='html' onfocus='this.value=""' rows='12' style='width:100%;' type='text'>
Dán code cần mã hóa ở đây.</textarea>
    <p align="center"><a class="button" href="javascript: void(0);" onClick="insert_CODE();">Chèn</a></p>
  </div>
</div>
<a id="btnFancybox" class="button" href="#help-box" title="Giúp đỡ"><b><font color="red">Help ?</font></b></a>
<div style="display: none;">
  <div id="help-box" style="width:380px;overflow:hidden;">
    - Đây là khung soạn thảo mới hỗ trợ chèn biểu tượng cảm xúc, các kiểu chữ (đậm, nghiêng, gạch dưới) hoặc chèn link, code vào phản hồi của bạn<br />
    - Sau khi soạn thảo xong, hãy nhấn nút <b>Chọn</b> rồi copy <b><i>(Ctrl + C)</i></b> và paste <b><i>(Ctrl + V)</i></b> vào khung viết bình luận.<br />
    <span style="float:right;margin-top:3px;font-size:60%;">(c) 2011 <a href="http://itdl.blogspot.com" target="_blank">http://itdl.blogspot.com</a></span>
  </div>
</div>
<form name="comments_form" id="comments_form">
<textarea cols="70" rows="2" style="margin:5px;"></textarea>
<br />
<a class="button" href="javascript: void(0);" onclick="document.getElementById('comments_input').select();"><b>Chọn</b></a>
<a class="button" href="javascript: void(0);" onclick="document.comments_form.reset();">Xoá hết</a>
</form>
</DIV>
<!-- #Khung soan thao comment moi -->

Bạn lưu template lại rồi xem thử kết quả nhé

Trong đoạn code này mình chỉ thêm các button đậm, nghiêng, gạch chân, chèn link và chèn code. Các bạn có thể thêm các button khác nếu thấy thích. VD như chèn ảnh, chèn video từ youtube, chèn biểu tượng cảm xúc... Tuy nhiên bạn cần tham khảo thêm các script hỗ trợ hiển thị chúng trong comment, vì thật sự comment của blogger không cho phép sử dụng các thẻ HTML đặc biệt

itdl Blog - http://itdl.blogspot.com