Thêm BBcode cho công cụ viết bài mới

[hunghsmn]

Căn cứ vào chia sẻ của Markchan trong bài này http://diendan.chinhphuc.info/t14359-topic#92768, bước đầu mình đã thử nghiệm thành công việc bổ sung thêm BBcode cho công cụ viết bài như sau:

Các bạn để ý 3 button mới thêm được đánh dấu 1,2,3 trong hình trên.

Button 1: dùng để chèn ảnh góc trên trái bài viết (tức là phần văn bản sẽ bọc ở bên phải và bên dưới ảnh). Chỉ cần dán link ảnh trực tiếp vào hộp soạn thảo, bôi đen link ảnh mới dán, bấm button1 là xong. Bây giờ cứ viết bài thoải mái, bài viết tự nhiên sẽ bọc ảnh như nói trên.

Button 2 và 3: Cả 2 button này dùng để chia văn bản thành 2 cột.
Cách thực hiện: Cứ việc viết văn bản thỏa mái. Sau khi viết xong, bôi đen phần trên, bấm button 2. Bôi đen tiếp phần còn lại, bấm button 3. Vậy là xong, văn bản sẽ được chia 2 cột.

Code posting_body:
Đây là code mặt định của nút B ( Chữ đậm), mình viết ra để tiện cho việc so sánh:

Code:

<button class="button2" onclick="bbstyle(0)" onmouseover="helpline('b')" type="button" id="addbbcode0" accesskey="b" title="{L_BBCODE_B}"><img src="{PATH_IMG_FA}wysiwyg/text_bold.png" alt="{L_BBCODE_B}" /></button> 


Còn đây là 3 nút mình mới bổ sung:
(Khác với chia sẻ của Mảkchan, mình không có CSS gì hết chỉ cần dàn đoạn codenầy vào posting là có 3 nút như hình)

Code:

<button class="button2" onclick="bbfontstyle('[table align=left cellpadding= 10 cellspacing= 5][tr][td][img]','[/img][/td][/tr][/table]');return false" type="button"><img src="http://i66.servimg.com/u/f66/14/26/60/46/n110.gif" alt="Chèn ảnh" /></button>

<button class="button2" onclick="bbfontstyle('[table width= 100% align=left cellpadding= 10 cellspacing= 5][tr][td width= 50%]','[/td]');return false" type="button"><img src="http://i66.servimg.com/u/f66/14/26/60/46/n210.gif" alt="Cột trái"/></button>

<button class="button2" onclick="bbfontstyle('[td width= 50%]','[/td][/tr][/table]');return false" type="button">
<img src="http://i66.servimg.com/u/f66/14/26/60/46/n2a10.gif" alt="Cột phải"/></button>

Để xuất hiện các button tại vị trí như trong hình trên, mình chèn code vào trong posting_body ở đây:

Code:

      <button class="{BUTTON_WYSI_STYLE}" id="text_editor_cmd_switchmode" type="button"><img src="{PATH_IMG_FA}i/switch_wysiwyg.gif" alt="{SWITCH_EDITOR_MODE}" /></button> 
CHÈN VÀO ĐÂY
   </div>

Giải thích:
Các bạn để ý đoạn này, đây chính là những gì các bạn sẽ viết cho button của bạn.

Code:

('[table align=left cellpadding= 10 cellspacing= 5][tr][td][img]','[/img][/td][/tr][/table]')

