Jump to content
IPSViet.com

Sign in to follow this  
Bim

Quản lý và tùy chỉnh thanh công cụ của Editor

Recommended Posts

IPS sử dụng trình soạn thảo CKEditor hỗ trợ WYSIWYG (What you see is what you get), cho phép ta có thể thấy ngay những thay đổi trong khi viết bài nhằm tiết kiệm thời gian chỉnh sửa các lỗi hay những điểm không ưng ý một cách dễ dàng và nhanh chóng. Ở các phiên bản 3x, chúng ta có thể tạo BBCode/Media tags, nhưng qua IPS4 đã bỏ BBCode, chúng ta sẽ có thể dùng plugin của CKEditor hoặc HTML để add button. Bài viết này sẽ hướng dẫn các bạn cách quản lý và sử dụng Editor hiệu quả nhất.

Tùy chỉnh thanh công cụ

Trước tiên hãy truy cập vào ACP > Customization -> Editor > Toolbars. Tại đây bạn có thể tùy chỉnh thanh công cụ của Editor rất linh hoạt bằng cách kéo thả để sắp xếp hoặc xóa một button. Buttons not on editor là những buttons chưa được thêm vào Editor. Nắm và kéo lên trên để thêm.

ips4Editor_1.thumb.png.b6c7a657882903eff

3 tabs: Large, Medium, Small là kích thước của Editor, dùng kỹ thuật responsive để có thể xem tốt trên mọi thiết bị. 

  • Large = Desktop
  • Medium = Tablet/Small Desktop
  • Small = Phone

Bạn nhìn thấy thế nào thì ở giao diện sử dụng sẽ như vậy. 

Ngoài ra còn có 2 nút màu xanh bên trên:

  • Add Separator: Thêm gạch phân cách
  • Add Toobar: Thêm hàng 

Để khôi phục mặc định thì bấm nút  Restore Default Configuration

Thiết lập quyền sử dụng và vùng hiển thị: 

Chỉ cần bấm trực tiếp vào button sẽ có thể chỉnh được phân quyền cho nhóm thành viên và khu vực hiển thị:

ips4editor_2.png.4ad5d1b48c4e59295224b24

Mặc định phân quyền sẽ cho tất cả nhóm thành viên và không giới hạn khu vực. Để chỉnh sửa bạn chỉ cần bỏ chọn Everyone hoặc Everywhere rồi chọn các tùy chọn trên, giữ ctrl để chọn nhiều.

Lưu ý: một vài buttons như bold, italics, underline vẫn còn sử dụng bbcode cũ, cho nên giới phân quyền và tùy chọn khu vực hiển thị sẽ không tác dụng.

Thêm button sử dụng plugin CKEditor

Từ IPS4 trở lên, CKEditor đã được tích hợp sâu hơn. Do vậy bạn có thể sử dụng plugin của ckeditor để thêm button cho Editor. Kho plugin của CKEditor vô cùng phong phú, bạn có thể truy cập tại đây: 

Hidden Content

    Give reaction to this post to see the hidden content.

Sau khi tìm được plugin vừa ý, bấm Add button > chọn tab CKEditor plugin > browse đến plugin vừa tải về để import. 

Cần chọn đúng phiên bản plugin mà IPS thông báo, như ví dụ hình dưới chúng ta cần phiên bản plugin 4.5.4

ips4editor_3.thumb.png.8d1489915d3456f3d

Sau khi import xong bạn sẽ thấy biểu tượng button mới ở phần Buttons Not On Editor, chỉ cần nắm kéo nó lên editor để sử dụng, click để thiết lập phân quyền và vùng hiển thị nếu cần thiết.

Có thể trong quá trình cài đặt plugin bạn sẽ gặp các thông báo lỗi như sau:

  • It doesn't add a button
    Hiện tại IPS chỉ hỗ trợ các plugin có hiển thị button trên editor, các plugin khác như skin, dev, clipboard,... sẽ ko hỗ trợ.
  • It doesn't support the installed version of CKEditor
    Bị sai phiên bản plugin, kiểm tra lại trước khi import.
  • Your CKEditor directory doesn't have write permissions
    Thư mục /applications/core/interface/ckeditor/ckeditor/plugins bị sai chmod. Chmod lại 777 hoặc 755.

Thêm button tùy chỉnh

Nếu trong trường hợp bạn không tìm được plugin ở kho plugin ckeditor, hoặc bạn chỉ muốn thêm một hỗ trợ định dạng đơn giản cho editor. Bạn có thể ứng dụng chức năng custom button thay thế. Custom button cho phép bạn tạo một block HTML để định dạng văn bản nhập vào. 

Vào Customization > Editor > Toolbars > click Add Button > chọn tab Custom:

  • Button title
    Tên của button
  • Icon
    Upload biểu tượng của button
  • Type
    Có 3 kiểu:
    • Inline - dùng cho những nội dung không cần phải xuống hàng (tương tự như bold, underline, link,...).
    • Single line block - một block mới với 1 hàng duy nhất.
    • Block - block với nhiều hàng.
  • Use option
    Đây là tùy chọn cho button, nếu dùng thì khi click button sẽ hiện 1 bảng với 1 form để nhập tùy chọn này vào.
  • Option label
    Đặt tên cho tùy chọn
  • HTML
    Dùng HTML định dạng
    • {option}
      Thay thế cho tùy chọn
    • {content}
      Nội dung chính

Để trang trí bằng CSS, bạn có thể thêm CSS vào custom.css (Customization > Themes > click </> để sửa > chọn tab CSS > core > front > custom > custom.css)

Để cho dễ hiểu, mình lấy 1 ví dụ đơn giản làm 1 button để hiển thị block Tip giống thế này

ips4editor_4.png.f9da82011ca0115d1967b26

  • Button title
    Tip
  • Icon
    ips4editor_5.png.24d0490067a20862f117f62
  • Type
    Block
  • Use option
    No
  • HTML

Hidden Content

    Give reaction to this post to see the hidden content.

Lưu lại, tiếp tục thêm CSS cho nó đẹp, Customization > Themes > click </> để sửa > chọn tab CSS > core > front > custom > custom.css

Hidden Content

    Give reaction to this post to see the hidden content.

Hoàn chỉnh.

  • Like 6
  • Thanks 1
  • Haha 1
  • Confused 1

Share this post


Link to post
Share on other sites

không hiểu mình làm sao mà giờ nó mất hết cả khung soạn thảo và các nút bấm luôn rồi Bim ơi, help me :((

lâu lắm rồi không sử dụng, cái này mới quá, hơi khó hiểu :(

Share this post


Link to post
Share on other sites
8 hours ago, Bim said:

Có cái nút Restore Default Configuration đó.

sử dụng nút đó rồi mà vẫn còn bị, phải upload lại thư mục gốc đè lên mới được lại

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×