ckeditor ile ilgili sorunlar Eklentileri CKEditor'a yükleme. JavaScript Kullanarak Textarea Öğelerini Değiştirin

Her şey hazır! Yukarıdaki örnekte, CKEditor bir metin alanına bağlanır "içerik1" bir HTML formunun içinde. Ayrıca, bu alanın içeriği sunucuya gönderilecektir.

CKEditor için standart işlevselliğini artıran birçok eklenti olduğunu belirtmekte fayda var. Eklentileri kendiniz de yazabilirsiniz (bu işlem sitedeki resmi belgelerde daha ayrıntılı olarak açıklanmaktadır). Sayfaya video barındırmadan video yerleştirmenizi sağlayan düzenleyiciye bir eklenti ekleyelim Youtube.

Bu yazının yazıldığı sırada, tüm eklentiler sitede ayrı bir bölümde bulunabilir. İlgilendiğimiz eklenti şu adreste bulunuyor: https://ckeditor.com/cke4/addon/youtube

Bundan sonra, editör araç çubuğunda yeni eklenti ile çalışmanıza izin veren yeni bir düğme görünecektir.

CKFinder'ı kurma

Şimdi CKFinder dosya yöneticisi ile ilgilenelim. Dosyalar (ö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ından da yapılandırmamız, yani bazı kitaplıkları bağlamamız gerekecek. ve birkaç yöntem uygulayın.

ASP.NET uygulamaları için bağlayıcıyı yapılandırmaya yönelik resmi belgeler şu adreste bulunur: https://ckeditor.com/docs/ckfinder/ckfinder3-net/

Sitede yapılandırdığımız ve manuel olarak indirdiğimiz CKEditor düzenleyicisinden farklı olarak CKFinder'ı projeye doğrudan Visual Studio üzerinden . İş için gereken minimum paket seti şuna benzer:

1. CKSource.CKFinder- JavaScript istemcisi, istemci tarafında bağlanır
2. CKSource.CKFinder.Connector.Core- sunucuda CKFinder bağlayıcısını sağlayan ana ve anahtar kitaplık
3. CKSource.CKFinder.Connector.Config- bu kitaplık, CKFinder'ı ortak bir . Lütfen bu paketi kurduktan sonra yapılandırma dosyasının nasıl değişeceğine dikkat edin, şimdi CKFinder için tüm ayarlar var.
4. CKSource.CKFinder.Connector.Host.Owin- bu kitaplık, bağlayıcıyı uygulamada bir OWIN bileşeni olarak bağlamanıza olanak tanır. Sunucu tarafında, CKFinder tam olarak bu spesifikasyona göre çalışır, yani. .NET için Açık Web Arayüzü
5. Microsoft.Owin.Host.SystemWeb- hemen OWIN ana bilgisayarını veya sunucusunu kurun
6. CKSource.FileSystem.Local- bu bileşen, sunucudaki dosya sistemiyle çalışmak için destek ekler

Gerekli tüm bileşenleri kurduktan sonra sunucu tarafını yapılandırmaya başlayabilirsiniz.

İlk olarak, CKFinder dosya sistemine yalnızca kimliği doğrulanmış kullanıcıların erişimi olmasını gerektirir, yani bu dosya yöneticisi aracılığıyla sunucuya yapılan her istekte, bu kullanıcının sunucudaki dosyalara erişim hakkına sahip olup olmadığını ona söylemeliyiz.

Bunu yapmak için özel bir arayüz ve içinde gelen tüm istekleri doğrulayan bir yöntem uygulamamız gerekiyor.

CKFinderAuthenticator.cs

Genel sınıf CKFinderAuthenticator: IAuthenticator(genel Görev AuthenticateAsync(ICommandRequest commandRequest, CancellationToken CancellationToken) ( var user = new User(true, new List) ()); dönüş Task.FromResult((IUser) kullanıcısı); ))

Yukarıdaki örnekte, her seferinde kimliği doğrulanmış (gerçek bayrak) ve hiçbir rolü olmayan (boş liste) sahte bir kullanıcı döndürüyoruz. Yani, her zaman dosya sistemine erişim haklarına sahibiz. Gerçek bir projede bu konunun elbette daha ciddiye alınması ve bu yöntemi mevcut kullanıcı doğrulama ve yetkilendirme sistemi ile birleştirmesi gerekiyor.

