Share BBCode chuẩn cho TWIG không lo lỗi thẻ

Upload Ảnh · Register wap4.co free

Tìm kiếm | Lượt xem: 491

Lê Văn Đức (Admin) [OFF]

Information Technology Việt Nam

Cách đây 11 tháng

BBCode sử dụng khá tiện ích trong các forum thậm chí là blog, demo như ITVN cũng sử dụng BBCode cho phép thành viên soạn thảo nhiều tính năng hơn. Tuy nhiên có một nhược điểm nếu code không cẩn thận rất dễ dính bug, các hacker có thể lợi dụng để phá web của chúng ta

Code này mình share cho các bạn sử dụng macro thay vì replace, đó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 = '
[co de]{?}[/co de] ==> <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 %}

{% macro bbcode(data) %}{% spaceless %} {% set data = data|escape %} {% set bbcode_type_1 = ('b|i|u|s') %} {% set bbcode_type_2 = ' [co de]{?}[/co de] ==> <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 %}

Chỗ nào muốn sử dụng BBCode thì dùng hàm:

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]
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é