Hướng dẫn viêt plugin cho bo-blog phần 2 (walk plugin)

Định quay tutorial nhưng chỗ mình ồn quá nên đành viết tut vậy.
Hôm nay chúng ta tiếp tục với bài hướng dẫn viết plugin cho bo-blog.
Bấm xem ảnh ở cửa sổ mới
Ở bài viết này mình xin giới thiệu đến các bạn loại plugin thứ 2 đó là walk, ở bài trước mình có nhắc đến 4 loại plugin đó là Get, Walk, Run, Page.

Bài số 2 này sẽ hướng dẫn các bạn làm 1 plugin loại walk và lần này là 1 plugin có tác dụng highlight code.

Bài viết khá dài. Gồm 3 phần chính như sau

1 - Thêm tự động các thẻ cần thiết vào header
2 - Thêm tự động các nút BBCODE vào phần editor
3 - Xử lý khi lấy nội dung ra ngoài

Mình đặt tên plugin là vietbb_highlighter vì vậy mình sẽ tạo 1 thư mục bo-blog/plugin/vietbb_highlighter.

Vẫn như thường lệ chúng ta cần có các file, setup.php, install.php, uninstall.php và 1 số file khác.

File setup.php



Mình chưa điền vào mục register bởi vì mình chưa nói qua về nó ở loại walk.

Ở plugin loại walk bo-blog cung cấp cho chúng ta 1 số thành phần sau

Firstheader  -  Tác động đến những thành phần ở header
Storecontent  -  Tác động đến việc lưu trữ bài viết
Ubbanalyse  -  Tác động đến việc tạo bbcode
Ubbanalyseadvance  -  Như Ubbanalyse nhưng được mở rộng hơn, mình cũng chưa rõ mở rộng hơn cái gì nhưng chỉ biết là thế.

Loại walk hoạt động như sau, khi bạn viết plugin loại này, bo-blog sẽ tự động include plugin của bạn sau đó sẽ chạy function

plugin_ten_plugin_run( tham số )


Với tham số truyền vào sẽ là phần header, nội dung bài viết, nội dung lưu trữ vv tùy vào phần các bạn đăng ký

Danh sách các tham số của những thành phần

Firstheader  -  tham số sẽ là các thành phần ở header như các thẻ meta javascript, style vv
Storecontent  -  Tham số các bạn truyền vào chính là nội dung bài viết vừa được viết
Ubbanalyse  -  Tham số các bạn truyền vào chính là nội dung bài viết được lấy ra từ cơ sở dữ liệu
Ubbanalyseadvance  -  Như Ubbanalyse nhưng được mở rộng hơn, mình cũng chưa rõ mở rộng hơn cái gì nhưng chỉ biết là thế.


Rồi quay lại với plugin, chúng ta cần phải có những thứ sau để có thể có high light code trên blog.

Mình sử dụng http://alexgorbatchev.com/SyntaxHighlighter/  để áp dụng cho blog

Xem qua hướng dẫn cài đặt thì có yêu cầu chúng ta như sau.

Đưa đoạn code này vào phần header của website


<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>


Vì thế để có thể tác động nên phần header mình sẽ khai báo với bo-blog là sẽ sử dụng thành phần

Firstheader

1 - Thêm tự động các thẻ cần thiết vào header




Sau khi khai báo thành phần này xong, bạn cần phải tạo file firstheader.php trong thư mục plugin

Mình đã tạo rồi

Bây giờ ta đi vào việc viết nội dung plugin.

Khi chạy plugin, bo-blog sẽ tự tìm đến các function có dạng

Plugin_tenPlugin_run($str)
hoặc
Plugin_tenPlugin_tenThanhPhan($str)

Mình khuyến khích dùng cách 2 bởi vì cách 1 mình đã làm và bị lỗi nếu như dùng nhiều thành phần, lỗi đó là trùng tên hàm.

Như vậy trong file[b][/b] firstheader.php ta cần có hàm



Tham số $str ở đây chính là phần header của bo-blog  bao gồm các thẻ meta..

Chúng ta sẽ viết tiếp cho function. Vì cần thêm 1 đoạn code vào header nên ta sẽ nối thêm vào tham số $str đoạn cần nối rồi trả về đoạn $str đã nối hoàn chỉnh.

Nói rất khó hiểu nhưng các bạn tưởng tượng như sau.

Giả sử mình có đoạn header của bo-blog là


<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://demo.vietboblog.net/inc/rsd.php" />
<script type="text/javascript" src="lang/vn/jslang.js?jsver=2.1.1.3626.3"></script>
<script type="text/javascript" src="images/js/ajax.js?jsver=2.1.1.3626.3"></script>
<script type="text/javascript" src="images/js/swfobject.js?jsver=2.1.1.3626.3"></script>


