Chrome 7.0+ Firefox 3.2+ Opera 9.5+ Explorer 8.0+

Merhaba,

Mevcut internet tarayıcınız güncel teknoloiler ile dizayn edilmiş web sitelerini görüntülemek için yeterli özellikleri sağlamıyor! cemkefeli.com daha iyi bir internet deneyimi yaşamanız için mevcut tarayıcınızı yukarıda önerilen daha güncel bir yazılım ile değiştirmenizi şiddetle öneriyor. Bu değişim yalnızca cemkefeli.com'u daha rahat bir şekilde gezinmenize yardımcı olmayacak, internet dünyasındaki yüz binlerce web sitesinde çok daha güzel bir deneyim yaşamanızı sağlayacaktır.

Teknolojiyi her zaman en üst seviyelerde takip etmeniz dileğiyle, teşekkürler...

Blogengine için TinyMCE editörünü özelleştirmek

by Cem Kefeli 13. October 2009 11:03

Blog EngineBlogengine.net kullananlar bileceklerdir ki Blogengine editör olarak TinyMCE'yi kullanmaktadır. Bazı ilginçlikleri ve cinslikleri olmasına rağmen yine de hoş, güzel ve fazlasıyla iş görür bir editör. Yalnız şu tuhaf ki Blogengine alt yapısı ile birlikte gelen editör özellikleri içerisinde birçok güzellik disable edilmiş durumda ve birçok plugin hali hazırda kullanımda değil. Örneğin preview, date-time, font color, highlighter color, template, link ve foto edit etme pencereleri gibi güzellikler olaya dahil edilmemiş. TinyMCE dosyaları /editors dizini altında tiny_mce klasör ismi ile bulunuyor. Bu özellikleri aktif etmeniz için gerekenler ise ilk önce en son sürümü buradaki adresten indirip az önce ismini verdiğim dizin içerisine yerleştirmek. Default olarak bütün plugin'ler indirdiğiniz paket ile birlikte geliyor. Bir diğer adım ise gereken editörü çağıran konfigürasyonu aşağıda verdiğim şekilde yapmanız.

/admin/TinyMCE.ascx  |  Gizle  |  Göster
<script type="text/javascript" src="<%=Utils.RelativeWebRoot %>editors/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
	// General options
	mode : "exact",
	elements : "<%=txtContent.ClientID %>",
	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, wordcount",
	 
	// Theme options
	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,
	 
	// Example content CSS (should be your site CSS)
	content_css : "<%=Utils.RelativeWebRoot %>Style.css",
	 
	// Drop lists for link/image/media/template dialogs
	template_external_list_url : "<%=Utils.RelativeWebRoot %>editors/tiny_mce/lists/template_list.js",
	external_link_list_url : "<%=Utils.RelativeWebRoot %>editors/tiny_mce/lists/link_list.js",
	external_image_list_url : "<%=Utils.RelativeWebRoot %>editors/tiny_mce/lists/image_list.js",
	media_external_list_url : "<%=Utils.RelativeWebRoot %>editors/tiny_mce/lists/media_list.js",
	relative_urls : false,
	 
	// Replace values for the template plugin
	template_replace_values : {
		name : "cem kefeli",
		website : "www.cemkefeli.com"
	}
});
</script>

Yukarıda vermiş olduğum javascript kodları /admin/TinyMCE.ascx dosyası içerisinde yer alıyor ve az öncede belirttiğim gibi editörün özelliklerini setliyor. Bu scriptin aynısını /widgets/TextBox/edit.ascx dosyası içerisinde de değiştirmelisiniz. Çünkü TextBox widget'ı da bu editörü kullanarak çalışıyor. Aşağıda daha gelişmiş yeni TinyMCE editörümüzün birkaç ekran görüntüsünü veriyorum.

TinyMCE - Image propertiesTinyMCE - Full featured editorTinyMCE - Preview pluginTinyMCE - Template plugin

Comments (6) -

G&#246;rkem &#214;zdoğan
Görkem Özdoğan Turkey
11/10/2009 12:44:34 AM #

Teşekkürler..editor bazen gerçekten sinir ediyordu.Çok işime yaradı.

Reply

erhan kocabaş
erhan kocabaş Turkey
11/11/2009 2:03:50 AM #

