CKEdit kurulumu veya paneldeki gereksiz simgelerin nasıl kaldırılacağı. CKEditor görsel düzenleyicisini yükleme Temel özellikler ve işlevler
CKEditor 4 - WYSIWYG makale editörü. Stiller, listeler, bağlantılar, grafikler vb. ile çalışma dahil olmak üzere esnek metin biçimlendirmesi gerçekleştirmenize olanak tanır.
ArayüzŞekil 1. Düzenleyici penceresi
WYSIWYG düzenleyici penceresi aşağıdaki düğme panellerini içerir:
 |
Görüntüleme modunu değiştirme |
| Makale şablonunu yazdırma ve seçme | |
| Panoyla çalışma (kesme, kopyalama, yapıştırma, geri alma) | |
| Ara ve değiştir | |
| Form Oluşturma | |
| Spoiler (daraltılabilir metin) ve sayfa sonları ekleme | |
| Metin stilini değiştirme | |
| Paragrafları Biçimlendirmek | |
| Bağlantı ekleme | |
| Üçüncü taraf sitelerden medya içeriği ekleme | |
| Nesne ekleme | |
| Biçimlendirme stili seçme | |
| Paragraf biçimlendirmesini seçin | |
| Yazı tipi seçimi | |
| Yazı tipi boyutunu seçme | |
| Metin veya arka plan rengini seçme | |
| Yazım denetimi | |
| Ek görüntüleme seçenekleri (blokları göster ve genişlet) |
Düzenleyici penceresinin alt paneli, geçerli etiket ve metin istatistikleriyle ilgili bilgileri içerir:
Görüntüleme modunu değiştirme
Düzenleyici görüntüleme modlarını değiştirme panelinde aşağıdaki düğmeler bulunur:
Makale şablonunu yazdırma ve seçme
Baskı ve makale şablonu seçim paneli aşağıdaki düğmeleri içerir:
| Makaleyi yazıcıda yazdırmak. Bu düğmeye tıkladıktan sonra, bir yazıcı seçmenizi ve makale metnini yazdırmanızı isteyen standart bir iletişim kutusu açılacaktır. | |
Bir makale şablonu seçme:
|
Panoyla çalışmak için aşağıdaki işlemler düzenleyicide mevcuttur:
| "Kes" düğmesi. Makalenin seçilen kısmını keser ve panoya yerleştirir. | |
| Kopyala düğmesi. Makalenin seçilen bölümünü kopyalar ve panoya yerleştirir. | |
| "Ekle" düğmesi. Pano içeriğini makaleye yapıştırır. Metin MS Office gibi harici uygulamalardan yapıştırılırsa, yapıştırma sırasında biçimlendirmeyle ilgili tüm etiketler dahil edilecektir. Bu etiketlerin çoğu gereksizdir ve kaldırılması gerekir, bu da makalenin düzenlenmesini zorlaştırır. Bu nedenle bu düğmeyi yalnızca biçimlendirilmemiş metinleri eklemek için kullanmanız önerilir. | |
| "Yalnızca metin ekle" düğmesi. “Ekle” düğmesine benzer. Bir makalenin bir parçasını panoya yapıştırdığınızda biçimlendirmesi tamamen kaldırılır. | |
| "Word'den Ekle" düğmesi. “Ekle” düğmesine benzer. Eklenen parçanın formatını korumak istiyorsanız kullanılır. Yapıştırma, metnin görünümünü en iyi şekilde korur ve gereksiz biçimlendirmeyi ortadan kaldırır. MS Word veya diğer MS Office uygulamalarından metin kopyalarken kullanılması önerilir. | |
| İptal düğmesi. Yapılan son değişikliği geri almak için kullanılır. | |
| "Tekrarla" düğmesi. Geri alınan son değişikliği geri almak için kullanılır. |
Bul ve Değiştir paneli aşağıdaki düğmeleri içerir:
Aramak
“Bul” düğmesine tıkladığınızda bir arama penceresi açılır:
"Bul" alanına istediğiniz metin parçasını girin.
Aşağıdaki seçenekler mevcuttur:
- Metin boyunca. Seçenek etkinleştirilirse makalenin sonuna gelindiğinde arama baştan devam edecektir. Seçenek devre dışı bırakılırsa makalenin sonuna gelindiğinde arama sona erecektir.
Arama yapmak için aradığınız parçayı girmeli, gerekli arama seçeneklerini etkinleştirmeli ve “Bul” butonuna tıklamalısınız. Editör bir arama yapacak ve makale metninde bulunan ilk parçayı vurgulayacaktır. “Bul” düğmesine tekrar her bastığınızda, editör metinde daha fazla arama yapacak ve bulunan bir sonraki parçayı vurgulayacaktır.
Yenisiyle değiştirme“Değiştir” düğmesine tıkladığınızda, bir metin parçası değiştirme penceresi açılır:
"Bul" alanına istediğiniz metin parçasını girin. "Şununla değiştir" alanında, aranan parçayı değiştirmek istediğiniz metin.
Aşağıdaki seçenekler mevcuttur:
- Harfe duyarlı. Seçenek etkinleştirilirse, arama, aranan parçanın karakterlerinin büyük/küçük harf durumunu dikkate alacaktır.
- Sadece kelimenin tamamı. Seçenek etkinleştirilirse editör girilen parçayı tam kelime olarak arayacaktır. Arama sonuçları, girilen parçanın bir parçası olduğu kelimeleri içermeyecektir.
- Metin boyunca. Seçenek etkinleştirilirse makalenin sonuna gelindiğinde arama baştan devam eder. Seçenek devre dışı bırakılırsa makalenin sonuna gelindiğinde arama sona erecektir.
Değiştirme işlemini gerçekleştirmek için "Bul" ve "Şununla değiştir" alanlarını doldurmanız, gerekli arama seçeneklerini etkinleştirmeniz ve "Değiştir" veya "Tümünü Değiştir" düğmesine tıklamanız gerekir. “Değiştir” butonuna tıkladığınızda editör, makale metninde bulunan ilk parçayı arayacak ve değiştirecektir. “Değiştir” düğmesine her tıkladığınızda, editör metinde daha fazla arama yapacak ve bulunan bir sonraki parçayı değiştirecektir.
“Tümünü Değiştir” düğmesine tıkladığınızda, editör gerekli parçayı makalenin tüm metni boyunca hemen arayacak ve değiştirecektir.
Formlar, kullanıcının bir tarayıcı penceresine veri girmesi, işlemciye aktarması ve gerekirse işleme sonuçlarını görüntülemesi için tasarlanmıştır. Örneğin: kullanıcı kayıt formu, geri bildirim formu vb.
Form oluşturma panelinde aşağıdaki düğmeler bulunur:
| "Form" düğmesi. Bir makaleye form eklemek için kullanılır. HTML kodunda form, form etiketine karşılık gelir. | |
| "Onay kutusu" düğmesi. Bir forma veya makaleye onay kutuları (onay kutuları, onay işaretleri) eklemek için kullanılır. | |
| Radyo düğmesi. Bir forma veya makaleye radyo düğmeleri (anahtarlar) eklemek için kullanılır. | |
| Metin alanı düğmesi. Tek satırlık metin giriş alanı eklemek için kullanılır. | |
| Çok satırlı metin alanı düğmesi. Çok satırlı metin giriş alanı eklemek için kullanılır. | |
| "Açılır liste" düğmesi. Açılır liste eklemek için kullanılır. | |
| "Düğme" düğmesi. Bir forma veya makaleye düğme eklemek için kullanılır. | |
| “Resim düğmesi.” Düğme olarak kullanılacak bir resmi eklemek için kullanılır. | |
| "Gizli Alan" düğmesi. Bir forma veya makaleye gizli alan eklemek için kullanılır. |
“Form” butonuna tıkladığınızda yeni formun ayarlar penceresi açılır.
Form ayarları penceresi aşağıdaki alanları içerir:
| İsim | Keyfi form adı. HTML kodunda – name parametresi. |
| Aksiyon | Forma girilen verileri işleyen programın veya belgenin URL'si. HTML kodunda eylem parametresi. |
| Tanımlayıcı | Formun benzersiz tanımlayıcısı. HTML kodunda – id parametresi. |
| Kodlama | Form verilerinin nasıl kodlanacağını seçme. HTML kodunda – enctype parametresi. Mevcut değerler:
|
| Hedef | Form veri işlemcisinin işleme sonuçlarını görüntüleyeceği bir pencere veya çerçevenin seçilmesi. HTML kodunda – hedef parametre. Mevcut değerler:
|
| Yöntem | Kullanılacak HTTP istek yöntemini seçme. HTML kodunda – yöntem parametresi. Mevcut değerler:
|
Bir onay kutusu, bir özelliği veya seçeneği etkinleştiren veya devre dışı bırakan denetimleri görüntülemek için tasarlanmıştır. Böyle bir öğe iki değerden birini alabilir: evet veya hayır. HTML kodunda bu öğe, input type = "checkbox" etiketine karşılık gelir. “Onay Kutusu” düğmesine tıkladığınızda yeni öğenin ayarlar penceresi açılır.
“Onay Kutusu” öğesinin ayarlar penceresi aşağıdaki alanları içerir:
- Ad - öğenin isteğe bağlı adı. HTML kodunda – name parametresi;
- Değer - öğe için benzersiz bir tanımlayıcı görevi görür. HTML kodunda – değer parametresi;
- Seçili - seçenek etkinleştirilirse, bu öğe varsayılan olarak işaretlenecektir.
“Radyo düğmesi” öğesi, yalnızca bir tanesini seçme olanağına sahip bir grup değeri görüntülemek için tasarlanmıştır. Onlar. Bir grup içindeki öğeler birbirini dışlar. Her öğe iki değerden birini alabilir: evet veya hayır. HTML kodunda bu öğe, input type = "radio" etiketine karşılık gelir. “Radyo Düğmesi” düğmesine tıkladığınızda yeni öğenin ayarlar penceresi açılır.
“Radyo Düğmesi” öğesine ilişkin ayarlar penceresi aşağıdaki alanları içerir:
- Bir grup içindeki öğeler aynı ada sahip olmalıdır.
- Değer - öğe için benzersiz bir tanımlayıcı görevi görür. HTML kodunda – değer parametresi.
- Seçili - seçenek etkinleştirilirse, bu öğe varsayılan olarak işaretlenecektir. Bir grup içinde bu özellik yalnızca bir öğe için etkinleştirilmelidir. Birden fazla öğe için etkinleştirilirse yalnızca sonuncusu işaretlenecektir.
“Metin alanı” öğesi kullanıcının bir metin dizesi girmesi için tasarlanmıştır. HTML kodunda bu öğe, input type = "text" etiketine karşılık gelir. “Metin Alanı” butonuna tıkladığınızda yeni alana ait ayarlar penceresi açılır.
- Ad - öğenin isteğe bağlı adı. HTML kodunda – name parametresi.
- Değer - Varsayılan metin alanında görüntülenecek metni içerir. HTML kodunda – değer parametresi.
- Alan genişliği (karakter cinsinden) - metin alanı giriş alanının karakter cinsinden uzunluğu. HTML kodunda boyut parametresi.
- Maks. karakter sayısı - metin alanına girilebilecek dizenin karakter cinsinden maksimum uzunluğu. HTML kodunda – maxlength parametresi.
- İçerik Türü - Metin alanının içerik türü. HTML kodunda – type parametresi. Sunucuya veri gönderilmeden önce belirtilen türe uyup uymadığı kontrol edilir.
Mevcut içerik türleri:
- E-posta – metin alanı e-posta adresini içerir;
- Şifre – metin alanı şifreyi içerir;
- Arama – metin alanı aranan metni girmek için tasarlanmıştır;
- Telefon numarası – metin alanı bir telefon numarası içerir;
- Metin – metin alanı normal bir satır içerir;
- Bağlantı – Metin kutusu URL'yi içerir.
“Çok satırlı metin alanı” öğesi, birkaç satırdan oluşan metnin kullanıcı tarafından girilmesi için tasarlanmıştır. HTML kodunda bu öğe eşleştirilmiş bir textarea etiketine karşılık gelir. “Çok satırlı metin alanı” butonuna tıkladığınızda yeni alana ait ayarlar penceresi açılır.
"Metin alanı" öğesinin ayarlar penceresi aşağıdaki alanları içerir:
- Ad - öğenin isteğe bağlı adı. HTML kodunda – name parametresi.
- Sütunlar - karakter cinsinden alan genişliği. HTML kodunda – cols parametresi.
- Satırlar - satırlardaki alan yüksekliği. HTML kodunda – satırlar parametresi.
- Değer - Varsayılan metin alanında görüntülenecek metni içerir.
Açılır Liste öğesi, çoktan seçmeli bir listeyi veya açılır listeyi görüntülemek için tasarlanmıştır. HTML kodunda bu öğe eşleştirilmiş bir seçim etiketine karşılık gelir. Liste öğeleri eşleştirilmiş bir seçenek etiketiyle eşleştirilir. “Açılır liste” butonuna tıkladığınızda yeni listenin ayarlar penceresi açılır.
Çoklu seçim listesi ayarları penceresi aşağıdaki alanları içerir:
- Ad - öğenin isteğe bağlı adı. HTML kodunda – name parametresi.
- Değer - varsayılan olarak seçilen liste öğesinin değerini içerir. Bu öğenin HTML kodunda seçenek etiketi,selected='selected' olarak ayarlanmıştır.
- Boyut - görüntülenen liste alanının satır cinsinden yüksekliği. Boyut bire eşitse, bir açılır liste görüntülenecektir. Boyut belirtilmezse liste görünümü Çoklu seçime izin ver seçeneğine bağlı olacaktır.
“Mevcut seçenekler” parametre grubu:
- Metin - liste öğesinin görüntülenen metni için giriş alanı. “Değer” alanıyla birlikte girilir. Listeye bir “Metin – Değer” çifti eklemek için “Ekle” butonuna tıklayın.
- Değer - sunucuya gönderilen liste öğesinin değeri için giriş alanı. “Metin” alanıyla birlikte girilir. Listeye bir “Metin – Değer” çifti eklemek için “Ekle” butonuna tıklayın.
- Ekle - girilen “Metin – Değer” çiftini listeye eklemek için kullanılan düğme.
- Düzenle - seçilen liste öğesini değiştirmek için kullanılan düğme. Değiştirmek için liste ayarlarında gerekli öğeyi seçmeniz, "Metin" ve "Değer" alanlarının içeriğini düzenlemeniz ve "Değiştir" düğmesini tıklamanız gerekir. Seçilen öğe buna göre güncellenecektir.
- Yükselt - seçilen liste öğesini bir seviye daha yükseğe taşımak için kullanılan düğme.
- Aşağı - seçilen liste öğesini bir seviye aşağıya taşımak için kullanılan düğme.
- Seçilmiş olarak işaretle - düğmeyi tıklattığınızda seçilen liste öğesi varsayılan olarak seçili olarak işaretlenir. Elemanın değeri "Değer" alanında görüntülenir (yukarıya bakın). Bu öğenin HTML kodunda seçenek etiketi,selected='selected' olarak ayarlanmıştır.
- Sil - seçilen öğeyi listeden silmek için kullanılan düğme.
- Çoklu seçime izin ver - özellik etkinse ctrl tuşunu kullanarak birden fazla liste öğesi seçebilirsiniz. Liste boyutu belirtilmezse ve özellik devre dışı bırakılırsa, bir açılır liste görüntülenecektir. Liste boyutu belirtilmezse ve özellik etkinleştirilirse liste boyutu dört olarak ayarlanır.
Yazının sonu şöyle...
Bana göre CKEditor web siteleri için en iyi wysiwyg editörlerinden biridir. Son zamanlarda, kullanıcının hayatını kolaylaştırmak için pek çok saçmalık ortaya çıktı ve bu da sonuçta ACF olarak ona müdahale ediyor. Bunu nasıl düzenleyeceğimi ve devre dışı bırakacağımı zaten biliyorum. Ancak yazımızın konusuna dönelim: CKEditor’a eklentiler nasıl kurulur.
Burada iki yaklaşım görüyorum.
Öncelikle editörün web sitesine gidiyoruz ve ihtiyacımız olan eklentiler de dahil olmak üzere CKeditor’u kendimiz için yeniden oluşturuyoruz. Bu şu şekilde yapılır. Ckeditor.com web sitesine gidiyoruz, indirme sekmesine gidiyoruz. Ardından CKEditor'u özelleştirmeme izin ver'i seçin.
Ancak bu durumda tüm eklentiler görüntülenmez. Yapınıza yeni veya özel eklentiler eklemek için yapınızı biraz farklı bir şekilde oluşturmanız gerekir. Eklentiler -> Eklentiler'e gidin ve sağdaki aşağıdaki hareketli menüye bakın
Editörüme ekle butonuna tıkladığınızda eklenti montaja eklenir. İşiniz bittiğinde Düzenleyicimi oluştur'a tıklayın ve yerleşik düzenleyicimizi oluşturulan düzenleyiciyle değiştirin.
İkinci yaklaşım ise kodun derinliklerine inmek isteyenler içindir.
ckeditor.com web sitesinde, eklentiler->eklentiler bölümüne gidin ve gerekli eklentiye tıklayın.
İndir'i seçin ve sitedeki talimatları izleyin. Çoğunlukla, belirli bir eklenti için bağımlılıklar yüklemeniz ve hem eklentinin kendisini config.js yapılandırma dosyası alanına hem de kurulmakta olan eklentinin bağlı olduğu eklentiyi virgüllerle ayırarak kaydetmeniz gerektiği gerçeğine varırlar. , Örneğin,
Config.extraPlugins = "codemirror,youtube,imagerotate";
Çoğu sitede kullanım için mükemmel olan mükemmel bir WISIWIG düzenleyicisini sizinle paylaştım. Bu araç şüphesiz HTML bilmeyen kişiler için metin yazmayı ve düzenlemeyi kolaylaştırır.
Şahsen, bu WISIWIG düzenleyicisinin Rus internetinde kurulmasına ilişkin herhangi bir bilgi bulmak benim için oldukça zordu, bu yüzden belgeleri İngilizce olarak okumak zorunda kaldım. Bu arada bu gerçek beni bu notu yazmaya sevk etti.
İşin sırrı neredeyse tüm ayarların dosyada yoğunlaşmış olmasıdır. /ckeditor/config.js. Beklenmedik bir şekilde doğru. Siz de benim gibi Textpattern'i CMS olarak kullanıyorsanız, dosyanın yolu biraz farklı olacaktır - /textpattern/ckeditor/config.js.
Varsayılan olarak (herhangi bir ayar olmadan) dosya şu şekilde görünür:
CKEDITOR.editorConfig = function(config) ();
Paneldeki simgelerin görünümünü yapılandırmak için config.toolbar_Full parametresini eklemeniz gerekir. Bu sistemin sunduğu tüm olası simgeleri panelde görüntülemek için kodu ekleyin:
CKEDITOR.editorConfig = function(config) ( config.toolbar_Full = [ ( ad: "belge", öğeler: [ "Kaynak", "-", Kaydet, "Yeni Sayfa", "DocProps", "Önizleme", Yazdır ","-","Şablonlar" ] ), ( ad: "pano", öğeler: [ "Kes", "Kopyala", "Yapıştır", "Metni Yapıştır", "PasteFromWord", "-" Geri Al", "Yinele" ] ), ( ad: "düzenleme", öğeler: [ "Bul", "Değiştir",-, "Tümünü Seç",-, "Yazım Denetimi", "Scayt" ] ), ( ad: " formlar", öğeler: [ "Form", "Onay Kutusu", "Radyo", "TextField", "Textarea", "Seç", "Düğme", "ImageButton", "HiddenField" ]), "/", ( name : "temel stiller", öğeler: [ "Kalın", "İtalik", "Alt Çizgili", "Üst Çizgi", "Abonelik", "Üst Simge", "-" Kaldır Formatı" ] ), ( name: "paragraf", öğeler : [ "Numaralı Liste", "Madde İşaretli Liste", "-" Çıkıntılı, "Girinti", "-" Blok Alıntı, "CreateDiv", "-" JustifyLeft, "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "BidiLtr", "BidiRtl" ] ), ( ad: "bağlantılar", öğeler: [ "Bağlantı", "Bağlantıyı Kaldır", "Çapa" ] ), ( ad: "ekle", öğeler : [ "Görüntü", "Flash", "Tablo", "HorizontalRule", "Gülen", "Özel Karakter", "Sayfa Sonu" ] ), "/", ( name: "styles", items: [ "Stiller", "Format", "Font", "FontSize" ] ), ( ad: "renkler", öğeler: [ "TextColor", "BGColor" ] ), ( ad: "araçlar", öğeler: [ "Büyüt", "ShowBlocks ","-","Hakkında" ] ) ]; );
Gereksiz simgeleri kaldırmak için, bu koddaki atamalarını ("Maximize", "ShowBlocks" vb.) manuel olarak kaldırmalısınız. Buna göre doğru söz dizimini korumak. Burada karmaşık bir şey olmadığını düşünüyorum.
Nasıl yaparım?Genellikle bir müşteri sitesi için bu görünümü kullanırım:
Yazı tipi rengi, yazı tipi ve boyutu gibi sitedeki metnin görünümünü değiştiren metin biçimlendirme araçlarını kasıtlı olarak kaldırıyorum çünkü bunun siteyi dolduran kişi tarafından değil, bir web geliştiricisi tarafından yapılması gerektiğine inanıyorum. Ek olarak, daha sonra bu siteyle çalışan kişilerin çoğu, genellikle sitenin genel görünümünü bozabilecek "tuhaf bir zevke" sahiptir.
Örneğin, bu tür bir arayüz aşağıdaki kodla yapılandırılabilir:
CKEDITOR.editorConfig = function(config) ( config.toolbar_Full = [ ( name: "document", items: [ "Geri Al", "Yinele"]), ( name: "basicstyles", items: [ "Kalın", İtalik ``Alt Çizgi``Abonelik``Üst simge```Biçim" ] ), ( ad: "paragraf", öğeler: [ "NumaralandırılmışListe", "Madde İşaretliList",-, "JustifyLeft", "JustifyCenter", "JustifyRight",JustifyBlock" ] ), ( ad: "bağlantılar", öğeler: [ "Bağlantı", "Bağlantıyı Kaldır" ] ), ( ad: "insert", öğeler: [ "Resim", "Tablo", "Özel Karakter" " ]), ( ad: "araçlar", öğeler: [ "Küçült", "Kaynak"] ) ]; );
Bugün CKE'nin şimdiye kadar gördüğüm en iyi sistem olduğunu söylersem bir kez daha tekrarlayacağım.
Sosyal medyada paylaşın ağlar
İndirme seçenekleri
CKEditor 5 yapılarını indirmek için birkaç seçenek vardır:
Düzenleyiciyi indirdikten sonra nasıl düzenleyici oluşturulacağını görmek için Temel API kılavuzuna geçin.
CDNDerlemeler sayfaların içine doğrudan adresinden yüklenebilir; bu, dünya çapında süper hızlı içerik dağıtımı için optimize edilmiştir. CDN kullanırken aslında indirmeye gerek yoktur.
npmTüm yapılar npm'de yayınlanır. Npm'de bulunan tüm resmi derleme paketlerini görüntülemek için bu arama bağlantısını kullanın.
Npm ile bir derleme yüklemek, projenizde aşağıdaki komutlardan birini çağırmak kadar basittir:
Npm install --save @ckeditor/ckeditor5-build-classic # Veya: npm install --save @ckeditor/ckeditor5-build-inline # Veya: npm install --save @ckeditor/ckeditor5-build-balloon # Veya: npm install --save @ckeditor/ckeditor5-build-balloon-block # Veya: npm install --save @ckeditor/ckeditor5-build-decoupled-document
CKEditor daha sonra node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js adresinde mevcut olacaktır. Ayrıca require("@ckeditor/ckeditor5-build-") aracılığıyla doğrudan kodunuza aktarılabilir.
Zip'i indiradresine gidin ve tercih ettiğiniz yapıyı indirin. Örneğin, Classic editör yapısı için ckeditor5-build-classic-1.0.0.zip dosyasını indirebilirsiniz.
.zip dosyasını projenizin içindeki özel bir dizine çıkarın. CKEditor'un yeni bir sürümü yüklendikten sonra önbelleğin uygun şekilde geçersiz kılınmasını sağlamak için dizin adına editör sürümünün dahil edilmesi önerilir.
Dahil edilen dosyalar- ckeditor.js – Düzenleyiciyi ve tüm eklentileri içeren, kullanıma hazır düzenleyici paketi.
- ckeditor.js.map – Düzenleyici paketinin kaynak haritası.
- çeviriler/ – Düzenleyici kullanıcı arayüzü çevirileri (bkz. Kullanıcı Arayüzü dilini ayarlama).
- README.md ve LICENSE.md
Uygulamanıza CKEditor 5 yapısını indirip yükledikten sonra, editör API'sini sayfalarınızda kullanılabilir hale getirmenin zamanı geldi. Bu amaçla API giriş noktası komut dosyasını yüklemeniz yeterlidir:
CKEditor betiği yüklendikten sonra şunları yapabilirsiniz:
Bugün çok popüler içerik düzenleyici CKEditor'u standart bir ASP.NET MVC uygulamasına nasıl entegre edeceğimizi ve yapılandıracağımızı bulacağız. Ayrıca aynı derecede popüler olan CKFinder dosya yöneticisini de yükleyip yapılandıracağız.Resmi geliştirici sayfası: https://ckeditor.com/
CKEditor, günümüzde çok popüler bir görsel WYSIWYG HTML içerik düzenleyicisidir.
CKFinder, sunucudaki dosya sistemine erişmenizi ve istemcinin tarayıcısından dosyaları yönetmenizi sağlayan bir dosya yöneticisidir.
Genellikle bu bileşenlerin her ikisi bir araya gelir, yani dosya yöneticisi düzenleyiciye entegre edilir.
CKEditor'un iki versiyonu mevcuttur. Sürüm 4 daha eskidir ve bu nedenle daha yaygındır. Ve sürüm 5, birçok yeniliğe sahip, modüler bir mimariyi uygulayan yeni.
CKEditor'u kurmaProjelerimde versiyon 4'ü kullanıyorum, işlevselliği her türlü sorunu çözmeye yetiyor. Arşivi editörle indirip projemize ekleyelim.
CKEditor'ı eklemek çok basittir. Bu birkaç aşamada gerçekleşir:
) document.addEventListener("DOMContentLoaded", function (event) ( var editor = CKEDITOR.replace("content1"); ));
Her şey hazır! Yukarıdaki örnekte CKEditor, bir HTML formunun içindeki "content1" metin alanına bağlanır. Daha sonra bu alanın içeriği sunucuya gönderilecektir.
CKEditor için standart işlevselliğini genişleten birçok eklentinin bulunduğunu belirtmekte fayda var. Ayrıca eklentileri kendiniz de yazabilirsiniz (bu işlem, web sitesindeki resmi belgelerde daha ayrıntılı olarak açıklanmaktadır). Düzenleyiciye, Youtube video barındırmadan sayfaya video yerleştirmenizi sağlayan bir eklenti ekleyelim.
Yazma sırasında tüm eklentiler sitede ayrı bir bölümde bulunabilir. İlgilendiğimiz eklenti şu adreste bulunmaktadır: https://ckeditor.com/cke4/addon/youtube
Bundan sonra editör araç çubuğunda yeni eklentiyle çalışmanıza izin veren yeni bir düğme görünecektir.
Şimdi CKFinder dosya yöneticisine bakalım. Dosyalarımız (örneğin resimler) sunucuda bulunduğundan, bu bileşeni istemciye, yani kullanıcının tarayıcısına bağlamanın yanı sıra, onu sunucu tarafında da yapılandırmamız ve özellikle bazı kitaplıkları bağlamamız gerekecektir. ve çeşitli yöntemleri uygulayın.
ASP.NET uygulamaları için bağlayıcı kurmaya yönelik resmi belgeler şu adreste bulunur: https://ckeditor.com/docs/ckfinder/ckfinder3-net/
Web sitesinde yapılandırdığımız ve manuel olarak indirdiğimiz CKEditor editörünün aksine, CKFinder'ı doğrudan Visual Studio'da projeye . İş için gereken minimum paket seti şuna benzer:
Gerekli tüm bileşenleri kurduktan sonra sunucu tarafı kurulumuna başlayabilirsiniz.
İlk olarak, CKFinder yalnızca kimliği doğrulanmış kullanıcıların dosya sistemine erişmesini gerektirir; yani, bu dosya yöneticisi aracılığıyla sunucuya her istekte bulunduğumuzda, verilen kullanıcının sunucudaki dosyalara erişmesine izin verilip verilmediğini ona bildirmeliyiz. .
Bunu yapmak için özel bir arayüz ve bu arayüzde gelen tüm istekleri doğrulayan bir yöntem uygulamamız gerekiyor.
CKFinderAuthenticator.cs
Genel sınıf CKFinderAuthenticator: IAuthenticator ( public Task AuthenticateAsync(ICommandRequest commandRequest, CancellationToken cancelToken) ( var user = new User(true, new List()); return Task.FromResult((IUser) user); ) )
Yukarıdaki örnekte, her seferinde kimliği doğrulanmış (gerçek bayrak) ve hiçbir rolü olmayan (boş sayfa) sahte bir kullanıcı döndürüyoruz. Yani her zaman dosya sistemine erişim haklarımız vardır. Gerçek bir projede elbette bu konuya daha ciddi yaklaşılması ve bu yöntemin mevcut kullanıcı kimlik doğrulama ve yetkilendirme sistemiyle birleştirilmesi gerekiyor.
Ad alanı CKEditor ( public class Startup ( public void Configuration(IAppBuilder app)) ( // bağlayıcı için dosya sistemini kaydedin FileSystemFactory.RegisterFileSystem(); // uygulamada bir rota bildirin ve onu bağlayıcıyla eşleştirin // CKFinder istemci JS'si kitaplık bu rota boyunca bağlayıcıyı görmeyi bekliyor app.Map("/ckfinder/connector", SetupConnector ) //bağlayıcıyı ayarlamak ve başlatmak için bir yöntem bildirin özel statik void SetupConnector(IAppBuilder app) ( //gerekli örnekleri oluşturun sınıflar varconnectorFactory = new OwinConnectorFactory(); varconnectorBuilder = new ConnectorBuilder(); varcustomAuthenticator = new CKFinderAuthenticator(); bağlayıcıBuilder .LoadConfig() //yapılandırmayı Web.config dosyasından yükleyin .SetAuthenticator(customAuthenticator) // önceden tanımlanmış kimlik doğrulayıcı.SetRequestConfiguration((request, config) = > ( config.LoadConfig(); )); //her bir istek için yapılandırmayı tanımlayın //bağlayıcının bir örneğini oluşturun var bağlayıcı = bağlayıcıBuilder.Build(connectorFactory); // boru hattı uygulamasına bir bağlayıcı ekleyin.UseConnector(connector); )) ))
Bu, sunucu tarafının yapılandırmasını tamamlar. Artık sayfadaki CKFinder istemcisini CKEditor ile entegre ediyoruz.
@using (Html.BeginForm("Index", "Home", FormMethod.Post)) ( ) document.addEventListener("DOMContentLoaded", function (event) ( var editor = CKEDITOR.replace("content1"); CKFinder.setupCKEditor (editör));
Tüm scriptler doğru bağlanmışsa ve bağlayıcı sunucu tarafında yapılandırılmışsa, dosya sistemine kullanıcının tarayıcısından CKFinder aracılığıyla erişeceğiz.
Web.config dosyasındaki bağlayıcı ayarlarına bağlı olarak, dosya ve klasörleri işleme (oluşturma, taşıma vb.) izinlerini değiştirebiliriz.
Lütfen yalnızca CKFinder'ın temel yapılandırmasına baktığımızı unutmayın. Buna ek olarak, günlük kaydı, dosya önbelleğe alma, çeşitli eklentiler (örneğin indirilen görüntülere filigran ekleme) vb. ekleyebilirsiniz. Bununla ilgili daha fazla bilgiyi resmi belgelerde okuyabilirsiniz.
