10 Kasım 2011 Perşembe

Ckeditor araçlarını kodla oluşturmak

ckeditör kurulduktan sonra üzerinde görülecek olan düğmeleri kodla değiştirmek kolayca mümkün
örneğin bu kodlar page_load olayının içine yazılabilir
ckeditor.config.toolbar = new object[]
{
                    new object[] { "Source", "-", "Save", "NewPage", "Preview", "-", "Templates" },
                    new object[] { "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print", "SpellChecker", "Scayt" },
                    new object[] { "Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat" },
                    new object[] { "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" },
                    "/",
                    new object[] { "Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript" },
                    new object[] { "NumberedList", "BulletedList", "-", "Outdent", "Indent", "Blockquote", "CreateDiv" },
                    new object[] { "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock" },
                    new object[] { "BidiLtr", "BidiRtl" },
                    new object[] { "Link", "Unlink", "Anchor" },
                    new object[] { "Image", "Flash", "Table", "HorizontalRule", "Smiley", "SpecialChar", "PageBreak", "Iframe" },
                    "/",
                    new object[] { "Styles", "Format", "Font", "FontSize" },
                    new object[] { "TextColor", "BGColor" },
                    new object[] { "Maximize", "ShowBlocks", "-", "About" }
};

Bu sayede gelismis bir editore sahip olabilirsiniz.
Biraz daha basit bir şeyler isterseniz.
ckeditor_ozet.config.toolbar = new object[]
{
                    new object[] { "Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript" },
                    new object[] { "Styles", "Format", "Font", "FontSize" },
                    new object[] { "TextColor", "BGColor" },
};

CKEditor için Ckfinger Kurulumu .Net ile nasıl yapılır.

Ckeditör kurulumu yaptığınızı varsayarak Ckfinder kurulumunu yapmayı ve böylece sunucunuza CKeditor kullanarak dosya göndermeyi inceleyebiliriz.
1- http://ckfinder.com/download adresine girerek aspnet sekmesinden download zip diyerek zip dosyasını indirin.
2-zip dosyasından ckfinder klasorunu projenizin ana dizinine kopyalayın.daha sonra
\ckfinder\bin\Release\CKFinder.dll dosyasını kendi asp.net projenizin bin dizini altına kopyalayın
3.Visual studioda References kısmından bin dizini altına kopyaladığınız CKFinder.dll dosyasını referanslarınıza ekleyin.(Add references>browse>../bin/CKFinder.dll)
4.Sonra Asp.net projemize eklediğimiz ckfinder klasörü altındaki config.ascx dosyasını açın.
CheckAuthentication() fonksiyonundaki return false; değerini return true; olarak değiştirelim.
*Bu değişiklikler bazı sorunlara neden olabilir.CheckAuthentication() fonksiyonundaki uyarıya dikkat edin.
 5.SetConfig()  fonksiyonuna gelelim ve aşağıdaki değişkenleri kendi isteğimize göre geliştirelim.
BaseUrl = "/resim/";
BaseDir = "C:/inetpub/vhosts/sitem.com/httpdocs/resim/";
BaseUrl bizim ana dizindeki resimleri koyacağımız dosyanın adı
BaseDir o klasörün fiziksel yolu olduğunu görebilirsiniz.
Resimleri ekleyeceğiniz dosyalara plesk panelden yada kullandığınız panelde yazma izni vermeyi unutmayın!!!
BaseDir yolunu plesk panelde yetki verilen alandan görebiliriniz.Yada hosting firmanızdan rica edebilirsiniz.
6.Ckeditoru kullandığımız asp.net dosyasındaki kod kısmını açıp. Page_Load kısmına aşağıdaki kodları ekleyelim.
 CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
_FileBrowser.BasePath = "ckfinder/";
_FileBrowser.SetupCKEditor(ckeditor);
bu kodları eklediğimizde ckeditor olarak tanımladığımız CkEditor nesnemizdeki resim ekleme ikonuna tıkladığımızda Sunucuyu Gez Düğmesini göreceksiniz. Ve Artık Resimleri sunucuya gönderebilirsiniz.

Javascript ile sayfa adını almak

web sitesi adresinizin www.tersduz.com/icerik.aspx olduğunu farz edin bu
elimizdeki javascript kodu bize icerik.aspx sayfa adının dönmesini sağlamakta.
        var sPath = window.location.pathname;

        //var sPage = sPath.substring(sPath.lastIndexOf('\\') + 1);

        var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

Aşağıdaki kodlarda örneğin bir master page sahibim ve bu master page içerisinde
<ul>

            <li><a id="anasayfa"
href="default.aspx" class="current">Ana
Sayfa</a></li>
            <li><a id="matematikdersleri"
href="dersler.aspx">Matematik Dersleri</a></li>
            <li><a id="siteharitasi"
href="siteharitasi.aspx">Site Haritası</a></li>
            <li><a id="katkidabulunanlar"
href="katkida_bulunanlar.aspx">Katkıda Bulunanlar</a></li>
            <li><a id="okulumuz"
href="http://www.cumhuriyetioo.edu.tr">Okulumuz</a></li>

</ul>  

eğer kullanıcı sayfalar birisine tıkladığında örneğin dersler.aspx sayfasına
tıkladığında current classının anasayfadan gidip matematikderslere geçmesi
gerekli bunun için geliştirmiş olduğum
javascrip kodu şöyle oldu.
<script type="text/javascript">
    $(document).ready(function () {
         var sPath = window.location.pathname;
        //var sPage = sPath.substring(sPath.lastIndexOf('\\')
+ 1);
        var sPage = sPath.substring(sPath.lastIndexOf('/') +
1);
        if (sPage == "") {  
$("#anasayfa").addClass("current");        
$("#matematikdersleri").removeClass("current");
$("#siteharitasi").removeClass("current");
$("#katkidabulunanlar").removeClass("current");           
$("#okulumuz").removeClass("current");
        }
        else if (sPage == "dersler.aspx") {
$("#anasayfa").removeClass("current");
$("#matematikdersleri").addClass("current");
$("#siteharitasi").removeClass("current");           
$("#katkidabulunanlar").removeClass("current");
$("#okulumuz").removeClass("current");
        }
        else if (sPage == "siteharitasi.aspx") {
$("#anasayfa").removeClass("current");
$("#matematikdersleri").removeClass("current");           
$("#siteharitasi").addClass("current");
$("#katkidabulunanlar").removeClass("current");

$("#okulumuz").removeClass("current");
        }
        else if (sPage == "katkida_bulunanlar.aspx") {
$("#anasayfa").removeClass("current");
$("#matematikdersleri").removeClass("current");
$("#siteharitasi").removeClass("current");
$("#katkidabulunanlar").addClass("current");
$("#okulumuz").removeClass("current");
        }
    });
</script>


Eğer menunuz programatik olarak üretiliyorsa örenğin bir repater içerisinde
üretilen ul-li yapısı gibi
<asp:Repeater ID="menu_rpt" runat="server"
DataSourceID="sqlkaynak3">
<HeaderTemplate>
<li><a href="default.aspx" id="menu00"
class="current"><span></span>Anasayfa</a></li>          
</HeaderTemplate>             
<ItemTemplate>           
<li><a href='<%# "konsol.aspx?kategori=" + Eval("id") + "&konsol=" + Eval("adi")
%>' id='<%# "menu" + Eval("id") %>'><span></span><%# Eval("adi") %></a></li>     
</ItemTemplate>

 </asp:Repeater>
ozaman jquery kodlarımız asp.neet için şöyle olmalı
<script type="text/javascript">
    $(document).ready(function () {
        var secili = "menu" + '<%= lblsecilioge.Text %>';
  if (secili != "menuanasayfa") {
            $("#" + secili + "").addClass("current");
$("#menu00").removeClass("current");
        }
        else {
$("#menu00").addClass("current");

        }
    });

</script>

buradaki lblsecilioge.Text içeriği ise görünmeyen bir textbox olup içi söylece
dolduruluyor.
string secili = Request.QueryString["kategori"].ToString();
lblsecilioge.Text = secili;