TinyMCE

Bu yazımda size TinyMCE editörünün sayfamıza nasıl eklendiğini ve diğer fonksiyonlarını etkin bir şekilde nasıl kullanacağımızı göstereceğim. Önceden yazmış olduğum buradaki genel tanıtımı okumanızı öneririm.

TinyMCE editörüne buradaki sayfasından , projeniz için kullanacağınız biçimdeki şekline buradan ulaşabilirsiniz.

Dosyamızı buradan indirdikten sonra ilk olarak çalışma yapacağımız klasörü düzenlememiz gerekiyor. Yapacağınız projelerde düzenli çalışmanız sizin projeyi yönetme açınızdan kolaylık sağlayacaktır.

Benim genel olarak çalışma şeklim şu şekildedir. Anaklasörümün içinde sayfamın öğelerine yer veririm. Mesela resimler, Css klasörüm, Js klasörüm, Eklentiler klasörüm, Template klasörüm, Editörler klasörüm burada yer alır.

tinymce_737_1

Dosyamızı indirdiğimizde karşımıza tinymce adlı bir klasör çıkacaktır. Bu klasörünün hemen altında examples ve jscript adında 2 tane daha klasör göreceksiniz. Jscript klasörünün içine girip tiny_mce klasörünü kopyalayıp yukarıdaki gibi bir çalışma şekli oluşturun. Bunu eğer pratik hale getirirseniz ilerde yazacağınız materyal kodları kolaylıkla entegre edebilirsiniz.

Ornek1.asp ve Ornek2.asp adında iki tane dosya oluşturun. TinyMCE editörünü sayfaya eklemek ve kullanmak son derece basit bir işlem. Birazdan bunu göreceksiniz.

Ornek1.asp, TinyMCE editörününün görüldüğü sayfa olacaktır. Ornek2.asp ise Ornek1.asp’de bulunan editörümüzün içeriğini girdikten sonra başka sayfalarda o içeriği nasıl alacağımızı gösteren sayfa olacaktır.

TinyMCE sayfaya eklemek için 2 tane kolay yapılması gereken işlem var. Birinci işlem <head></head> etiketleri arasına yerleşecek olan editörü sayfamıza eklemek için kullanacağımız Javascript kodlarıdır. Ayrıca editörü özelleştirirken buradaki kodlar üzerinde oynama yapacağız. İkinci işlemimiz ise bir <form></form> etiketi ve içerisine bir <textarea> kutusu oluşturmak olacaktır. Ben size zaten bunun kodlarını vereceğim. Ezberlemenize gerek yok.

Hemen sayfamıza editörü ekleyelim. Gerekli standart, basit olan kodumuz aşağıda yer almaktadır. Bunu ornek1.asp içine yapıştırın.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Örnek1 - TinyMCE Editörünü Sayfaya Ekleme ve İçeriği Alma</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>

<body>
<!-- Basla : TinyMCE Editör -->
<form method="post" action="ornek2.asp">
<textarea name="content" cols="50" rows="15">Burası İlk Yüklendiğinde Çıkacak Olan Yazıdır. <b>Örnek</b> www.ehocam.com gibi</textarea>
<input type="submit" value="Save" />
</form>
<!-- Bitir : TinyMCE Editör -->
</body>
</html>

Yukarıdaki kodu ornek1.asp’ye yerleştirdiğinizde karşımıza basit TinyMCE çıkması gerekiyor. Eğer çıkmazsa büyük ihtimal klasörlerin yerlerinde yanlışlık yapmışsınız demektir. Tekrar kontrol ediniz. Yukarıdaki kodlar çalıştırdığınızda aşağıdaki resim gibi olmalıdır.

tinymce_737_3

Şimdi ki aşamamız ise, yazdığımız verileri başka sayfalardan alma olsun. Onun için <textarea> kutusuna verdiğiniz isim önem arz ediyor. Örneğin yukarıda ben <textarea name=”content” cols=”50″ rows=”15″> ile content adında bir <textarea> kutusu oluşturmasını söyledim. O halde sayfamızdan veri alırken <textarea> kutusuna verdiğimiz ismi kullanıyoruz. Aşağıdaki kod ornek2.asp içindir.

<%
response.Write(request.form("content"))
%>

Bu şekilde sayfamızın içeriğini alabiliyoruz. Şimdi de biraz özelleştirme yapalım. Bunun için kendi sayfasında ki örnekler bölümünü inceleyebilirsiniz veya indirdiğiniz sıkıştırılmış dosyanın içerisinde ki examples klasörüne gözatabilirsiniz. Sorularınızı yorumlar kısmında yazarsanız hemen cevaplayabilirim.

This entry was posted in 3.Part Web Uygulamaları and tagged , , . Bookmark the permalink.