Ad alanı CKEditor ( public class Startup ( public void Configuration(IAppBuilder app)) ( // FileSystemFactory.RegisterFileSystem bağlayıcısı için dosya sistemini kaydedin (); //uygulamada bir yol bildir ve onu bir bağlayıcıya eşle //CKFinder istemci JS kitaplığı bu yoldan bir bağlayıcı görmeyi bekler app.Map("/ckfinder/connector", SetupConnector); ) //Bağlayıcı private static void'i kurmak ve başlatmak için bir yöntem bildirin SetupConnector(IAppBuilder app) ( //Gerekli sınıfların örneklerini oluşturun var connectFactory = new OwinConnectorFactory(); var connectBuilder = new ConnectorBuilder(); var customAuthenticator = 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ıyı ayarlayın.SetRequestConfiguration((request, config) => ( config.LoadConfig(); ) ); //her ayrı 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); //bağlayıcıyı ardışık düzene ekleyin app.UseConnector(bağlayıcı); ) )

Bu, sunucu yapılandırmasını tamamlar. Şimdi CKFinder istemcisini sayfada CKEditor ile entegre edelim.

Tüm komut dosyaları doğru şekilde bağlanmışsa ve bağlayıcı sunucu tarafında yapılandırılmışsa, kullanıcının tarayıcısından CKFinder aracılığıyla dosya sistemine erişim sağlayacağız.

Dosyadaki bağlayıcı ayarlarına bağlı olarak Web.config dosya ve klasörleri işlemek için izinleri değiştirebiliriz (oluşturma, taşıma, vb.).

CKFinder'ın yalnızca temel yapılandırmasını dikkate aldığımızı not ediyorum. Buna ek olarak, günlüğe kaydetme, dosya önbelleğe alma, çeşitli eklentiler (örneğin, yüklenen resimlere filigran ekleme) vb. Bununla ilgili daha fazla bilgiyi resmi belgelerde okuyabilirsiniz.

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 çubuklarını içerir:

	Görünüm Modunu Değiştirme
	Bir Makale Şablonu Yazdırma ve Seçme
	Panoyla çalışma (kes, kopyala, yapıştır, geri al)
	Ara ve Değiştir
	Formlar Oluşturun
	Spoiler (daraltılmış metin) ve sayfa sonları ekleme
	Metin stilini değiştir
	Paragraf biçimlendirme
	Bağlantı ekle
	Üçüncü Taraf Sitelerden Medya İçeriğini Gömme
	Nesneleri yapıştırma
	Biçimlendirme stili seçme
	Paragraf biçimlendirmesini seçme
	Yazı tipi seçimi
	Bir yazı tipi boyutu seçme
	Metin veya arka plan rengi seçin
	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 istatistikleri hakkında bilgi içerir:

Görünüm Modunu Değiştirme

Editörün görünüm modu değiştirme paneli aşağıdaki düğmeleri içerir:

Bir Makale Şablonu Yazdırma ve Seçme

Bir makale şablonunu yazdırmak ve seçmek için panelde aşağıdaki düğmeler bulunur:

Pano ile çalışma

Düzenleyicide aşağıdaki pano işlemleri mevcuttur:

Ara ve Değiştir

Bul ve Değiştir araç çubuğu aşağıdaki düğmeleri içerir:

Arama

"Ara" düğmesine tıkladığınızda bir arama penceresi açılır:

"Bul" alanına istenilen metin parçası girilir.

Aşağıdaki seçenekler mevcuttur:

• Metin boyunca. Bu seçenek etkinleştirilirse makalenin sonuna gelindiğinde arama baştan devam eder. Bu seçenek devre dışı bırakılırsa, makalenin sonuna gelindiğinde arama sona erer.

Arama yapmak için istediğiniz parçayı girmeli, gerekli arama seçeneklerini etkinleştirmeli ve "Bul" düğmesini tıklamalısınız. Editör, makale metninde bulunan ilk parçayı arayacak ve vurgulayacaktır. "Bul" düğmesine tekrar her bastığınızda, editör metinde daha fazla arama yapacak ve bir sonraki bulunan parçayı vurgulayacaktır.

Yenisiyle değiştirme

"Değiştir" düğmesine tıkladığınızda, bir metin parçasını değiştirmek için bir pencere açılır:

"Bul" alanına istenilen metin parçası girilir. "Değiştir" alanında, istediğiniz parçayı değiştirmek istediğiniz metin.

Aşağıdaki seçenekler mevcuttur:

• Kayıt hassas. Bu seçenek etkinleştirilirse, arama, aranan parça karakterlerinin durumunu dikkate alacaktır.
• Sadece tüm kelime. Bu seçenek etkinleştirilirse, düzenleyici girilen parçayı bir bütün olarak arayacaktır. Arama sonuçları, girilen parçanın parçası olduğu kelimeleri içermeyecektir.
• Metin boyunca. Bu seçenek etkinleştirilirse makalenin sonuna gelindiğinde arama baştan devam eder. Bu seçenek devre dışı bırakılırsa, makalenin sonuna gelindiğinde arama sona erer.

Bir değiştirme gerçekleştirmek için "Bul" ve "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üğmesini tıklamanız gerekir. "Değiştir" düğmesine tıkladığınızda, editör makale metninde bulunan ilk parçayı arayacak ve değiştirecektir. "Değiştir" düğmesine tekrar her bastığınızda, editör metinde daha fazla arama yapacak ve bir sonraki bulunan parçayı değiştirecektir.
"Tümünü Değiştir" düğmesine tıkladığınızda, editör derhal makalenin metni boyunca gerekli parçayı arayacak ve değiştirecektir.

Formlar Oluşturun

Formlar, bir tarayıcı penceresinde kullanıcı girişi yapmak, bunları işleyiciye iletmek ve gerekirse işleme sonuçlarını görüntülemek için tasarlanmıştır. Örneğin: kullanıcı kayıt formu, geri bildirim formu vb.

Form oluşturma paneli aşağıdaki düğmeleri içerir:

form

"Form" düğmesine tıklandığında yeni formun ayarlar penceresi açılır.

Form ayarları penceresi aşağıdaki alanları içerir:

onay kutusu

Onay kutusu, herhangi bir özelliği veya seçeneği etkinleştiren veya devre dışı bırakan kontrolleri görüntülemek için tasarlanmıştır. Böyle bir eleman 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 öğe için ayarlar penceresi açılır.

Onay kutusu öğesi ayarları penceresi aşağıdaki alanları içerir:

• Ad - öğenin isteğe bağlı adı. HTML kodunda name parametresi;
• Değer - benzersiz bir öğe tanımlayıcısı görevi görür. HTML kodunda value parametresi;
• Seçili - seçenek etkinleştirilirse, bu öğe varsayılan olarak kontrol edilecektir.

Radyo düğmesi

"Radyo düğmesi" öğesi, yalnızca birini seçebilme özelliğine sahip bir grup değeri görüntülemek için tasarlanmıştır. Şunlar. Bir grup içindeki öğeler birbirini dışlar. Her eleman 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 öğesinin ayarlar penceresi aşağıdaki alanları içerir:

• Bir grup içindeki öğeler aynı ada sahip olmalıdır.
• Değer - benzersiz bir öğe tanımlayıcısı görevi görür. HTML kodunda değer parametresi.
• Seçili - seçenek etkinleştirilirse, bu öğe varsayılan olarak kontrol edilecektir. Bir grup içinde bu özellik yalnızca bir öğe için etkinleştirilmelidir. Birkaç öğe için etkinleştirilirse, yalnızca sonuncusu işaretlenir.

Metin alanı

"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ı" düğmesine tıklamak, yeni alan için ayarlar penceresini açar.

• Ad - öğenin isteğe bağlı adı. HTML kodunda name parametresi.
• Değer - varsayılan olarak metin alanında görüntülenecek metni içerir. HTML kodunda değer parametresi.
• Alan genişliği (karakter olarak) - metin alanının karakter cinsinden giriş alanının uzunluğu. HTML kodunda size parametresi.
• Maks. karakter sayısı - metin alanına karakter olarak girilebilecek maksimum dize uzunluğu. HTML kodunda, maxlength parametresi.
• İçerik Türü - Metin alanının içerik türü. HTML kodunda type parametresi. Veriler sunucuya gönderilmeden önce belirtilen türe uygunluğu kontrol edilir.

Kullanılabilir içerik türleri:

• E-posta - metin alanı bir e-posta adresi içerir;
• Şifre - metin alanı şifreyi içerir;
• Arama - bir metin alanı, aranan metni girmek için tasarlanmıştır;
• Telefon numarası - metin alanı bir telefon numarası içerir;
• Metin - metin alanı normal bir dize içerir;
• Bağlantı - Metin alanı bir URL içerir.

Çok satırlı metin alanı

"Çok satırlı metin alanı" öğesi, kullanıcının birkaç satırdan oluşan metni girmesi için tasarlanmıştır. HTML kodunda bu eleman bir çift textarea etiketine karşılık gelir. "Çok satırlı metin alanı" düğmesine tıkladığınızda, yeni alan için ayarlar penceresi açılır.

"Metin alanı" öğesinin ayarlar penceresinde aşağıdaki alanlar bulunur:

• 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 kutusunda görüntülenecek metni içerir.

Açılır liste

Açılır liste öğesi, çoktan seçmeli bir liste veya bir açılır liste görüntülemek için tasarlanmıştır. HTML kodunda bu öğe, eşleştirilmiş bir seçim etiketine karşılık gelir. Listenin öğeleri, eşleştirilmiş seçenek etiketine karşılık gelir. "Açılır liste" düğmesine tıkladığınızda, yeni liste için ayarlar penceresi açılır.

Çoktan seçmeli liste 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 - satırlar halinde görüntülenen liste alanının yüksekliği. Boyut bire eşitse, bir açılır liste görüntülenecektir. Boyut belirtilmemişse, listenin görünümü "Birden çok 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ı ile çift olarak girilir. Listeye "Metin - Değer" çiftini eklemek için "Ekle" düğmesini tıklayın.
• Değer - sunucuya iletilen liste öğesinin değerini girmek için alan. "Metin" alanıyla birlikte girilir. Listeye "Metin - Değer" çiftini eklemek için "Ekle" düğmesini tıklayın.
• Ekle - girilen "Metin - Değer" çiftini listeye ekleme düğmesi.
• Düzenle - seçilen liste öğesini değiştirmek için 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çili liste öğesini bir seviye yukarı taşımak için düğme.
• Alt - seçili liste öğesini bir seviye aşağı taşımak için düğme.
• Seçildi olarak işaretle - düğme tıklandığında, listedeki seçili öğe varsayılan olarak seçili olarak işaretlenir. Öğenin 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 kaldırmak için düğme.
• Birden çok seçeneğin seçilmesine izin ver - özellik etkinleştirilirse, ctrl tuşu kullanılarak listede birden çok öğe seçmek mümkün olacaktır. Liste boyutu belirtilmemişse ve özellik devre dışı bırakılmışsa, bir açılır liste görüntülenecektir. Liste boyutu belirtilmemişse ve özellik etkinleştirilmişse, liste boyutu dört olarak ayarlanır.

Yazının sonu şöyle...

CKEditor, web sitenize, blogunuza veya forumunuza ücretsiz olarak ekleyebileceğiniz bir görsel düzenleyicidir. Açık kaynak kodludur ve en popüler CMS'de çalışır. Deneyimsiz web yöneticileri bile bu görsel düzenleyicinin kurulumunu halledebilir. Aslında, siteye CKEditor eklemek iki adımda gerçekleşir: önce arşivi sunucuya açarsınız ve ardından sayfa koduna birkaç satır eklersiniz. Ayrıntılı kurulum talimatları düzenleyici ile arşivde bulunabilir.

Kutudan çıktığı haliyle bu web sitesi uzantısı, giriş penceresini yeniden boyutlandırma, metni kopyalayıp yapıştırma, bağlantılar tasarlama, yazı tipini değiştirme, üst simge ve alt simge metinle çalışma, özel karakterler ekleme, bilgi kaynağı ekleme, resim ekleme, bağlantı ekleme özelliklerini destekler. , vb. Ayrıca. Sağlanan işlevsellik, seçilen CKEditor sürümüne bağlıdır. Üç tane var: Temel, Standart ve Tam. En "gelişmiş" sürümün işlevselliği sizin için yeterli değilse, eklentilerin yardımıyla editörün yeteneklerini genişletebilirsiniz.

Geliştiriciler, CKEditor'un görünümünü değiştirme olasılığını unutmadı. İki standart temadan hiçbiri zevkinize uymuyorsa, resmi web sitesinde ve üçüncü taraf özel kaynaklarında ek "dış görünümler" arayabilirsiniz. Yukarıdaki işlevlerin tümünün web yöneticilerine "tek" kullanım için tamamen ücretsiz olduğunu hatırlatırız. Görsel düzenleyicinin ticari lisanslı sürümleri de vardır.

Temel özellikler ve işlevler

• işlevsellik bakımından farklılık gösteren üç versiyonda dağıtılır;
• eklentiler tarafından "genişletilebilir";
• kurulumu çok kolaydır ve en popüler CMS'lerde çalışır;
• araç çubuğu temalarını değiştirmeyi destekler;
• tamamen ücretsizdir.

Bu sürümdeki yenilikler neler?

4.6.1 (08.12.2016)