Trong CKEditor, làm cách nào tôi có thể thêm nhãn "văn bản" vào nút?

Question

editor.ui.addButton('ImageUpload',{ 
       label: 'Upload Image', 
       command: 'popup_image_uploader', 
       icon: this.path + 'images/icon.png' 
      }); 

Đó là mã hiện tại của tôi ngay bây giờ. Khi bạn tải trang, bạn chỉ thấy biểu tượng.

Nhưng nếu bạn đi đến bản demo here, bạn sẽ thấy rằng "Nguồn" là văn bản. Tôi muốn thêm từ "Tải lên hình ảnh" bên cạnh biểu tượng.

Answer 1

Nhãn cho ckeditor nút thanh công cụ có một lớp .cke_label trong đó có theo mặc định display:none nên các nút là biểu tượng chỉ:

.cke_skin_kama .cke_button .cke_label { 
    ... 
    display: none; 
    ... 
} 

Giống như cho nút Nguồn, bạn phải sử dụng CSS để hiển thị nhãn của bạn.

thường khi tạo nút ckeditor thêm một lớp như .cke_button_CMDNAMEHERE nơi CMDNAMEHERE là tên của lệnh của bạn. Vì vậy, bạn sẽ có:

.cke_skin_kama .cke_button_CMDNAMEHERE .cke_label { 
    display: inline; 
} 

Kiểm tra nguồn html để xem tên chính xác của lớp đã thêm và thực hiện quy tắc CSS của bạn cho phù hợp.

Answer 2

.cke_button_label.cke_button__CMDNAMEHERE{ 
    display: inline; 
} 

sẽ làm việc cho tất cả da, không giống như những câu trả lời ở trên (chú ý dấu gạch dưới đôi giữa các nút và CMDNAMEHERE)

bạn có thể đặt nó ở bất cứ đâu trong css của riêng bạn

Answer 3

giải pháp khác sẽ được chỉ sử dụng css ": before" hoặc ": after" pseudo class để thêm một số nội dung tùy chỉnh trước/sau các nút.

ví dụ, tùy vào nút "liên kết":

tạo ra một số không gian (phụ thuộc vào chiều dài của nội dung):

.cke_button_icon.cke_button__link_icon { 
padding-right: 25px; 
} 

thêm nội dung:

.cke_button_icon.cke_button__link_icon:after { 
content: "Link"; 
position: relative; 
left: 15px; 
} 

Answer 4

Trong ckeditor hiện tại (4.6.x) các câu trả lời ở trên không có tác dụng đối với tôi.

Tôi đào xung quanh trong ckeditor/skins/moono-list/editor.css và tìm kiếm "source" để tìm hiểu cách họ đã thực hiện nút Nguồn có văn bản. Tôi đã tìm thấy điều này:

.cke_button__source_label, 
.cke_button__sourcedialog_label 
{ 
    display:inline 
} 

Lưu ý rằng có hai dấu gạch dưới ở đây trước tên nút tùy chỉnh của bạn. Khi tôi thử chỉ với một dấu gạch dưới, nó không hoạt động.

Dù sao bạn sẽ thay thế "nguồn" hoặc "sourcedialog" ở trên bằng bất kỳ thứ gì bạn muốn và thêm vào tệp css của riêng bạn.

Ngoài ra, dường như chỉ hoạt động đối với các tên nút hoàn toàn là chữ thường.