18 Responses to TinyMCE

  1. ismet says:

    kardes bunu php de nasıl yapacagız peki?

  2. Çağdaş, bu editörü nasıl TR yapacağımızı ve template veya kapalı özelliklerini nerden açacağımızı da anlatırmısın

  3. Ehocam says:

     

    • http://tinymce.moxiecode.com/download_i18n.php sitesinden türkçe xml yamasını indiriyorsun.
    • /tinymce/jscripts/tiny_mce/langs/
      /tinymce/jscripts/tiny_mce/themes/advanced/langs/
      /tinymce/jscripts/tiny_mce/plugins/<pluginname>/langs/
      Yukarıdaki dizinlere indirdiğin xml dosyalarını atıyorsun.

    • <script type="text/javascript">
      	
      tinyMCE.init({
      		language : "tr", 
                         mode : "textareas",
                         theme : "simple"
      		
      	});
      </script>
      <!-- /TinyMCE -->
      Yukarıdaki gibi language kısmında istediğin dili seçiyorsun. 


     

  4. Ehocam says:

    Template konusunda ise bu şekilde oluyor. Örneğin iki tane varolan seçenekleri var. Biri gelişmiş özellikteki görünümü, diğeri ise daha basit yapılmış örneği. Seçerken de şu şekilde yapman gerekiyor.

    Basit görünüm için :

    <script type="text/javascript">
    
    tinyMCE.init({
    		language : "tr",
                       mode : "textareas",
                       theme : "simple"
    
    	});
    </script>
    <!-- /TinyMCE --

    Gelişmiş için :

     

    <script type="text/javascript">
    
    tinyMCE.init({
    		language : "tr",
                       mode : "textareas",
                       theme : "advanced"
    
    	});
    </script>
    <!-- /TinyMCE --

     

  5. Mikail says:

    Merhabalar Hocam bunu nasıl asp.nette kullanacaz?

  6. Ehocam says:

    merhaba @Mikail;

    dostum buradaki linkte örnek bir çalışma yapılmış. Sorun yaşaman durumunda lütfen buraya yaz. Sana yardımcı olurum.

  7. ali says:

    sayın hocam ben de asp.net e tinymce editörünün eklenmesini ayrıntılı biçimde anlatmanızı istirham ediyorum.

  8. Ehocam says:

    @ali;

    Elbette yazarım. Taslaklara kaydettim. Önerin için teşekkürler.

    İyi çalışmalar.

  9. ali says:

    ilginize teşekkürler

  10. S.A.
    üstad indirme işlemini verdiğin linktenyapamıyorum. Kendi sitesindenden indirdiğimde resim upload kısmı yok. senin verdiğinde resim upload varmı?

  11. Ehocam says:

    @Fatih KARATAŞ;

    merhaba hocam. TinyMCE içinde default olarak bir resim upload eklentisi yok. Onun için satın alman veya ücretsiz eklentileri kurman gerekiyor.

    Lisanslı olarak kendi eklentisini (torrent’de bulabilirsin 🙂 ) MCImageManager’i öneririm.

    İyi çalışmalar.

  12. MCImageManager tek domain için 32€ para istiyorlar bence makul değil 🙂
     
    torrent de arıyorum ama karşıma hep resim upload olamayan standart sürüm geliyor 🙂
     
    bir tan bulmuştum ama rusçaydı. dil paketi yükledik image manager rusça kaldı bir türlü ingilizce yapamadık.
    torrent varsa verirmisiniz?

  13. Vildan says:

    Merhabalar,
    Projemde mce editör kullanıyorum fakat text boxdaki text i  alırken türkçe karakterleri değiştirerek kaydediyor…Bu sorunu nasıl çözebilirm?

  14. Ehocam says:

    @Vildan;

    Karakter kodlamasını kontrol etmeniz gerekir. Normalde, TinyMCE gibi editörler varsayılan olarak UTF8 kodlamasını kullanırlar. Bundan dolayı karakter değişimleri ortaya çıkabilir.

    Sorun olursa lütfen kodlarla birlikte burada paylaşınız.

  15. ayse says:

    Hocam yazdıklarınızı uyguladım ancak sadece textarea görünüyor B I U yada fontlar geri tusu silgi resmi hicbiri görünmüyor. tarayıcı olarak firefox kullanıyorum yardımcı olursanız sevinirim.
    İyi çalısmalar

  16. Ehocam says:

    Hocam dosyaların dizin yapılarını yanlış vermiş olabilirsiniz. http://tinymce.moxiecode.com/download/download.php buradan örnek uygulamayı indirebilirsiniz.

  17. ayse says:

    Merhaba,
    Yardımcı olduğunuz için çok teşekkür ederim. CKEditör entegre ettim umduğumdan daha iyi oldu path de sorun varmıs editörün içindeki editörü kopyalamadığımdan kaynaklanıyormuş bu arada dil olarak şu an için Asp.net ve C# kullanmaya çalışıyorum.
    İyi  çalışmalar

Leave a Reply

Your email address will not be published. Required fields are marked *