CK Editor Kullanımı C# -1

Merhaba,
Bu yazımızda CKEditor kullanımından bahsedeceğiz.CKEditor nedir? diyebilirsiniz.Eğer siz de benim gibi şirketinizde editör arkadaşların kullanacağı arayüzler yazıyorsanız yolunuz bir Web Text Editor'e düşecektir.Yani yazarlar sizin yazdığınız web sayfasındaki yazı alanını kullanarak istediği yazıyı yazabilecek, yazılara MS Word'deki gibi style verebilecek araya imaj ekleyebilecek ve çıktı olarak da bir html elde edebilecekler. İşte tüm bu özellikleri sağlayan en iyi web yazı editörü bence CKEditor.Ayrıca CKEditor'e istediğiniz plug-in'i de yazabiliyorsunuz.Bir sonraki yazımızda da bundan bahsedebiliriz.

Bu arada ne dinlemeli ? :)

Şimdi CKEdior'u kullanan bir .Net web sayfası yapalım ve yazdığımız text'i bir label'e bastıralım.
Bunun için boş bir web sitesi oluşturuyoruz.

Ve gerekli css ve js 'ler için ckeditor.com 'dan download 'a geliyoruz , karşımıza üç seçenek çıkıyor:
Basic Package ,Standart Package ve Full Package ben önce standart paket indirmiştim ve işimi görmediği için daha sonra full package indirdim,yazıyı full package üzerinden anlatacağım.Şu anki versiyon 4.4.7 imiş..zip 'deki tüm klasörü alıp web projemize kopyalayalım burda CK editör için gerekli .css 'ler js'ler ve conig dosyaları dil destekleri vb. için gerekli olan dosyalar mevcut.

Ve Default.aspx adında bir sayfa oluşturalım head tagında aşağıadki referansları alalım .

<title>CK Editor sample</title>

</head>

Şimdi de bahsettiğimiz senaryo için Bir text area , buton ve label oluşturalım.

<body>

<div>

<asp:Label ID="Label1" Text="CK Editor Sample" runat="server"></asp:Label>

<br />

</textarea>

// Replace the <textarea id="editor1"> with a CKEditor

// instance, using default configuration.

// CKEDITOR.replace('BodyContent_editor1');

CKEDITOR.replace('<%=editor1.ClientID %>',

{

filebrowserBrowseUrl: '/ckfinder/ckfinder.html',

filebrowserImageBrowseUrl: './News.ashx/',

filebrowserFlashBrowseUrl: '/ckfinder/ckfinder.html?Type=Flash',

filebrowserUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',

filebrowserImageUploadUrl: './Upload.ashx',

filebrowserFlashUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash',

});

</script>

<asp:Button runat="server" Text="Show Text" ID="show_text" OnClick="show_text_Click" />

<asp:Label ID="lblNewsLong" runat="server"></asp:Label>

</div>

</form>

</body>

TextArea elementine dikkatinizi çekmek istiyorum.TextArea elemeninin ismini editor1 olarak adlandırdık ve onu kullanan bir javascript oluşturuduk bildiğiniz üzere .Net elementlerinin clinet isimleri değişkenlik göstereceği için CKEDITOR.replace metodunun içinde editor1 yazmadık,editor1.ClientID yazdık zaten web develope tool'lar ile bu elemente inspect ederseniz isminin editor1 olmadığını BodyContent_editor1 olduğunu görebilirsiniz.Bu küçük tüyou verdikten sonra eğer yazınıza dosya upload etmek ya da resim upload etmek istiyorsanız. filebrowserBrowseUrl: gibi alanları da doldurabilirsiniz. Bu kullanımı bir sonraki yazımda anlatacağım, bu yazımda sadece basitçe CKEditor kullanımını görelim.

Butonunun onclick event'ine gelelim ve aşagıdaki kodlamayı yapalım.

protected void show_text_Click(object sender, EventArgs e)

{

string desc = editor1.Value.ToString();

lblNewsLong.Text = Server.HtmlDecode(desc);

}

Burada desc alanını bilerek ayrıdım editor1.value'sunun html kodları da içerdiğini görmeniz için <br> vb gibi .Biz bunu label 'e bastırmadan önce HtmlDecode etmemiz gerekir bu işlemide ikinci satırda yapıyoruz.

İşte bu kadar , evet bu kadar basit şimdi projemizi çalıştıralım F5 ve çalışmadığını görelim :D

Editore birşeyler yazıp butona bastığımızda .Net 'in güvenliğine takılıyoruz. Diyor ki Request.Form değeri yukarıda az önce içerdiğim html taglarını içeriyor bu .Net için güvenli bir istek değil yukarıda da yazmış zaten "Dangerous" :) biz de bunu bilinçli yapacağımız için .aspx dosyamızda en başa ValidateRequest özellliğini false olarak setliyoruz ve bu hatadan kurtuluyoruz.

<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="Default.aspx.cs" Inherits="_Default" %>

Şimdi F5 diyip projemizi çalışırıp editor alanına bir şeyler yazıp "Show Text" butonuna tıklayıp yazdığımız aynı metni aşagıda Label alanında görebiliriz.

Elbetteki projenin tam halini GitHub'da bulabilirsiniz, sağlıkla kalın ,sporla kalın ;)

Author Description