CrexShortcodes

Mấy ngày gần tết việc “chính quy” cũng tạm gạt qua. Nhưng có vài thứ cứ lùng bùng trong đầu. Nên ngồi code cho nó dứt điểm. Cũng như để “thực tế” xác nhận vài logic mà mình được comment rằng “mắc công, chưa thể làm được lúc này v..v”

Plugin System Shortcodes:

Cái thứ nhất phải định nghĩa rõ nó trước khi thật sự code nó:

• định nghĩa gốc: Shortcodes là xử lý để convert các mã giả lập về mã html gốc.
• Mã BBCode được sử dụng như mã giả lập ở đây. Như vậy về nguyên tắc đầu vào phải là BBCode đúng format / pattern !

Do đó yếu tố quan trọng nhất của plugin này là nhận bbcode vào và convert về các html tương ứng. Như vậy có nghĩa là library để convert là điểm mấu chốt của plugin.

Lúc đầu mình xài nbbc.sourceforge.net. Thẳng thắng mà nói thời điểm đó đây là library ok nhất mình tìm được. Nhưng trong quá trình sử dụng thì nó đã bộc lộ rất nhiều điểm yếu và các hạn chế. Sau đó khi code CrexShortcodes mình đã chuyển qua xài library của WordPress có sẵn.

Khi có được library này thì coi như sản phẩm đã hoàn thành 80%. 20% còn lại là tạo ra các pattern bbcode để sử dụng ( sau đó sẽ convert sang html ). Phần này được tính như addon vì nó được chủ động thêm, bớt hoặc customize bởi users. Bản thân plugin không cần provide quá nhiều.

Sau khi xong core này về nguyên tắc sản phẩm đã xong. Vì bây giờ ta có thể input trực tiếp bbcode trong editor ( tham khảo document để biết các bbcode ), sau đó plugin sẽ đảm nhiệm việc convert. Nó cũng có nghĩa là sản phẩm đã ready to release.

Tuy nhiên trong quá trình sử dụng việc reference document có thể gây một số phiền toái cho users. Do đó plugin tiếp theo được phát triển nhằm bổ trợ cho phần core đã hoàn tất để giúp users thuận tiện hơn.

Plugin Editor-Xtd Shortcodes:

Một lần nữa rõ ràng một điều rằng plugin này mang tính chất bổ trợ ( hỗ trợ ) chứ nó không mang tính quyết định cốt lõi. Tuy nhiên dưới một số cách nhìn khác thì nó lại mang tính cốt lại do đó vô hình chung đã đặt sai trọng tâm sản phẩm và dẫn đến rất nhiều hệ lụy:

• System plugin lệ thuộc vào button plugin. Do đặt trong tâm vào button plugin do đó các pattern bbcode đúng ra quy định bởi system plugin nay lại giao quyền cho button plugin.

ở sản phẩm trước đó, mình không tham gia nhiều vào button plugin này và expected nó sẽ được developed theo đúng nguyên tắc: nó là slave. Tuy nhiên đáng tiếc do yếu tố trọng tâm bị đặt lệch trước nên nó đã thành master.

Tuy nhiên nó chưa phải là điều trouble đáng nói. điều troubles ở đây là ( cũng là hệ lụy của việc đặt sai trọng tâm ) là đã được developed sai:

• Nếu nó là salve thì nó phải generate theo pattern quy định bởi system plugin.
• Xử lý các code chia nhỏ xuống để phân bổ và tái sự dụng.
• Xử lý code như một core xử lý, mọi thứ khác được mở rộng bởi users.

Crex Shortcodes mình đã khắc phục được các yếu tố này

• System plugin hoạt động độc lập
  • Các attributes được định nghĩa là các properties bắt buộc phải có ( nhưng có thể không cần user input vào ) được provide default sẵn
  • Các fields được định nghĩa là các html fields hỗ trợ cho button plugin khi cần render các field cho user input ( và sau đó được dùng như attributes )
  • Các shortcodes có thể linh động thêm bớt vào
    • Thông qua việc override json file hoặc sử dụng local.json
    • Bổ sung html để xử lý dùng cho việc convert từ bbode sang
    • Hỗ trợ việc init các bbcode bằng các class riêng
  • Mình loại trừ yếu tố các property name hay tag name là dài hay ngắn. Điều này users ( người trực tiếp dùng ) có thể tự quyết định bằng việc update json theo ý họ. Như vậy nhằm đảm bảo các properties, tags được define đúng và đầy đủ nhất.
• Button plugin hoạt động như một salve của system plugin
  • Tiếp nhận list shortcodes từ system plugin
  • Render toàn bộ lên html
  • Toàn bộ các form được generate tự động thông qua định nghĩa fields của json
  • Các fields được define theo riêng biệt theo từng yêu cầu sử dụng. Và hoàn toàn có thể thêm bớt. Các “yếu tố phức tạp” của fields qua đó đã được giải quyết.

Và thế là ta có sản phẩm hoàn chỉnh chỉ với 1-2 ngày xây dựng core. Các addons bổ sung có thể tùy theo yêu cầu của users và linh hoạt thêm vào, và tuyệt nhiên không ảnh hưởng hay phải xử lý core !

Bản thân bài viết này cũng sử dụng chính plugin để write down

[crexsc_syntaxhighlighter type=”shBrushJScript”]”crexsc_bs2_grid”: { “name”: “Grid”, “group”: “Scaffolding”, “icon”: “fa fa-bars”, “subTag”: { “crexsc_bs2_column”: { “attributes”: { “class”: “span12” }, “fields”: [ { “label”: “Width”, “type”: “text”, “name”: “class”, “value”: “span12” }, { “label”: “Offset”, “type”: “text”, “name”: “offset”, “value”: “” }, { “label”: “Content”, “type”: “textbox”, “name”: “maincontent”, “value”: “Enter your column content” } ] } }, “attributes”: { “class”: “row” }, “fields”: [ ] }[/crexsc_syntaxhighlighter]

đây là json định nghĩa cho 1 short code

• đầu tiên định nghĩa tag được sử dụng
• sau đó là name và group để hiển thị ở list thông qua button plugin và các properties hỗ trợ
• subTag là các tag con nằm trong tag parent. Nó cũng được hiểu đồng nghĩa như 1 shortcode thật sự với các properties
  • attributes: Các properties sẽ được dùng trong HTML khi convert dù có hay không input bởi user
  • fields: Các field sẽ render lên form để user input. Các fields có type và được developed độc lập