- Các bạn để ý đoạn trong code trên chính là giá trị gán cho lệnh onclik. Trong đoạn này có 2 vế cách nhau bởi dấu phảy (,) và đặt trong dấu nháy đơn ('). Vị trí của dấu phảy chính là nơi hiển thị của đoạn văn bản trong hộp soạn thảo mà ta bôi đen trước khi bấm nút. Như vậy các bạn có thể viết bất cứ gì thay cho đoạn code trên . Chỉ cần các bạn biết một chút về cú pháp của BBcode là các bạn sẽ viết được bất cứ thứ gì các bạn muốn cho button mới của các bạn.

- Ở đây mình đã bỏ onmouseover và accesskey (onmouseover không biết tác dụng gì bỏ thấy không sao, accesskey thì không cần , dùng chuột bấm cũng được, đặt lung tung không khéo trùng của mặc định gây lỗi)

Những hạn chế rất quan trọng trong kiến thức của mình:
- Rất may là Các tham số trong BBcode rất dễ chịu, không cần để giá trị của nó trong dấu nháy đơn, nháy kép, các trình duyệt vẫn nhận được (Mình đã thử với FF và IE). Nếu là htmlcode thì điều này không được.

- Giá như mình biết viết <script> thì hay biết mấy, chỉ cấn khai báo một biến rồi gán gia trị cho biến đó là được. Viết trực tiếp giá trị đó vào trong lệnh onclick như mình đã làm thì rất dễ lỗi. Điều này hy vọng các pro ra tay mới được.

Những gì làm được và chưa được mình đã nói hết rồi. Bây giờ là phần các bạn. Mình mò tiếp đây.

[blogkien]

Póc tem pác này đã rồi thử sau rồi viết cảm nhận sau về một thiên tài hihihi.

Thanks trước nha!

[kushyisgod]

thật tuyệt đấy

[ZerO kIng]

Hay,
thẻ random là thẻ gì vậy [rand]da[/rand]

[hunghsmn]

Hay,
thẻ random là thẻ gì vậy [rand]da[/rand]

Chịu, không biết thể này. Chữ này là ngẫu nhiên, nhưng mà ngẫu nhiên cái gì ?
[rand]À thấy rồi. Thử thì biết mà [/rand]
Hĩ, không biết sử dụng thẻ này

[hunghsmn]

Mình thật sự không ngờ là mình có thể đóng khung bài viết chỉ bằng một cú click chuột.
Các bạn chèn code sau đây vào vị trí như mình đã nói ở trên trong posting_body, Sau đó giả vờ vào sửa chữa một bài nào đó. Các bạn bôi đen chon một đoạn hay cả bài rồi bấm cái nút mới làm , xong bấm xem thử hay lưu luôn cũng được. Hay thật các bạn à

Code:

<button class="button2" onclick="bbfontstyle('[table style=width: auto; border=0 cellpadding=0 cellspacing=0][tr][td style=padding: 0px;][img]http://i609.photobucket.com/albums/tt175/hunghsmn/Tim2.gif[/img][/td][td style=padding: 0px; background=http://i609.photobucket.com/albums/tt175/hunghsmn/Tim2.gif][/td][td style=padding: 0px;][img]http://i609.photobucket.com/albums/tt175/hunghsmn/Tim2.gif[/img][/td][/tr][tr][td style=padding: 0px; background=http://i609.photobucket.com/albums/tt175/hunghsmn/Tim2.gif valign=top] [/td][td bgcolor=#ffffff]','[/td][td style=padding: 0px; background=http://i609.photobucket.com/albums/tt175/hunghsmn/Tim2.gif][/td][/tr][tr][td style=padding: 0px;][img]http://i609.photobucket.com/albums/tt175/hunghsmn/Tim2.gif[/img][/td][td background=http://i609.photobucket.com/albums/tt175/hunghsmn/Tim2.gif][/td][td][img]http://i609.photobucket.com/albums/tt175/hunghsmn/Tim2.gif[/img][/td][/tr][/table] ');return false" type="button">
<img src="http://i66.servimg.com/u/f66/14/26/60/46/n2a10.gif" alt="Cột phải"/></button>

Mình sẽ làm một menu đổ xuống giống như nút Others hay nút chọn màu, nhưng mỗi menu là một khung khác nhau. CHắc chắn 100% là mình làm được. Còn trên đây để các bạn xem thử thôi. Một lần nữa mình cám ơn bạn Markchan đã mở đầu cho việc bổ sung BBcode này.

[MarkChan]

nhưng nhược điểm của cái này là chú phải để mở chế độ A/a và nếu dùng đến html thì phải mở cả html ai khắc phục được 2 nhược điểm này thì hay quá

[baivong]

Nhược điểm lớn nhất của cái này là Postting_body không đủ lớn để chèn nhiều code khung.
Bên C3z đã làm được cái này rồi, thử xem ViệtK có share ko thôi (chứ cháu cướp lâu rồi )

[baivong]

nhưng nhược điểm của cái này là chú phải để mở chế độ A/a và nếu dùng đến html thì phải mở cả html ai khắc phục được 2 nhược điểm này thì hay quá

Thay vì dùng thẻ Div trong có thể dùng thẻ table trong BBcode (giống như bài của chinhphuc trên Hep FM), vậy thì ko cần bật HTML .

[hunghsmn]

- Chuyện bật html thì mình không bao giờ bật, và mình cũng khuyên mọi người không nên bật html. Vì điều này nều gặp thành viên xấu và giỏi thì chẳng hay ho chút nào( điều này mình đã đọc trong một bài hướng dẫn trong khi học thiết kế forum bằng VBB). Với lại mình cũng thấy đâu cần đến html, với BBcode cũng quá đủ để trang trí cho một bài viết rồi. Có bạn tưởng để trang trí một bài báo như mình thì cần html nhưng thực tế mình đâu cần.

- Đóng a/A thì đúng là không thể sử dụng các nút này nhưng điều này không quan trọng vì khi cần dùng các nút này thì mở, chỉ một cái click chuột vào a/A thì mất công gì ? Mà mình cũng chưa bao giờ đóng a/A để viết bài. Các bạn thấy đấy, của mình không còn bóng dáng gì của bài do Markchan chia sẻ nữa ( Mình chỉ học ở đó mỗi cái dấu phảy (,) giữ 2 đoạn text mà thô i- điều tuyệt nhất là ở dấu phảy này đây), mình cũng bỏ luôn cả onmouseover (cái mà nhờ nó vk mới phát hiện ra là sản phẩm của bạn ấy) mình cũng không dùng đến đoạn CSS nào cả, và giá trị gán cho lệnh Onklick của mình là cả một đoạn BBcode dài (có thể nói là muốn dài bao nhiêu cũng được) chứ không phải một đoạn ngắn mấy thẻ <div> htm đól. Mình tự đánh giá đây chính là ưu điểm lớn nhất của mình chứ không phải là hạn chế.

- Chuyện của C3z mình không biết, mình rất ít khi đi dạo các forum. Admin ở đó giỏi và những gì có giá trị thường không chia sẻ. Nhưng mình thì khác. Mình già rồi giữ làm gì, nghiên cứu vừa thành công, chưa kịp ứng dụng cho mình thì mình đã chia sẻ rồi.

- Nhân tiện kể thêm cho các bạn chuyện gán giá trị cho lệnh onklick, có một số bạn đã biết rồi. Cách đây khoảng 16 - 17 năm rồi, lúc đó mình không biết gì về internet, nhưng mình lại dùng visual basic để thiết kế một phần mềm chuyên dùng để thiết kế web. Phần mềm đó bây giờ mình vẫn đang dùng trong suốt quá trình làm forum này. Tiết là phần mềm đó mình lại viết bằng font ABC nên bây giờ phần soạn thảo văn bản không dùng được, nhưng phần lấy code thì mình vẫn dùng.
Ví dụ :
- để tạo trang html mới mình chỉ bấm một cái là ra hết các thẻ html, meta, title, style, body... mà mình đã gán sẵn cho một nút.
- để lấy mã màu: mặc dù hiện nay có nhiều phần mềm nhỏ gọn, nhưng mình vẫn dùng cái do mình viết chung vào đây, chỉ bấm một cái, chọn màu, bấm cái nữa là có code
- để có được các code html khác như tạo table, frame, Input, marquee... mình cũng chỉ click, click và click là có code mà mình đã gán sẵn cho các nút. Mình chỉ việc copy và dán vào forum thôi.
Từ khi bắt đầu lập forum mình cũng ước mơ được click thỏa mái nhử thế này trong khi viết bài, nhưng mãi tới nay nhờ cái dấu phảy (,) này mình mới thực hiện được . Có thể các bạn chưa hiểu hết nhưng mình rất mừng đó.

[baivong]

Kết hợp bài này với ý tưởng của bác thì sao?
http://help.forumotion.com/t87870-notice-using-css-and-table
P/s: Cảm giác khi thực hiện được 1 đoạn code mới khá thú vị, tự nhiên nghĩ vẩn vơ 1 ý tưởng, rồi ý tưởng lạ lùng ấy đã tìm được phương pháp giải quyết trong vốn kiến thức hạn hẹp của mình.

[[D]ark[R]aven]

Thẻ Rand hình như có đọc ở đâu nó hướng dẫn là random hình =.='

[Việt]

- Chuyện của C3z mình không biết, mình rất ít khi đi dạo các forum. Admin ở đó giỏi và những gì có giá trị thường không chia sẻ. Nhưng mình thì khác. Mình già rồi giữ làm gì, nghiên cứu vừa thành công, chưa kịp ứng dụng cho mình thì mình đã chia sẻ rồi.

mình ích kỉ ghê hê hê

Thẻ Rand hình như có đọc ở đâu nó hướng dẫn là random hình =.='

Lấy số ngẫu nhiên giữa 1 khoảng:

Code:

[rand]50,100[/rand]

Random number (50,100) : 85

hoặc từ 1 đến số tối đa

Code:

[rand]50[/rand]

Random number (1,50) : 30

[hunghsmn]

Hix, mình đã gặp phải vấn đề rồi: posting_body có số lượng ký tự hạn chế, mới thêm vài nút nữa là hết chỗ. Thôi được thêm nút nào hay nút đó. rồi tìm cách khắc phụ diểm yếu này sau.
@ battuvuong: Bài đó không phải, đó chỉ là bài hướng dẫn mình viết văn bản vào trong một table mà thôi. CSS chỉ để làm đẹp cho bài viết.
@ : À thì ra C3z là của cháu. Vậy thì có gì hay chia sẻ đi, không thì Markchan nó vào ăn cắp nứa đấy .

Mình vẫn thích kiểu bôi đen rồi bấm nút này. Từ tự học script sau

[baivong]

Thế này thì sao ạ?

Code:

('[table class="cpinfo"][tr][td]','
[/td][/tr][/table]')

[hunghsmn]

Nếu muốn một nút như vậy thì đơn giản mà. Nó chỉ có mỗi chữ class="cpinfo" thôi. mà chữ này không cần. Còn lại đã có nút Insert table rồi

[baivong]

So vo*i' y' tu*o*ng? cua? pac' la` tu*o*ng tu*. ma`

[hunghsmn]

So vo*i' y' tu*o*ng? cua? pac' la` tu*o*ng tu*. ma`

Viết lại cho bác coi . Bác chỉ luận có mấy chữ: So với ý ... của bác là .... mà.

[baivong]

SO với ý của bác thì là tương tự mà?

[hunghsmn]

SO với ý của bác thì là tương tự mà?

Đúng vậy. Chú nói là code đó của FM là không cần vì giống i chang Insert a table nó chỉ thêm CSS để làm đẹp thôi, ngoài ra không có gì mới hết.

[baivong]

Code của chú cũng là làm phức tạp table thôi mà.
Nếu áp dụng thêm phần kiểm duyệt từ có thể làm nó ngắn gọn hơn đấy.

[hunghsmn]

Nhược điểm lớn nhất của cái này là Postting_body không đủ lớn để chèn nhiều code khung.
Bên C3z đã làm được cái này rồi, thử xem ViệtK có share ko thôi (chứ cháu cướp lâu rồi )

Rất chính xác. Đã thử thêm vài nút nữa là bị liền.

Code của chú cũng là làm phức tạp table thôi mà.
Nếu áp dụng thêm phần kiểm duyệt từ có thể làm nó ngắn gọn hơn đấy.

Kiểm duyệt từ: ý này cũng được đấy để nghiên cứu sau.
Nhưng trước mắt các bạn nào dùng thì đừng để ý đến code, chỉ lấy dùng thôi. Tự viết cái khác thì được chứ sửa không nổi đâu. Chỉ bấm lên là dùng thôi, còn nó ra thứ gì mặc nó. Đến ngay như mình sau khi làm xong cũng nhìn không ra cú pháp nữa là.

[baivong]

Bác xem thử hàng của con Vịt nè http://www.c3zone.net/t3213-topic
Nhìn cũng ngon chứ nhỉ?

[hunghsmn]

Bác xem thử hàng của con Vịt nè http://www.c3zone.net/t3213-topic
Nhìn cũng ngon chứ nhỉ?

Thèm quá đi, để từ từ rồi bạn ấy cho.

[Việt]

Nguồn style

Code:

http://geeklu.com/2009/01/wp-note/

[myxl218]

Cho mình hỏi? để thêm 1 button là công thức toán học, khi click vào thì nó sẽ ra trang web của latex thì làm như thế nào vậy?

[hunghsmn]

@ myxl218: Click vào thì nó ra cái gì ? thử viết lên đây những thứ mà khi cilk thì được như vậy. Viết chính xác nhé. Mình không biết công thức toán học hay "trang web của latex" như thế nào nên không biết có gán vào button được hay không .

[myxl218]

ví dụ như thế này: khi click vào button này trên thanh công cụ thì nó hiện ra trang web này:http://www.codecogs.com/latex/eqneditor.php để thành viên soạn công thức toán học! mong bác Hùng và mọi người giúp!

[myxl218]

Help!

[hunghsmn]

	- Bạn vào forum mình Code: http://www.trekhuyettat.org/forum - Đăng nhập với nick name: linhlinh pass: @hsmn6975 xem thử nếu thấy được thì cho biết ý kiến để mình post code lên. Ghi chú: Forum mình vốn không có button này mình mới bổ sung trong quá trình thử nghiệm để chỉ bạn Mình không biết dùng cái này để làm gì, vậy bạn xem xong rồi thì nói để mình xóa nó đi nhé.

[Sponsored content]