FreeTime
Đăng nhập | Đăng ký
Share bbcode chuẩn cho twig
+ / Lập trình Web / TWIG
admin * admin [Off]
*420 * 115
3 năm trước#1

Share bbcode chuẩn cho twig

Đây là function bbcode bằng twg do mình lên ý tưởng và viết ra. Thấy dùng ổn định nên quyết định mang share cho mọi người sử dụng.
Một số bạn hỏi vì sao không dùng replace cho nhẹ? Vì nếu dùng replace thì mở ngoặc và đóng ngoặc sai sẽ dẫn tới lỗi các thẻ, làm forum thì khách đăng bài, lỗi thẻ sẽ rất bất tiện nhé.
Ưu điểm của code là đóng mở thẻ chuẩn, không gây lỗi. Muốn thêm 1 mã bbcode khác thì không cần kiến thức về twig hay phải suy nghĩ đau đầu, chỉ cần viết 1 hàng html là ok.

Tạo file /bbcode.twig
{% macro bbcode(data) %}{% spaceless %} 
{% set data = data|escape %}
{% set bbcode_type_1 = ('b|i|u|s') %}
{% set bbcode_type_2 = '
[code]{?}[/code] ==> <pre contenteditable="true">{?}</pre>
[text]{?}[/text] ==> <textarea>{?}</textarea>
[tag]{?}[/tag] ==> <code>{?}</code>
[red]{?}[/red] ==> <span style="color:red">{?}</span>
[blue]{?}[/blue] ==> <span style="color:blue">{?}</span>
[green]{?}[/green] ==> <span style="color:green">{?}</span>
[img]{?}[/img] ==> <img src="{?}" alt="Hình ảnh minh họa" />
[center]{?}[/center] ==> <div style="text-align:center;">{?}</div>
[left]{?}[/left] ==> <div style="text-align:left;">{?}</div>
[right]{?}[/right] ==> <div style="text-align:right;">{?}</div>
' %}
{% set bbcode_type_3 = '
[color={?}]{?}[/color] ==> <span style="color:{?};">{?}</span>
[url={?}]{?}[/url] ==> <a href="{?}">{?}</a>
[quote={?}]{?}[/quote] ==> <div class="quote"> <p>{?}</p> <p>{?}</p> </div>
' %}
{% set tag = bbcode_type_1|trim|split('|') %}
{% for i in tag|keys %}
{% set tag1 = data|split('['~tag[i]~']') %}
{% for u in tag1|keys %}
{% set cn = tag1[u]|split('[/'~tag[i]~']')|first %}
{% set data = data|replace({ ('['~tag[i]~']'~cn~'[/'~tag[i]~']\r\n'):('<'~tag[i]~'>'~cn~'</'~tag[i]~'> [br] ') }) %}
{% set data = data|replace({ ('['~tag[i]~']'~cn~'[/'~tag[i]~']'):('<'~tag[i]~'>'~cn~'</'~tag[i]~'> ') }) %}
{% endfor %}
{% endfor %}
{% set tag = bbcode_type_2|split('\n')%}
{% for i in tag|keys %}
{% set tag1 = tag[i]|split('==>')|first|trim %}{% set mtag1 = tag1|split('{?}') %}
{% set tag2 = tag[i]|split('==>')|last|trim %}{% set mtag2 = tag2|split('{?}') %}
{% set ttag = data|split(mtag1[0]) %}
{% for u in ttag|keys %}
{% set cn = ttag[u]|split(mtag1[1])|first %}
{% set data = data|replace({ (mtag1[0]~cn~mtag1[1]~'\r\n'):(mtag2[0]~cn~mtag2[1]~'[br]') }) %}
{% set data = data|replace({ (mtag1[0]~cn~mtag1[1]):(mtag2[0]~cn~mtag2[1]) }) %}
{% endfor %}
{% endfor %}
{% set tag = bbcode_type_3|split('\n') %}
{% for i in tag|keys %}
{% set tag1 = tag[i]|split('==>')|first|trim %}{% set mtag1 = tag1|split('{?}') %}
{% set tag2 = tag[i]|split('==>')|last|trim %}{% set mtag2 = tag2|split('{?}') %}
{% set ttag = data|split(mtag1[0]) %}
{% for u in ttag|keys %}
{% set cn1 = ttag[u]|split(mtag1[1])|first %}
{% set cn2 = ttag[u]|split(cn1~mtag1[1])|last|split(mtag1[2])|first %}
{% set data = data|replace({ (mtag1[0]~cn1~mtag1[1]~cn2~mtag1[2]~'\r\n'):(mtag2[0]~cn1~mtag2[1]~cn2~mtag2[2]~' [br]') }) %}
{% set data = data|replace({ (mtag1[0]~cn1~mtag1[1]~cn2~mtag1[2]):(mtag2[0]~cn1~mtag2[1]~cn2~mtag2[2]) }) %}
{% endfor %}
{% endfor %}
{{data|replace({'[br]':'<br />'})|raw}}
{% endspaceless %}{% endmacro %}


Tiếp theo là ở vị trí muốn dùng bbcode này, ngay đầu file đó (ví dụ: /index )
{% import 'bbcode.twig' as md %}

Ở dưới đoạn này bạn muốn dùng bbcode thì chỉ cần
 {{md.bbcode('Nội dung muốn hiển thị bbcode')}}

Cái đoạn Nội dung đó có thể là biến.

Hướng dẫn cách mod thêm bbcode mới
Trong đoạn function ở /bbcode.twig các bạn có thể thấy 3 loại bbcode tiêu biểu mà mình đã làm cho nó thành 3 dạng dễ áp dụng nhất.
Dạng 1: Các thẻ đơn giản [i] [b] ...
Dạng 2: Các thẻ phức tạp hơn một xí (có một nội dung xử lý) [img]link-anh[/img]
Dạng 3: Các thẻ phức tạp. (có 2 nội dung cần xử lý) .. [color=red]nội dung[/color]

{% set bbcode_type_1 = ('b|i|u|s') %}
{% set bbcode_type_2 = '
[code]{?}[/code] ==> <pre contenteditable="true">{?}</pre>
[text]{?}[/text] ==> <textarea>{?}</textarea>
[tag]{?}[/tag] ==> <code>{?}</code>
[red]{?}[/red] ==> <span style="color:red">{?}</span>
[blue]{?}[/blue] ==> <span style="color:blue">{?}</span>
[green]{?}[/green] ==> <span style="color:green">{?}</span>
[img]{?}[/img] ==> <img src="{?}" alt="Hình ảnh minh họa" />
[center]{?}[/center] ==> <div style="text-align:center;">{?}</div>
[left]{?}[/left] ==> <div style="text-align:left;">{?}</div>
[right]{?}[/right] ==> <div style="text-align:right;">{?}</div>
' %}
{% set bbcode_type_3 = '
[color={?}]{?}[/color] ==> <span style="color:{?};">{?}</span>
[url={?}]{?}[/url] ==> <a href="{?}">{?}</a>
[quote={?}]{?}[/quote] ==> <div class="quote"> <p>{?}</p> <p>{?}</p> </div>
' %}


Các bạn chỉ cần xác định được dạng bbcode bạn muốn thêm vào là gì thì có thể viết thành đoạn html như trên.. rồi thêm vào là nó tự động làm tất cả. Nếu một số bạn cảm thấy chưa hài lòng về 3 loại code trên thì có thể ra tay viết thêm một loại mới (bbcode_type_4 chẳng hạn) rồi share cho ae cùng dùng nhé :)

Lưu ý: các dấu {?} là mặc định rồi đừng nên chỉnh sửa lại nhé.

Code được viết bởi Mrducz95! Hi vọng giữ nguồn :v
admin đã chỉnh sửa, 3 năm trước [4]

6 @ mark, nhoktapyeu, khanh, godlike, hoangkha, ntk

ntk * ntk [Off]
*17 * 3
3 năm trước#2
Cái bbcode hôm trước a viết cho e khó hiểu quá. Anh vd cho e cái bbcode img với
admin * admin [Off]
*420 * 115
3 năm trước#3

ntk

Cái bbcode hôm trước a viết cho e khó hiểu quá. Anh vd cho e cái bbcode img với

cái này áp dụng được tất cả. kể cả quote e nhé :D
admin * admin [Off]
*420 * 115
3 năm trước#4
xem code này đi mấy chế :v
@ntk@khanh@quockun@nhoktapyeu

1 @ nhoktapyeu

ntk * ntk [Off]
*17 * 3
3 năm trước#5

admin

xem code này đi mấy chế :v
@ntk@khanh@quockun@nhoktapyeu

cái này có vẻ thân thiện với mấy new mem như e. Dễ hiểu hơn tiax. Thank a
admin * admin [Off]
*420 * 115
3 năm trước#6

ntk

cái này có vẻ thân thiện với mấy new mem như e. Dễ hiểu hơn tiax. Thank a

uh e. A làm cho tất cả mọi người có thể mod đc mà :D
ntk * ntk [Off]
*17 * 3
3 năm trước#7

admin

uh e. A làm cho tất cả mọi người có thể mod đc mà :D

em khó áp dụng với wap quá a ơi. Dùng code chatt của tiax nên file bbcode.twig ấy có smile và nd chat lun. A giúp e với
khanh * khanh [Off]
*46 * 18
3 năm trước#8
Goodjob ... Có nhiều hàm tui vẫn chưa biết . spaceless , escape v.v :v

1 @ admin

nhoktapyeu * nhoktapyeu [Off]
*88 * 36
3 năm trước#9
Code không liên quan tới data mà thánh chém Pichu phán là code này lỗi bảo mật ợ :D
Nói mãi mà không nghe, ai qua tiaxgame.tk thông cho em nó hiểu đi ạ :D

1 @ admin

tuankill * tuankill [Off]
*14 * 2
3 năm trước#10

admin

uh e. A làm cho tất cả mọi người có thể mod đc mà :D

cái tag @admin làm như thế nào vậy ạ.
12
Hãy đăng nhập để trả lời bài viết này nhé!
Cùng chuyên mục
0 thành viên | 1 khách
1 khách đang trực tuyến.
Copyright © 2016
Author @Mrducz95