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 properties
TinyMCE - Full featured editor
TinyMCE - Preview plugin
TinyMCE - Template plugin

1 kişi tarafından 5.0 olarak değerlendirildi

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Kategoriler: Web teknolojileri

Yorumlar

Yorum ekle

 
(Gravatar simgesi gösterilecek. E-Posta adresiniz diğer kullanıcılara kesinlikle gösterilmeyecektir!)

  Country flag biuquote

  • Yorum
  • Canlı önizleme
Loading



General