Şimdi Ara

TinyMce Editör Entegre Ediyoruz..(Anlatım)

Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
2 Misafir - 2 Masaüstü
5 sn
7
Cevap
0
Favori
4.250
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • Arkadaşlar bir çok arkadaşımız phpye başlıyor herşey güzel fakat editörlerden bihaberler. Bilmeyen arkadaşlara öncelikle editörlerden bahsedeyim..
    İnternet Dünyasında bir sürü zengin içerik editörü bulunmakta.Kendimize uygun olan, kullanış bakımından da kolay olan editörü seçip, web sayfamızı, kolayca, kontrol panelinden zengin içerik olarak güncelleyebiliriz.Web sayfamızı hiç web tasarım programına ihtiyaç duymadan internet bağlantılı herhangibir bilgisayardan güncelleyebiliriz.
    Zengin içerik editörlerinin avantajlarından bazılarını sayarsak

    • Yazdığımız yazıyı kalınlaştırabilir, altı çizili üstü çizili veya italik yazdırabiliriz.
    • Kolayca resim ekleyebiliriz resim büyük geldiğinde resmi orantılı olarak küçültebiliriz.
    • Tablolarla daha düzenli şekilde çalışabiliriz tablo oluşturduktan sonra tablo biçimlendirme yapabiliriz.
    • İstediğimiz yazıya link verebiliriz.Farklı veya aynı sayfada açılması gerektiğinde bunu ayarlayabiliriz.
    • Word gibi kelime işlemci programlarında ki özelliklerin çoğunu kod yazmadan görsel bir arayüzle kullanabiliriz.(Mesela Madde işaretleme imi)
    • Font değiştirebiliriz.Renk değiştirebiliriz.
    • Layerlarla çalışabiliriz.
    • Biryerden alıntı yaptığımızı gösterebiliriz.
    • Flash gibi animasyonlar koyabiliriz.
    • Yazdığımız metni de yazıcıdan aynen çıktı alabiliriz.


    Örnekler çoğaltılabilir.

    Bu editörleri kullanabileceğimiz alanlar
    Özellikle içerik ekleme ve güncelleme için Yönetici kontrol panellerinde kullanabiliriz.
    Yaptığımız bir haber sitesini güncellemek için editör panelinde kullanabiliriz.
    Ziyaretçi defterlerinde kullanabiliriz ama onun için belirli güvenlik tedbirlerini almamız gerekli.Çünkü bu editörü kullanıcılara kod temizleme yaptırmadan kullandırırsak html kod kullanıp sayfamızı başka bir sayfaya yönlendirebilirler.Kod temizlemeyide anlatacağım.

    Editörümüzün görünümü şu şekildedir;
     TinyMce Editör Entegre Ediyoruz..(Anlatım)


    Tiny_mce editörümüzün resmi download adresihttp://tinymce.moxiecode.com/download.php

    Editörü sayfamıza entegre ederken sayfamızda 1 tane textarea olduğundan emin olunuz.
    <textarea name="editor" ></textarea>

    Aynı sayfada birde entegre için gereken kodları yazıyoruz;

    <script type="text/javascript" src="[b]editor/tiny_mce.js[/b]"></script> 
    <script type="text/javascript">
    tinyMCE.init({
    // Editörün Genel Ayarları
    mode : "textareas",
    theme : "advanced",
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,
    contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

    // Tema Ayarları
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,
    code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    // CSSimizi çekiyoruz
    content_css : "css/content.css",

    // link/image/media/template için diyalog kutularımızı çekiyoruz
    template_external_list_url : "lists/template_list.js",
    external_link_list_url : "lists/link_list.js",
    external_image_list_url : "lists/image_list.js",
    media_external_list_url : "lists/media_list.js",

    template_replace_values : {
    username : "admin",
    staffid : "test"
    }
    });
    </script>
    <!-- /TinyMCE -->



    Sayfamızı kaydedip açtığımızda textarea form aracımızın zengin editöre dönüştüğünü görüyoruz







  • Teşekkürler.Hemen deniyorum
  • TinyMCE gerçekden başarılı bir editördür 3 büyük browserda sorunsuz çalışan nadir editörlerdendir hatta bu kadar kapsamlı ve 3 browserdada çalışan tek editör denilebilinir. bazı ücretli editörler bile tüm browserlarda çalışamamaktadır. içlerinde wordpress'in de bulunduğu birçok hazır sistemde kullanılmaktadır

    ek bilgi olarakda

    bu kısımda editördeki düğmeler tanımlanmaktadır
    "|" karakteri ayraç anlamındadır kendi istekleirnize göre değiştirip kullanabilirsiniz
     
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,
    code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",





  • bu indirdiğimizde ne yapacağız anlamadım oluşturduğumuz sayfalara kodu yerleştirdiğimizde bişey olmuyor.
    kısacası hiçbişey anlamadım örneklerinden güzel oldğu anlaşılıyor ama
  • yerleştirdiğin sayfaların yanında editor diye klasör olucak.ordan yukarıdaki kodda mesela editor/tiny_mce.js yi bulduracaksın.Onu bulduktan sonra otomatik olarak çıkacaktır.
  • güzel paylaşım repini verdim hayrını gör emege saygi
  • hocam html sayfasına nasıl entegre ediyoruz onuda anlatırmısınız?
  • Yapay Zeka’dan İlgili Konular
    Daha Fazla Göster
    
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.