CKEditor5 ile getData() işlemi artık CKEDITOR.instances<instance_name>.getData() şeklinde değil de <instance_name>.getData() şeklinde olmalı. Bunun için ClassicEditor.create() işlemi sırasında başarıyla oluşturma durumunda bir instance ataması yapmalısın.
let myCustomEditor;
ClassicEditor
.create(document.querySelector('#blogyazi_icerik'))
.then( newEditor => {
myCustomEditor = newEditor;
})
.catch( error => {
console.error(error);
});
Yukarıdaki kod parçacığı şeklinde instance tanımlamasını yaptıktan sonra myData.push() işleminde yolladığın objede value değerini artık CKEDITOR.instances.blogyazi_icerik.getData() değil de myCustomEditor.getData() şeklinde yapmalısın.
Ayrıca yanlış anlamazsan, bu gibi karşılaşacağın diğer durumlarda öncelikle ilgili servisin dökümantasyonlarını incelemeni tavsiye ederim. Basit birkaç aramada çözümleyebileceğin sorunlar için herhangi bir forum veya soru-cevap platformunda yardım isteği açmak mantıklı değil. Örneğin şu linke uğramış olsaydın soruna daha hızlı cevap bulabilirdin.
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000"> <!-- #000 yerine "currentColor"-->
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/>
</svg>
Diyelim ki SVG iconunun rengi siyah (#000). İlgili SVG dosyanın içerisindeki siyah olarak atanmış fill veya stroke attribute larını currentColor olarak değiştir. Daha sonra bu SVG leri kullandığın yerde CSS ile bir color ataması yap.
Şu örneği inceleyebilirsin.
Ben farklı bir icon kaynağı istiyorum diyorsan Remixicon'u önerebilirim. Fakat yine de hover ya da active class atama işlemlerinde yukarıdaki anlattığım yönteme ihtiyaç duyacaksın.
Aşağıda yeterli alan var fakat yukarıdaki alan daha fazla. Eğer yeterli alan olmadığı durumlarda diğer yöne açılmasını istiyorsan kontrollerde değişiklik yapman lazım.
Diyelim ki sen dropdown menüsünün normal şartlarda aşağı açılmasını istiyorsun. Aşağıdaki alan dropdown'un yüksekliğinden daha küçükse yukarıya doğru açılsın şeklinde kontrol ekleyebilirsin.
Mevcut linkdeki kodu güncelledim. Eski halini de yorum satırı içerisine aldım, tekrar inceleyebilirsin.
<div class="wrapper"> <!-- wrapper sınıfına overflow-y: auto verilmeli -->
<!-- other elements -->
<div class="child"></div>
<!-- other elements -->
</div>
Yukarıdaki kod bloğuna yakın bir sistemimiz olduğunu düşünelim. Her dropdown butonuna tıklama işleminde aşağıdaki kontrolü sağlayarak aşağı doğru mu yoksa yukarıya doğru mu açılacağını belirtebilirsin.
{
// click işlemi içerisi
let topDistance = child.offsetTop - wrapper.offsetTop; // child elementinin, wrapper elementi içerisindeki y koordinatı diyebiliriz.
let scrollAmount = wrapper.scrollTop; // wrapper daki scroll miktarı
let exactTopDistance = topDistance - scrollAmount; // scroll olması durumunda uzaklık değişmeli
let wrapperHeight = wrapper.offsetHeight;
let exactBottomDistance = wrapperHeight - child.offsetHeight - exactTopDistance; // child elementin altında kalan alan. (wrapper elementi bitimine uzaklığı diyebiliriz)
if(exactTopDistance >= exactBottomDistance) {
// yukarıda kalan alan daha büyük dolayısıyla yukarıya doğru açılmalı.
} else {
// aşağı doğru açılmalı.
}
}
Anlatım biraz karışık gelmiş olabilir. Çalışan bir demoya şuradan ulaşabilirsin.
Three.js incelemeni tavsiye ederim.
Öncelikle kodun çok karışık, refaktör etmeni tavsiye ederim. Fakat bu kod ile devam edeceksen aşağıdakine yakın bir yöntem deneyebilirsin.
result += '<div class="checkbox category"><label><input type="checkbox" class="mr-2" name="kategori[]" value="'+value.kategori_id+'">'+value.kategori_adi+'</label></div>';
Yukarıdaki satırdaki en dıştaki dive, ilgili kategorinin sınıfının adını ekle. (tabi gelen kategori verisinde 'kategori_id' ve 'kategori_adi' sütunlarının yanında bir de 'sinif_adi' şeklinde bir sütun bulunmalı)
result += '<div class="checkbox category '+value.sinif_adi+'"><label><input type="checkbox" class="mr-2" name="kategori[]" value="'+value.kategori_id+'">'+value.kategori_adi+'</label></div>';
Yukarıdaki gibi yaptıktan sonra.
if(this.checked) {
//..
//.. AJAX kodların
//..
}else {
$("#categoryList div."+this.value).remove();
}
Else bloğu yardımıyla uncheck olan sınıfa ait kategorileri silebilirsin.
Bence taglar için ayrı bir tablo yapma, yazıları tuttuğun tabloda yazılara ait bilgileri tuttuğun sütunların yanına bir de tags diye bir varchar dizgi sütunu ekle. siteadi.com/tags/deneme-tag şeklinde dinamik bir adrese istekte bulunulduğunda da SELECT * FROM yazilar WHERE FIND_IN_SET('deneme-tag', tags) şeklinde sorgu yap ve postları listele.
İkinci soruna gelecek olursak, kullanıcının tag belirlemesine sınırlamalar koyabilirsin, örneğin Prototürk'teki gibi kullanıcını bir listeden belli tagları seçmelerini sağlayabilirsin, ya da girdiği tagı URL friendly bir biçime çevirip öyle sütuna eklersin. Örneğin girilen taglardan bir tanesi Deneme Tag olsun önce bunu kebab-case e çevirelim(bir fonksiyon yardımıyla) deneme-tag şekline dönüştü. Tabloya bu şekilde eklersen URL sıkıntısı da ortadan kalkmış olur.
Kebab-case fonksiyonunu da şu şekilde yapabilirsin. Fonksiyona gelen değere şu işlemleri uygula küçük harflere çevir, Türkçe karakterleri İngilizce karakterlerle değiştir, boşluk yerlerine "-" ekle ve çağrıldığı yere döndür.
Örneğin: "Öğretmenler Günü" > "öğretmenler günü" > "ogretmenler gunu" > "ogretmenler-gunu" şeklinde. Tabi bu çok basit bir fonksiyon. Internette bulacağın fonkisyonlar farklı durumlar için farklı çıktılar verebilir, bu durumları göz önünde bulundurarak daha farklı tablolama işlemleri de yapabilrsin.
Örneğin fonksiyonumuz Test123 > test-123 şekline çevirdi. Fakat aynı fonksiyon test 123 değerini de test-123 e çeviriyor. Burada bu iki tagı da istiyorsak şöyle bir yol izleyebilirsin, kebab-case olarak tutulacakları tagSlugs diye bir sütuna ekle, normal yazıldıkları gibi tutulacakları da tagSlugs sütununa ekle. Sorgu işlemlerinde tags sütununu kullanırsın ama herhangi bir tagı kullanıcıya gösterirken tags sütunundaki aynı index numarasındaki veriyi gösterirsin.
Anlaşılacak üzere, farklı senaryolar için farklı çözümler geliştirmek gerekiyor. Sana en uygun çözüm ve senaryo hangisiyse ona göre geliştirmeye devam etmelisin.
İyi günler, iyi çalışmalar dilerim.
Bilgisayarına bağlandığımda ne görmem gerekiyorsa onun resmini buraya atabilirsin güzel kardeşim. Hem bu problem benim bilmediğim bir konuyla ilgili de olabilir, bir fotoğraf ya da hata metni atarsan, daha fazla insanın sorunun çözümüne katkısı olacaktır.
Öncelikle HTML iskeletini doğru bir şekilde çıkarmanı tavsiye ederim. Tasarım bir yerde çiziliyse zaten kolay, ne nereye gelecek görüyorsun. Ama ortada çizilmiş bir tasarım yoksa (pdf, sketch, figma vs.), tasarımı da kendin yapıyorsan önce bir gözünü kapa ve ne nereye gelecek kararlaştır, daha sonra divler ile veya Semantic Elementler yardımıyla bir iskelet oluştur.
Örneğin Prototürk'ü ele alalım (web için). Üst tarafta bir header var, solda bir sidebar var ve geri kalan alan da içerik kısmı. Bunu nasıl bölümlere ayırmalıyız diye kendimize sormalıyız. Öncelikle header'ı bir header etiketi içerisinde ekleyelim içerisine de logo için, arama kutusu için ve profil seçenekleri için divler yerleştirelim. Şimdi sırada sidebar ve içerik kısmı var. Bu ikisini beraber bir element içerisine almak daha mantıklı olacaktır. Örneğin Prototürk'te main etiketi içerisine alınmış, sidebar da aside etiketi içerine alınmış, geriye kalan içerik kısmı ise div.content etiketi içerisine alınmış ve main etiketine display: flex verilerek bu iki element yan yana getirilmiş, ayrıca main yüksekliği de calc yardımıyla 100vh - 60px (header'in yüksekliği) olarak atanmış. Sen de kendi tasarımına göre böyle basit bir iskelet oluşturduktan sonra geri kalan kısımları tamamlaman hem daha kolay olur hem de varsa takım arkadaşların tarafından kodun ortak bir paydada okunabilirliğini artırır, hata çözümlerini kolaylaştırır.
Bunları anlatıyorum çünkü her şey CSS değil. Biliyorum sen CSS için soru sormuşsun fakat bu tarz küçük detayları da atlamadan geliştirmeye devam edersen, CSS yazman da kolaylaşacaktır.
Biz de münecciniz kardeşim, bi ekran resmi falan atsan da yardımcı olsak ha?