सीकेएडिटर में, मैं बटन पर "टेक्स्ट" लेबल कैसे जोड़ सकता हूं?

Question

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

अभी मेरे वर्तमान कोड है यही कारण है कि। जब आप पृष्ठ लोड करते हैं, तो आप केवल आइकन देखते हैं।

लेकिन अगर आप डेमो here पर जाते हैं, तो आप देखेंगे कि "स्रोत" एक पाठ है। मैं आइकन के बगल में "अपलोड छवि" शब्द जोड़ना चाहता हूं।

Answer 1

CKeditor टूलबार बटन के लिए लेबल एक वर्ग .cke_label जो डिफ़ॉल्ट रूप से है है display:none तो बटन आइकन-ही कर रहे हैं:

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

तरह स्रोत बटन के लिए, आप सीएसएस का उपयोग करना अपना लेबल दिखाने के लिए।

आम तौर पर जब बनाने बटन CKeditor .cke_button_CMDNAMEHERE जहां CMDNAMEHERE की तरह एक वर्ग को जोड़ने के अपने आदेश के नाम पर किया जा रहा है। तो तुम होगा:

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

चेक html स्रोत जोड़ा वर्ग का सही नाम देख सकते हैं और अपने CSS नियम के हिसाब से बनाने के लिए।

Answer 2

.cke_button_label.cke_button__CMDNAMEHERE{ 
    display: inline; 
} 

ऊपर जवाब के विपरीत, सभी खाल के लिए काम करेंगे

आप अपने खुद के सीएसएस में कहीं भी रख सकते हैं (बटन और CMDNAMEHERE के बीच डबल अंडरस्कोर ध्यान दें)

Answer 3

एक और समाधान सिर्फ होगा बटन से पहले/बाद में कुछ कस्टम सामग्री जोड़ने के लिए सीएसएस ": पहले" या ": बाद" छद्म वर्ग का उपयोग करें।

उदाहरण के लिए

, "लिंक" बटन को अनुकूलित:

कुछ जगह बनाने के (सामग्री की लंबाई पर निर्भर करता है):

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

सामग्री जोड़ने:

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

Answer 4

वर्तमान CKEditor में (4.6.x) उपर्युक्त उत्तर मेरे लिए काम नहीं करते हैं।

मैं CKEditor/खाल/moono-सूची/editor.css में चारों ओर खोदा और "स्रोत" कैसे वे जो पाठ है Source बटन पसंद आया था के लिए एक खोज किया था। मैंने यह पाया:

.cke_button__source_label, 
.cke_button__sourcedialog_label 
{ 
    display:inline 
} 

ध्यान दें कि आपके कस्टम बटन के नाम से पहले यहां दो अंडरस्कोर हैं। जब मैंने केवल एक अंडरस्कोर के साथ प्रयास किया तो यह काम नहीं किया।

वैसे भी आप ऊपर जो कुछ भी आप चाहते हैं के साथ "स्रोत" या "sourcedialog" की जगह और अपने खुद के सीएसएस फ़ाइल के लिए कि जोड़ना होगा।

इसके अतिरिक्त, ऐसा लगता है कि यह केवल लोअरकेस हैं।