كيفية إنشاء زر بدون أيقونة في ckeditor

Question

عندما أقوم بإنشاء زر شريط الأدوات في CKEditor 3.0 مع التعليمة البرمجية التالية، أحتاج إلى إيقاعات خاصية Icon للحصول على زر مرئي. خلاف ذلك يتم احتلال المساحة ولكن لا يتم عرض تسمية. عندما أتحف على ذلك أحصل على التسمية التي ظهرت.

        editor.ui.addButton('customButton', {
            label: 'Custom Action',
            //icon: this.path + 'images/anchor.gif',
            command: commandName
        });

هل تعرف كيفية إنشاء زر شريط الأدوات بدون أيقونة؟ مجرد نص نقي.

Answer 1

طريقة أسهل هي أن CKEDitor يخلق فئة CSS على الملصق المخصص الذي تسمى تلقائيا: CKE_Button_u003Ccommand>

على سبيل المثال، إذا كان الأمر يطلق عليه الأمر الخاص بك للزر "myCommand"، وقمت بتعيين "تسمية": "أمري"، ثم CK سيقدم شيئا مثل:

<a id="cke_27" class="cke_off cke_button_myCommand" ....>
...
<span id="cke_27_label" class="cke_label">My Command</span>
</a>

لذلك (على افتراض أنك تستخدم جلد كاما "بديلا عن بشرتك إذا لم يكن كذلك)، يمكنك استخدام CSS التالية لتجاوز cke_label ==> عرض: لا شيء

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

هاهو.

Answer 2

هذه هي الطريقة التي فعلتها. زر يبدو وكأنه هذا:

<span class="cke_button">
    <a id="cke_..." class="cke_off cke_button_cmd" ...>
        <span class="cke_icon"/>
        <span class="cke_label">Label</span>
    </a>
</span>

.CKE_LABEL مصمم "عرض: لا شيء" بشكل افتراضي. هذا سيفعل بالضبط ما نريد:

<span style="display:none;" class="cke_icon"/>
<span style="display:inline;" class="cke_label">Label</span>

وبالتالي فإن المحددين صعبة بعض الشيء، ضع هذا في علامة نمط على الصفحة مع المحرر:

<style type="text/css">
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_icon{display:none !important;}
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_label{display:inline;}
</style>

تطبيق مؤلفي CKEditor تطبيق CSS للحصول على التسمية على زر المصدر (الإعدادات المسبقة .CSS):

/* "Source" button label */
.cke_skin_kama .cke_button_source .cke_label
{
 display: inline;
}