TinyMCE

27Jan/095

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 (5) 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 --

No trackbacks yet.

« Winrar’ı Yakından Tanıyalım ? Nedir? – Nasıl Kullanılır? Xp’de Boot Dosyasını Tamir Etme Yöntemi »

Twitter

Php, Php'ye giriş, php'yi çalışır hale getirmek, php için gerekli programlar ... www.ehocam.com/php-ogreniyorum
IMAC almanın maliyeti 8000TL,Macbook almanın maliyeti 3000TL,Çin Malı DATRON’a Mac kurmanın değeri=Paha Biçilemez.
Php öğreniyorum :)
Youtube Açma Yöntemleri :(