Previous
Next

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

by Cem Kefeli 13. Ekim 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
Etiketler: , , , , , , , ,
Kategoriler: Makaleler

Yorumlar (6) -

G&#246;rkem &#214;zdoğan
Görkem Özdoğan Turkey
10.11.2009 00:44:34 #

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

Yanıtla

erhan kocabaş
erhan kocabaş Turkey
11.11.2009 02:03:50 #

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

Yanıtla

admin
admin Turkey
16.11.2009 11:54:41 #

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

Yanıtla

mahmut
mahmut
17.03.2010 15:33:54 #

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

Yanıtla

mostal
mostal Turkey
01.04.2010 05:20:49 #

Çok saol gerçekten.

Yanıtla

admin
admin Turkey
10.04.2010 06:11:42 #

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

Yanıtla

Yorum ekle

biuquote
  • Yorum
  • Canlı önizleme
Loading

Hakkımda...

Cem KEFELİ

Electronics and
Telecommunication Eng.
devamı...


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 yasal kurumlar tarafından uygun görülmemesi durumda kaldırılacaktır."
General