Google Analytics İzleme

27 Mart 2014

TinyMCE - TinyMCE 4.x.x jQuery package ile kullanım

TinyMCE kütüphanesinin jQuery paketi entegre çalışan sürümünü kullanmak, aşağıdaki gibidir:

Önce gerekli scriptleri eklenir:
<script src="/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/js/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="/js/tinymce/jquery.tinymce.min.js" type="text/javascript"></script>

Sonra tinymce fonksiyonunu çağrırarak editör'ün gösterilmesi ve set edilmesi sağlanır:
...
<script type="text/javascript">
        $(document).ready(function () {
            $(".editorTinyMCE").tinymce({
                theme: 'modern'
                , encoding: 'xml'
            });
        });
</script>
...

Asp.net sayfasındaki(.aspx) input elementinin bulunduğu kısmı:
...
<table>
        <tr>
            <td valign="top">
                Uzun İçerik
            </td>
            <td>
                <asp:TextBox runat="server" ID="txtUzunIcerik" TextMode="MultiLine" Columns="50" Rows="10" CssClass="editorTinyMCE"></asp:TextBox>
            </td>
        </tr>
</table>
...

Yıkarıdaki kodda "editorTinyMCE" adındaki css class'ına ait DOM input elementinin editöre dönüşümü sağlanmış oluyor. encoding:'xml' tanımı ile de asp.net webform sayfasında oluşan "A potentially dangerous Request.Form value was detected" hatasını engellemiş oluyoruz. input değeri encode edilmiş şekilde sunucu tarafına post edilir. Asp.net sayfasının sunucu tarafında ise orjinal değeri(html encode yapılmamış) elde edebilmek için ise şu şekilde dönüşüm yapılabilir;
...
duyuru.UzunIcerik = HttpUtility.HtmlDecode(txtUzunIcerik.Text);
...

Veritabanında değeri alıp, .aspx sayfasında gösterim için şu şekilde yapılır:
...
txtUzunIcerik.Text = HttpUtility.HtmlDecode(record.UzunIcerik);
...

postback işleminden sonra tekrar geri gönderimde tinyMCE editöründe düzgün şekilde görünmesi için HtmlDecode yapılması gerekmektedir:
...
txtUzunIcerik.Text = HttpUtility.HtmlDecode(txtUzunIcerik.Text); // encode olarak gelen veri tekrar dönüştürülüyor
...


Kaynaklar:
http://stackoverflow.com/questions/21434388/how-do-i-use-tinymce-jquery-package-and-what-is-the-difference-with-tinymce-jque
http://myprogrammingblog.com/2012/03/05/how-to-setup-tinymce-using-asp-net-c-how-to-customize-tinymce-buttons/
http://blog.tentaclesoftware.com/archive/2012/05/21/asp-net-4-0-tinymce-and-ldquoa-potentially-dangerous-request.aspx
http://www.codedigest.com/Articles/ASPNET/319_Using_TinyMCE_Editor_in_ASPNet.aspx

Hiç yorum yok: