Site Oluşturucuda Araç Çubuğu Gruplarını Özelleştirme

Özel bileşenler için, Site Oluşturucu araç çubuğunda görüntülenen kullanıma hazır araç çubuğu gruplarının kopyalarını özelleştirebilirsiniz.

Kısıtlı bir küme içeren ve özel etikette kullanılabilen kullanıma hazır bileşen için kendi sürümünüzü oluşturabilirsiniz. Özelleştirmeler, kullanıma hazır bileşenleri etkilemezler.

Kısıtlı bir küme içeren ve özel etikette kullanılabilen kullanıma hazır bileşen için kendi sürümünüzü oluşturabilirsiniz ancak kullanıma hazır bileşenlerin herhangi biri etkilenmez.

Araç çubuğu grupları, düzenlemek üzere Başlık veya Paragraf bileşenine tıkladığınızda araç çubuğunda gördüklerinizi tanımlar. Başlık ve Paragraf bileşeninin desteklediklerini kaldırabilir ve yeniden sıralayabilirsiniz ancak ek eklentilere izin verilmez.

Site Oluşturucudaki araç çubuğu gruplarını özelleştirmek için, toolbarGroups konfigürasyonu için CKEditor tarafından kullanılan aynı söz dizimini kullanmanız gerekir. Bkz. https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic.

Başlık ve Paragraf bileşenleri şu grupları destekler:

Paragraf bileşeni ayrıca resmi ve tablo ekleme eklentilerini destekler”

  • "insert"

    • "image"

    • "table"

Ayrıca, satır ayırıcı girişini de kullanabilirsiniz:

  • "/"

Not:

Araç çubuğu-grup konfigürasyonunda başka herhangi bir değer ayarlarsanız, Site Builder araç çubuğu oluşturulmadan önce bu değer kaldırılır. "extraPlugins" sağlayamazsınız. Yalnızca "name"/"groups" konfigürasyonu desteklenir. Tüm "items" girişleri yoksayılır. 

Örnek olarak, kullanıcılarınızın yazı tipi, renk, stil veya boyut tanımlamalarını engellemek isterseniz araç çubuğu konfigürasyonunu güncelleyebilirsiniz. "No" değerleri için kullanıma hazır değerlerden farklı özel değerler belirtmelisiniz.

[{
    "name": "<category name>",
    "list": [{
        "type": "scs-title",
        "id": "<custom-value>",
        "config": {
            "toolbarGroups": [{
                    "name": "basicstyles",
                    "groups": ["basicstyles"]
                }, {
                    "name": "undo",
                    "groups": ["undo"]
                },
                "/", {
                    "name": "links",
                    "groups": ["links"]
                }, {
                    "name": "paragraph",
                    "groups": ["list", "indent"]
                },
                "/", {
                    "name": "align",
                    "groups": ["align"]
                },
                {
                    "name": "insert",
                    "groups": ["image", "table"]
                }, {
                    "name": "cleanup",
                    "groups": ["cleanup"]
                }
            ]
        }
    }, {
        "type": "scs-paragraph",
        "id": "<custom-value>",
        "config": {
            "fontSize_sizes": "16/16px;24/24px;48/48px;"
        }
    }]
}]

Doğrulama

components.json dosyanızı önceki kod ile değiştirin ve ardından sitenizi düzenleyin (zaten düzenleme yapıyorsanız gözatıcıyı yenileyin).  Bu noktada, bir Başlık bileşenini düzenlediğinizde artık seçime yönelik olarak yazı tipi stillerini veya renklerini göstermez.  Paragraf bileşeni bunları göstermeye devam eder ve kullanılabilir yazı tipi boyutlarının listesi 16, 24 ve 48 olarak sınırlandırılır.

Araç Çubuğu Grupları Öndeğeri

Başlık ve Paragraf için araç çubuğu grupları öndeğeri:

  • Başlık

    [{
            "name": "basicstyles",
            "groups": ["basicstyles"]
        }, {
            "name": "styles",
            "groups": ["styles"]
        }, {
            "name": "colors",
            "groups": ["colors"]
        }, {
            "name": "undo",
            "groups": ["undo"]
        },
        "/", {
            "name": "links",
            "groups": ["links"]
        }, {
            "name": "paragraph",
            "groups": ["list", "indent"]
        }, {
            "name": "align",
            "groups": ["align"]
        }, {
            "name": "cleanup",
            "groups": ["cleanup"]
        }
    ]
  • Paragraf

    [{
            "name": "basicstyles",
            "groups": ["basicstyles"]
        }, {
            "name": "styles",
            "groups": ["styles"]
        }, {
            "name": "colors",
            "groups": ["colors"]
        }, {
            "name": "undo",
            "groups": ["undo"]
        },
        "/", {
            "name": "links",
            "groups": ["links"]
        }, {
            "name": "paragraph",
            "groups": ["list", "indent"]
        }, {
            "name": "align",
            "groups": ["align"]
        }, {
            "name": "insert",
            "groups": ["image", "table"]
        }, {
            "name": "cleanup",
            "groups": ["cleanup"]
        }
    ]