Bilgi için teşekkürler , arkadaşa katılıyorum Smile

Reply

admin
admin Turkey
11/16/2009 11:54:41 AM #

Rica ederim arkadaşlar,
.NET Blog Engine TinyMCE için advanced configuration ayarları ile gelmiyor. Mads Kristensen ya da Al Nyveldt neden böyle uygun görmüşler pek bir anlam veremedim Smile

Reply

mahmut
mahmut
3/17/2010 3:33:54 PM #

Selam ben birşey sorcaktım. Bu [code] taglarını nasıl kullanıyoruz? CodeFormatterExtension Enabled yapıyorum olmuyo. View diyorum cs dosyası bulunamadı dio . Yardımcı olursanız çok memnun olurum.Kolay gelsin

Reply

mostal
mostal Turkey
4/1/2010 5:20:49 AM #

Çok saol gerçekten.

Reply

admin
admin Turkey
4/10/2010 6:11:42 AM #

Mahmut selam,

BlogEngine'i kodlayanlar bazı eklentilerin de sisteme sonradan dahil edilebilmesi için extensions diye bir bölüm yapmayı düşünmüşler. Bu bölüme eklenen extension'lar da yine birer kod bloğundan oluşuyor ve hepsi için farklı bir *.cs kod dosyası oluşturmak gerekiyor. Eğer BlogEngine'nin source kodlarını inceleyecek olursan mantığı daha iyi anlarsın bence.
CodeFormatterExtension'a gelince.. Wiev'a basınca dosyanın bulunamadığını söylemesi normal birşey. Bu o eklentinin doğru bir şekilde çalışmadığı anlamına gelmiyor. Dikkat edecek olursan biz hostinge source file'ları upload etmiyoruz. Yani upload ettiğimiz dosyalar yalnızca *.aspx gibi design dosyaları. Kodlar ise compile edilip *.dll dosyaları içerisine gömülüyorlar. Yani sen wiev diyince gidip kod dosyasını arıyor, dosya da olmadığı için "not fount" hatasını gösteriyor. Eğer uygun yol altına kaynak kod dosyasını koyarsan sorun ortadan kalkacaktır. Dikkat edecek olursan zaten hangi extension için wiev'a tıklarsan tıkla hep aynı şeyi söylüyor..
Ben kod formatlama için SyntaxHighlighter'ı kullanıyorum. Bu extension gibi kod içerisine birşeyler gömmeye gerek kalmıyor SyntaxHighlighter'ı kullanırsan. Yapman gereken yalnızca birkaç javascript dosyasını HTML kod içerisinden çağırman ve kod bloklarını belirli bir formata göre uyarlaman.. ama illa CodeFormatterExtension'ı kullanmak istiyorsan kullanımı aşağıdaki gibi;

[code:c#]
.
.
Kod bloğu.....
.
.
[/code]

[code:c#] ve [/code] tagları arasına kodlarını yerleştirirsen formatlanmış halini görmüş olursun.

Kolay gelsin..
Cem

Reply

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading


Hakkımda...


Cem KEFELİ

Electronics and
Telecommunication Eng.
devamı...

Flicker Facebook
Twitter LinkedIn
xing RSS Sitemap

Ne Mutlu Türk'üm Diyene !

Son yapılan yorumlar...

Comment RSS

Yasal bir uyarı...

Disclaimer"Bu web sitesinde görmüş olduğunuz bilgilerin, dokümanların ve diğer materyallerin kullanılmasından doğabilecek hiç bir sorumluluktan site sahibi sorumlu tutulamaz. Web sitesi içerisinde yer alan yazılar, yorumlar, resimler ve diğer tüm içerikler yalnızca sahibinin görüşünü yansıtmakta olup içeriğin sahibi kişilerin çalıştığı kurumları bağlayıcı hiç bir nitelik taşımamaktadır. Yapılan tüm alıntılar mutlaka kaynak gösterilerek verilmeye çalışılmaktadır. Web sitesi içerisinde bulunan ilgili materyaller, ilgili kişiler ya da kurumlar tarafından uygun görülmemesi durumda en kısa süre içerisinde kaldırılacaktır."
Cem KEFELI
General