Thì khi gọi hàm




Biến $str chính là đoạn code trên. Khi hàm trả về bạn cần phải trả về đầy đủ nội dung của biến đã truyền vào nếu không sẽ bị mất đoạn code của bo-blog như thế blog sẽ bị lỗi.

Mình viết function như sau

function plugin_vietbb_highlighter_firstheader( $str )
{
  $str  .=  "<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>";

  return $str;
}



Như vậy khi chạy plugin sẽ tự động thêm vào phần dưới của header đoạn mã trên.

Như vậy đã xong phần header.

2 - Thêm tự động các nút BBCODE vào phần editor

Tiếp đến phần cũng quan trọng không kém đó là thêm thẻ UBB vào trình viết bài UBB editor của bo-blog.

Để thêm 1 nút BBcode chúng ta cần khai báo thêm thành phần ubbeditor

Như vậy file setup.php sẽ như sau.


  
Khi thêm thành phần ubbeditor các bạn cần phải tạo file ubbeditor.php trong thư mục plugin

Chúng ta sử dụng 2 biến


Mình đã có mẫu ở đây các bạn theo dõi và sử dụng luôn file ubbeditor.php rất dễ hiểu

<?php
global $plugin_ubbeditor_functions, $plugin_ubbeditor_buttons;
$plugin_ubbeditor_buttons.=<<<eot
<a href="JavaScript: void(0); "><img border="0" onclick="vietbb_phpcode()" title="" src="plugin/vietbb_highlighter/images/php.gif" ></a>
eot;
$plugin_ubbeditor_functions.=<<<eot
function vietbb_phpcode() {
  if (document.selection && document.selection.type == "Text") {
    var range = document.selection.createRange();
    range.text = "[vietbbphp]" + range.text + "[/vietbbphp]";
  } else if (is_firefox && noweditorid.selectionEnd) {
    txt=FxGetTxt ("[vietbbphp]", "[/vietbbphp]");
    return;
  } else {
    txt=prompt("Code php input","");
    if(txt!=null) {
      AddTxt="[vietbbphp]"+txt;
      AddText(AddTxt);
      AddTxt="[/vietbbphp]";
      AddText(AddTxt);
    }
  }
}
eot;
?>



Như vậy mình vừa thêm nút php với ảnh là php.gif. Và ở dưới có thêm function vietbb_phpcode chính là function mình gọi ở trên có tác dụng là bao quanh hoặc hiển thị hộp thoại nhập code php.


Như vậy chúng ta đã xong phần thêm bbcode. Còn 1 phần cuối là phần xử lý php code nữa là xong.

3 - Xử lý khi lấy nội dung ra ngoài
Mình sẽ khai báo sử dụng thêm 1 thành phần nữa để xử lý nội dung khi hiển thị bài viết bằng bbcode.

Thành phần ubbanalyse, và tạo luôn file ubbanalyse.php trong thư mục plugin

File setup.php sẽ có nội dung.



Nội dung file ubbanalyse.php

<?php
function plugin_vietbb_highlighter_ubbanalyse($str) {
  $str=preg_replace("/\s*\[vietbbphp\](.*?)\[\/vietbbphp\]\s*/ise", "vietbb_highlight('php', '\\1')", $str);
  return $str;
}


function vietbb_highlight($lang = 'php', $content) {
  
  $content  =  stripslashes($content);
  $content  =  str_replace("
", "\n", $content);
  $res  =  '<script type="syntaxhighlighter" class="brush: '.$lang.'"><![CDATA['.( $content ). ']]></script>';
  return $res;
}
?>



Khi chạy plugin thành phần ubbanalyse bo-blog sẽ gọi hàm
plugin_vietbb_highlighter_ubbanalyse


Tham số truyền vào chính là data lấy từ cơ sở dữ liệu.
Code thì các bạn tự tìm hiểu nhé.

Đoạn code trên có đoạn


<script type="syntaxhighlighter" class="brush: js"><![CDATA[
.....
]]></script>


Đoạn này là hướng dẫn highlight code của http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

Mình chỉ làm đúng như họ hướng dẫn, ko có gì đặc biệt cả.
Như vậy là đã xong giờ mình thử xem và setup lên boblog demo xem có chạy hay ko.

Tệp tin tải về
Tệp tin này chỉ tải được sau khi bạn đăng nhập. Hãy Đăng ký hoặc Đăng nhập

Viết nhận xét

Tên gọi

Địa chỉ web

Email

Mở HTML Mở UBB Mở hình vui Ẩn giấu Hãy nhớ [Đăng nhập] [Đăng ký]

 

© 2013 Powered By bo-blog,Develop By vietboblog.net. Author :

Process time
Scroll to top