TinyMCE « Ehocam.Com

27Jan/0918

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.

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.

Ş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.

Tagged as: TinyMCE, What You See Is What You Get, WYSIWYG Leave a comment

Comments (18) Trackbacks (0) ( subscribe to comments on this post )

ismet
July 23rd, 2009 - 18:02
kardes bunu php de nasıl yapacagız peki?
Ehocam
July 29th, 2009 - 15:25
http://wiki.moxiecode.com/index.php/TinyMCE:PHP_Example adresinde bir örnek verilmiş dostum
Ankara Web Tasarım
October 2nd, 2009 - 22:47
Ç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

Ehocam
October 3rd, 2009 - 18:48

�

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.

�

Ehocam
October 3rd, 2009 - 18:53

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 --

�

Mikail
June 4th, 2010 - 13:28
Merhabalar Hocam bunu nasıl asp.nette kullanacaz?
Ehocam
June 5th, 2010 - 14:37
merhaba @Mikail;
dostum buradaki linkte örnek bir çalışma yapılmış. Sorun yaşaman durumunda lütfen buraya yaz. Sana yardımcı olurum.
ali
January 26th, 2011 - 10:29
sayın hocam ben de asp.net e tinymce editörünün eklenmesini ayrıntılı biçimde anlatmanızı istirham ediyorum.
Ehocam
January 27th, 2011 - 03:52
@ali;
Elbette yazarım. Taslaklara kaydettim. Önerin için teşekkürler.
İyi çalışmalar.
ali
January 28th, 2011 - 23:28
ilginize teşekkürler
Fatih KARATAŞ
March 4th, 2011 - 12:27
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ı?
Ehocam
March 4th, 2011 - 13:10
@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.
Fatih KARATAŞ
March 4th, 2011 - 13:17
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?
Vildan
April 8th, 2011 - 15:50
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?
Ehocam
April 8th, 2011 - 17:39
@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.
ayse
May 28th, 2011 - 13:46
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
Ehocam
May 28th, 2011 - 22:07
Hocam dosyaların dizin yapılarını yanlış vermiş olabilirsiniz. http://tinymce.moxiecode.com/download/download.php buradan örnek uygulamayı indirebilirsiniz.
ayse
May 30th, 2011 - 20:24
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