24 Şubat 2014 Pazartesi

Asp.NET sayfalara TinyMCE metin editörü ekleme

By Berkay 18:44 Asp.NET, C#, TinyMCE Leave a Comment

Asp.NET ile oluşturduğumuz web formlara TinyMCE zengin metin editörünü eklemeyi anlatacağım.

TinyMCE; platformdan bağımsız, web tabanlı JavaScript HTML WYSIWYG editörüdür. Açık kaynak kodlu yayınlanan TinyMCE, LGPL (Lesser General Public License) lisansı altında bulunmaktadır.

TinyMCE ile ilgili bilgileri verdikten sonra artık kurulumunu anlatmaya başlıyorum.

http://www.tinymce.com/download/download.php adresinden editörü indiriyorum.

İndirdiğim zip dosyasının içindeki tinymce klasörünü web form dosyalarımın olduğu klasörün içine atıyorum.

Yeni bir web form ekliyorum ve forma textbox koyuyoru. TextBox'ın TextMode özelliğini MultiLine yapıyorum. Bunu yapmak çok önemli çünkü MultiLine olmazsa tarayıcı bunu text input olarak algılıyor. Kodlar ile örnek vermek gerekirse;

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

kodu tarayıcıda aşağıdaki gibi görünürken

<input id="TextBox1" name="TextBox1" type="text" />

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>

kodu ise tarayıcıda aşağıdaki gibi görünür.

<textarea cols="20" id="TextBox1" name="TextBox1" rows="2"></textarea>

Biz de textareaları zenginleştireceğimiz için TextMode özelliğini MultiLine yapmayı unutmuyoruz.

Sayfamızda <title></title> etiketlerinin altına aşağıdaki kodu ekliyoruz.

<script type="text/javascript">
    tinyMCE.init({
        mode: "textareas",
        theme: "advanced",
        theme_advanced_toolbar_location: "top",
        theme_advanced_buttons1: "italic,underline,separator,justifyleft,justifycenter,justifyright,separator,formatselect,separator,bullist,numlist,link,unlink",
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        encoding: "xml"
    });
</script>

Bu kodu ekledikten sonra TinyMCE, MultiLine textboxlara eklenmiş oluyor.