# برنامه نویسی با محصولات مایکروسافت > برنامه نویسی مبتنی بر Microsoft .Net Framework > ASP.NET Web Forms > آموزش: راه اندازی و استفاده از CKEditor با استفاده از jQuery و AJAX

## Vahid_moghaddam

در این مقاله چگونگی راه اندازی و استفاده از CKEditor با استفاده از jQuery و Ajax بیان می شود.  *مرحله اول:*  ابتدا آخرین نسخه CKEditor  را از آدرس زیر دانلود کنید http://ckeditor.com/download همچنین برای استفاده از این مقاله شما نیاز به دانلود کتابخانه jQuery  از آدرس زیر خواهید داشت: http://code.jquery.com/jquery-1.4.2.min.js *
مرحله دوم:* برای استفاده از CKEditor باید فایل های مورد نیاز این ادیتور را در پوشه وب سایت کپی کنید.ابتدا فولدری به نام CKEditor در وب سایت خود ایجاد کنید و بعد از باز کردن فایل دانلود شده، فولدر ها و فایل های زیر را در پوشه CKEditor (پوشه ایجاد شده در وب سایت) اضافه کنید: \Adapters \ images \lang \plugins \skins \themes Ckeditor.js Ckeditor.pack ckeditor_basic.js ckeditor_basic_source.js ckeditor_source.js config.js contents.css همچنین شما باید فایل jQuery را در سایت کپی کنید. فرض می کنیم این فایل را در فولدر js قرار می دهید. *
مرحله سوم:* لینک های لازم را به فایل های js و css در صفحه ای که Editor در آن قرار دارد اضافه کنید 
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="ckeditor/adapters/jquery.js" type="text/javascript"></script>
    <link href="ckeditor/contents.css" rel="stylesheet" type="text/css" />

*
مرحله چهارم:* یک textarea (یکی از کنترل های html) به صفحه خود اضافه کنید. این کنترل تبدیل به Editor خواهد شد. <textarea id="Editor"   name="Editor"   ></textarea> دقت کنید که در این مثال id برای textarea برابر Editor انتخاب شده است. شما در انتخاب id آزاد هستید. *
مرحله پنجم:* اکنون فایل های مورد نیاز را کپی کرده اید و رفرنس ها و کنترل های لازم به وب سایت و صفحه اضافه شده است. برای تبدیل textarea به ادیتور از دستور زیر استفاده کنید. این دستور را در یک بلوک <script> قرار دهید. این اسکریپت می تواند ترجیحا در فایل اسکریپت های صفحه یا در انتهای صفحه (قبل از </body> و اگر از master page استفاده  می کنید قبل از </asp:Content>در صفحه) قرار گیرد. 
 <script>
        $(document).ready(function() {
            $('#Editor').ckeditor();
        });
    </script>
_دستور ckeditor_
متد ckeditor که در بالا استفاده شد، می تواند با دو پارامتر استفاده شود:

یک callback function که بعد از آماده شدن ادیتور اجرا می شودمجموعه ای از option ها برای پیکربندی ادیتور
در ادامه درباره این پارامتر ها با مثال توضیحات بیشتری داده می شود.

_پیکربندی (Configuration)_
شما می توانید تنظیمات دلخواه را به CKEditor اعمال کنید. این تنظیمات می تواند شامل skin، آیتم ها و دکمه های toolbar، زبان، direction، height، فونت های ادیتور، default font و ... باشد. لیست کامل این تنظمیات را می توانید در این لینک مشاهده کنید.
برای اعمال مجموعه تنظیمات می توانید هم از دستور ckeditor استفاده کنید و هم از فایل config.js در پوشه CKEditor.
مثال برای استفاده از فایل config.js:

CKEDITOR.editorConfig = function(config) {
    config.skin = 'v2';
    config.language = 'fa';
};
با اضافه کردن پارامتر های بالا در فایل config.js زبان ادیتور فارسی و پوسته ادیتور، پوسته v2 می شود.
وقتی شما ادیتور را با استفاده از config.js پیکربندی می کنید، هنگام load شدن صفحه، این فایل نیز به مرورگر ارسال می شود. برای کاهش زمان درخواست و ارسال این فایل (و به توصیه سازندگان) بهتر است تنظیمات ادیتور با استفاده از متد ckeditor انجام شود.
مثال:

$(document).ready(function() {
            $('#Editor').ckeditor({ customConfig: '',language: 'fa', skin: 'v2' });
        });
هر پارامتر دیگری را نیز به شیوه بالا می توان در این دستور استفاده کرد. پارامتر ها در {} قرار می گیرند و با , از هم جدا می شوند. مثل 
height:'200px'
با استفاده از 
costumeConfig:''
از load شدن config.js جلوگیری می شود.

_callback function:_
همانطور که ذکر شد، این تابع بعد از آماده شدن ادیتور اجرا می شود. 
مثال:
$('#Editor').ckeditor(function() { alert ('Editor is ready'); },{skin:'v2'})همانطور که مشاهده می کنید در مثال بالا در متد  ckeditor از هر دو پارامتر callback function و configuration settings استفاده شده است.


*نکات بیشتر درباره پیکر بندی:*
یکی از مسائلی که در رابطه با ادیتورها وجود دارد، نمایش و عدم نمایش دکمه های toolbar است. در CKEditor به سادگی می توانید دکمه های دلخواه خود را نمایش دهید. مثال زیر ادیتوری با تمام دکمه های toolbar را نمایش می دهد:

$('#Editor').ckeditor({ customConfig: '',
        toolbar:[
           ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    ['Link', 'Unlink', 'Anchor'],
    ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
    '/',
    ['Styles', 'Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor'],
    ['Maximize', 'ShowBlocks', '-', 'About']

             ]
             });
به دسته بندی آیتم های toolbar با استفاده از [] و همچنین '/' دقت کنید.
در مثال زیر ادیتور با آیتم های انتخابی نمایش داده می شود:

$('#Editor').ckeditor({ customConfig: '',
        toolbar:[
           ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']
                ]
             });
        });
اگر از پارامتر toolbar استفاده نکنید، ادیتور با toolbar کامل نمایش داده می شود.
در مثال زیر ادیتور با مشخصات زیر نمایش داده می شود:

امکان resize شدن نداردجهت متن rtl استفونت پیش فرض Tahoma استزبان پیش فرض فارسی استدارای فونت های Tahoma و B Nazanin استدارای پوسته office2003 است

$('#Editor').ckeditor({ customConfig: '',
           font_names: 'Tahoma;'+'B Nazanin;',
           language: 'fa',
           skin: 'office2003',
           resize_enabled: false,
           contentsLangDirection: 'rtl',
           font_defaultLabel: 'Tahoma'
            
          });
        });
        
پوسته هایی که می توانید برای ادیتور استفاده کنید در فولدر skins قرار دارند.



در قسمت بعد به ارسال متن ادیتور به سرور می پردازیم.

----------


## Vahid_moghaddam

ساده ترین روش برای ارسال و دریافت متن editor اضافه کردن runat=server به textarea است.
مثال:

<textarea id="Editor" runat="server"  name="Editor"   ></textarea>

تعیین متن ادیتور:

Editor.InnerHtml =YourText;


خواندن متن:

string EditorText=Editor.InnerHtml ;


برای استفاده از این روش خاصیت ValidateRequest صفحه شامل Editor باید false باشد. این خاصیت را می توانید در دایرکتیو Page تنظیم کنید.

*استفاده از Ajax و jQuery برای ارسال متن:*
در این روش ابتدا باید متن Editor را با استفاده از Selector های jQuery خوانده سپس با استفاده از Ajax این متن را به سرور ارسال کنیم.
ابتدا یک دکمه به صفحه اضافه می کنیم:

<textarea id="Editor"    name="Editor"   ></textarea>
    <input id="Send" type="button" value="button" onclick="SendEditorContent();" />


تابع SendEditorContent عمل ارسال متن را انجام می دهد.
برای پردازش درخواست فرستاده شده از سمت کلاینت می توانیم از روش های مختلفی استفاده کنیم. مثل ajax Webservice ها و یا PageMethod ها. در این مقاله از PageMethod استفاده می شود. ابتدا لازم است تا mehtod پردازش را در سمت Server ایجاد کنیم. برای استفاده از page method ها نیاز به کتابخانه System.Web.Services داریم:
using System.Web.Services;

یک PageMethod باید به صورت static تعریف شود. برای اطلاعات بیشتر به این لینک مراجعه کنید.


[WebMethod]
    public static void GetEditorContent(string content)
    {
        //Your Code Here
    }

متد GetEditorContent عمل دریافت و پردازش متن (مانند ذخیره در دیتابیس) را انجام می دهد. بر می گردیم به تکمیل تابع SendEditorContent در سمت کلاینت.
jQuery دارای Selector های متنوع و کاملی می باشد که با استفاده از آنها می توان به عناصر صفحه دسترسی پیدا کرد. در اینجا ما از id Selector استفاده می کنیم.


var content = $('#Editor').val();

با استفاده از کد بالا، محتویات Editor در متغیر content ریخته می شود. اکنون با استفاده از تابع ajax در jQuery این مقدار را به سمت سرور می فرستیم.


 $.ajax({

                type: "POST",
                url: "Default.aspx/GetEditorContent",
                data: "{ 'content':'" + content + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    alert("Sent");
                },
                error: function(msg) {
                    alert("Error");
                }

            });

بحث درباره تابع ajax مربوط به این مقاله نمی باشد. فقط ذکر چند نکته لازم است.
با استفاده از پارامتر url آدرس تابع server side را تعیین می کنیم. ابتدا نام صفحه ای که شامل متد است (در صورت استفاده از WebService، نام وب سرویس  ) , سپس نام متد. از / برای جدا کردن نام صفحه و نام متد استفاده می کنیم.
از پارامتر data برای مقدار دهی به پارامتر های تابع server side استفاده می شود. شکل استفاده از این پارامتر به صورت زیر است:


data: "{ 'param1:'value1', 'param2':'value2',..... }"

حتما فرمت نمایش داده شده رعایت شود. نام پارامتر و مقدار پارامتر در '' قرار می گیرد و این دو با : از هم جدا می شوند.
نکته: اگر تابع server side پارامتر ورودی نداشت به شکل زیر از data استفاده می کنیم:
data:"{ }"
در دستور استفاده شده بالا از دو callback function استفاده شده است:

success: در صورت موفقیت آمیز بودن عمل ارسال این تابع اجرا می شودerror: در صورت رخ دادن خطا این تابع اجرا می شود.
تابع ارسال محتویات Editor آماده استفاده است. کد کامل تابع SendEditorContent:

function SendEditorContent() {
            var content = $('#Editor').val();
            $.ajax({

                type: "POST",
                url: "Default.aspx/GetEditorContent",
                data: "{ 'content':'" + content + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    alert("Sent");
                },
                error: function(msg) {
                    alert("Error");
                }

            });
        }


در متد GetEditorContent کد های لازم جهت ذخیره متن ارسال شده را بنویسید.
برای مقدار دهی به Editor می توانید به همین شیوه عمل کنید. ابتدا یک page method تعریف کنید که محتویات ادیتور را از دیتابیس دریافت کند. سپس یک تابع Client Side بنویسید که با استفاده از متد ajax در خواستی به این page method بفرستد و مقدار ادیتور را بگیرد. سپس مقدار خوانده شده را در ادیتور نمایش دهید. مثال:

تابع Server Side:

[WebMethod]
    public static string SendEditorContent()
    {
        
        return "Your Editor Text";
    }


تابع Client Side:

function GetEditorContent() {
            $.ajax({

                type: "POST",
                url: "Default.aspx/SendEditorContent",
                data: "{  }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    *$('#Editor').val(msg.d);*
                },
                error: function(msg) {
                    alert("Error");
                }

            });
        }

تابع Client Side را در زمان مناسب اجرا کنید. در مثال زیر این تابع بعد از load شدن صفحه اجرا می شود:
$(document).ready(function() {
        $('#Editor').ckeditor({ customConfig: '',
           font_names: 'Tahoma;'+'B Nazanin;',
           language: 'en',
           skin: 'office2003',
           resize_enabled: false,
           contentsLangDirection: 'rtl',
           font_defaultLabel: 'Tahoma'
            
          });
         * GetEditorContent();*
        });

در قسمت بعد روش استفاده از CKFinder برای ارسال فایل به سرور و اتصال آن به CKEditor بیان می شود.

----------


## Vahid_moghaddam

ابتدا CKFinder را از آدرس زیر دانلود کنید (نسخه asp.net):

http://ckfinder.com/download

پوشه CKFinder را در وب سایت خود کپی کنید. فرض می کنیم این پوشه در ریشه وب سایت و با نام CKFinder کپی شده است.
اسکریپت ckfinder.js را به صفحه  اضافه کنید:


<scriptsrc="CKFinder/ckfinder.js"type="text/javascript"></script>


دستور Bold شده در کد زیر را بعد از آماده سازی CKEditor برای Setup کردن CKfinder اضافه کنید:


$(document).ready(function() {
$('#Editor').ckeditor({ customConfig: '',
font_names: 'Tahoma;'+'B Nazanin;',
language: 'en',
skin: 'office2003',
resize_enabled: false,
contentsLangDirection: 'rtl',
font_defaultLabel: 'Tahoma'
});
*CKFinder.SetupCKEditor(**null, 'ckfinder/'**);*

 
});


اکنون شما می توانید از CKFinder استفاده کنید. اگر روی دکمه اضافه کردن تصویر در نوار ابزار Editor کلیک کنید، گزینه ای با نام Browse Server یا فهرست نمایی سرور به Dialog Box اضافه شده است.
قبل از ارسال فایل به سرور نیاز داریم تا مسیر فایل های upload شده (مسیری که CKFinder به آن مراجعه می کند) و همچنین تنظیمات امنیتی را تعیین کنیم. تنظیمات امنیتی به این دلیل استفاده می شود تا مطمئن باشید کاربری به سرور دسترسی دارد که مجاز باشد.

*تعیین حق دسترسی کاربر:*
در پوشه CKFinder فایلی به نام config.ascx وجود دارد. در این فایل متدی با نام 
CheckAuthentication
موجود است. اگر مقدار بازگشتی از این متد true باشد، کاربر امکان ارسال فایل و Browse را خواهد داشت. در این متد شما می توانید کاربر را احراز هویت کنید. به عنوان مثال:


 if (HttpContext.Current.User.IsInRole("Admin"))
        return true;
    else
        return false;


در مثال بالا اگر کاربر دارای نقش Admin باشد، مجاز به ارسال فایل می باشد.

*تعیین مسیر فایل ها:*
این تنظیم با استفاده از فایل config.ascx   و متد SetConfig انجام می شود. فرض کنید شما در ریشه وب سایت پوشه ای با نام Upload ایجاد کرده اید که قرار است فایل های Upload شده در آن قرار گیرند. متغیر های  BaseUrl و BaseDir را در متد SetConfig به صورت زیر مقدار دهی کنید:


public override void SetConfig()
{
  .
  .
  .
  BaseUrl = "~/Upload/";
  BaseDir = "";
  .
  .
  .
}
[SIZE=2][/SIZE]

نکته: CKFinder در پوشه ای که به عنوان مسیر ذخیره و بازیابی فایل ها در نظر گرفته شده است، برای هر دسته فایل از فولدرهای خاصی استفاده می کند. به عنوان مثال تصاویر را در پوشه images ذخیره می کند. اگر این فولدر در مسیر تعیین نشده وجود نداشته باشد، آن را ایجاد خواهد کرد. این مساله در آدرس دهی فایل ها سودمند است.

----------


## iman_ad

بسیار عالی هرچند من tiny ترجیح می دم

----------


## Vahid_moghaddam

> بسیار عالی هرچند من tiny ترجیح می دم


من یه بار tiny رو امتحان کردم.مشکلی که برام پیش اومد این بود که توی fire fox ادیتور نمایش داده نمی شد. شما با این مشکل روبرو نشدید؟ البته احتمالا من چیزیو جا انداختم تو نصبش.

----------


## iman_ad

نه دوست عزیز مشکلی نداره کلا ادیتور خوش دستی البته فایل منیجرش پولی که من یکم دستکاریش کردم و از تلریک دارم استفاده می کنم

----------


## <برنامه نویس>

<script>
        $(document).ready(function() {
            $('#Editor').ckeditor();
        });
    </script>

این کد را خطا میگیره

----------


## Vahid_moghaddam

اگر فایل های لازم رو کپی کردید، چک کنید آدرس دهی اونها صحیح باشه.
لطفا کد html صفحه  رو بذارید.

----------


## <برنامه نویس>

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="ckeditor.js" type="text/javascript"></script>
<script src="adapters/jquery.js" type="text/javascript"></script>
<link href="contents.css" rel="stylesheet" type="text/css" />
 
</head>
<body>
 
<div>
<textarea id="Editor" name="Editor" ></textarea>
</div>
 
<script>
$(document).ready(function() {
$('#Editor').ckeditor();
});
</script>
</body>
</html>

همه اون فایل ها رو دا خل پوشه قرار دارم

----------


## <برنامه نویس>

این خطا

----------


## Vahid_moghaddam

مسیر کامل فایل jquery-1.3.1.min.js در هارد شما چیه؟ این خطا معمولا به خاطر نشناختن jQuery بوجود میاد.

----------


## <برنامه نویس>

دقیقا مشکل همین نسخه جدید اسم فایل به این تغییر کرده jquery-1.4.2.min.js
در حالی که توی کد نومنه 1.3.1 نوشته شده 

مرسی

----------


## Vahid_moghaddam

دو skin برای CKeditor. برای استفاده از این skin ها ابتدا فولدر های classic و black رو توی مسیر زیر کپی کنید:

..\CKEditor_Folder\skins

و سپس نام اونها رو (classic یا black) به پارامتر skin که در قسمت اول روش استفاده از اون توضیح داده شده، پاس بدید.

----------


## afsaneh.asp

سلام
لينكي كه براي دانلود کتابخانه jQuery گذاشتين،نتيجه اي نداره.در همينجا ميشه فايلش رو گذاشت يا جاي ديگه اي كه قابل دانلود باشه؟

----------


## Vahid_moghaddam

> سلام
> لينكي كه براي دانلود کتابخانه jQuery گذاشتين،نتيجه اي نداره.در همينجا ميشه فايلش رو گذاشت يا جاي ديگه اي كه قابل دانلود باشه؟


نسخه 1.4.2 رو ضمیمه کردم.

----------


## afsaneh.asp

بابت آپلود دوباره ممنون.
من دقيقا عين مراحلي كه گفتين رو انجام دادم ولي نميشه. در مورد textarea فقط كافيه id="editor" قرار بديم؟
فقط textarea رو نشون ميده :گریه: 
چيكار كنم؟

----------


## Vahid_moghaddam

id می تونه هر اسمی باشه. در دستور زیر id کنترل رو به جای Editor بذارید.

 <script>
        $(document).ready(function() {
            $('#Editor').ckeditor();
        });
    </script>آدرس ها درسته؟ کد صفحه aspx رو بذارید. و اگه می تونید پروژه رو ضمیمه کنید.

----------


## nafasak

> id می تونه هر اسمی باشه. در دستور زیر id کنترل رو به جای Editor بذارید.
> 
>  <script>
>         $(document).ready(function() {
>             $('#Editor').ckeditor();
>         });
>     </script>آدرس ها درسته؟ کد صفحه aspx رو بذارید. و اگه می تونید پروژه رو ضمیمه کنید.


سلام،
من از MasterPage استفاده میکنم،
کد بالا رو قبل از content به شکل زیر میزارم ولی خطا میده:

<script>
$(document).ready(function() {
$('#MyEditor').ckeditor();
});
</script>
</asp:Content>

----------


## Vahid_moghaddam

> سلام،
> من از MasterPage استفاده میکنم،
> کد بالا رو قبل از content به شکل زیر میزارم ولی خطا میده:
> 
> <script>
> $(document).ready(function() {
> $('#MyEditor').ckeditor();
> });
> </script>
> </asp:Content>


با فرض اینکه فایل ها به صورت کامل کپی شده باشند، معمولا این خطا ها بوجود میاد:
1. شما پیغام خطا دریافت نمی کنید اما ادیتور هم نمایش داده نمی شه و فقط textbox رو می بینید.  دلیل این مشکل اینه که selector کنترل مورد نظر رو برای تبدیل به ادیتور پیدا نمی کنه. Selector استفاده شده یعنی
$('#Editor')
دنبال کنترلی می گرده که id اون برابر Editor باشه. یا در تایپ این Id اشتباه صورت گرفته و یا کنترل شما خاصیت runat=server داره. در این حالت ممکنه id و clientid به خاطر قرار گرفتن در gridview و کنترل های مشابه و یا قرار گرفتن صفحه حاوی Editor در MasterPage متفاوت باشند. شما باید از ClientID استفاده کنید.
مثال:
$('#<%=MyPanel.ClientID%>').ckeditor();

2. شما پیغام خطای زیر رو دریافت می کنید:
 'CKEDITOR' is undefined
این خطا زمانی بوجود میاد که فایل های js مربوط به ckeditor درست آدرس دهی نشده باشند. در آدرس دهی به آدرس دهی نسبی دقت کنید. 

3.شما پیغام خطای زیر رو دریافت می کنید. 
Object expected
این پیغام زمانی بوجود میاد که مرورگر jquery رو نمی شناسه. در واقع فایل کتابخانه jquery درست آدرس دهی نشده یا در آدرس تعیین شده وجود نداره. در اینجا هم به آدرس دهی نسبی دقت کنید.

در مجموع راه اندازی این ادیتور مثل نسخه قدیمی ترش (اما هنوز خوب و مناسبش) FCKEditor کار دشواری نیست و بیشتر خطاها به دلیل id نادرست و یا آدرس دهی نادرست و یا کپی نشدن کامل فایل ها بوجود میاد

----------


## ghasedak123

سلام
من ميخوام تو پروژه asp.netام كه با vs2005 نوشتم يه اديتور ساده داشته باشم. نه از اجاكس استفاده كردم نه جي كوئري. ميشه طبق اولين پست از ckeditor استفاده كنم؟

----------


## afsaneh.asp

> id می تونه هر اسمی باشه. در دستور زیر id کنترل رو به جای Editor بذارید.
> 
>  <script>
>         $(document).ready(function() {
>             $('#Editor').ckeditor();
>         });
>     </script>آدرس ها درسته؟ کد صفحه aspx رو بذارید. و اگه می تونید پروژه رو ضمیمه کنید.


بله همه چيز درست بود.من runat="server " رو از تك تكس اريا برداشتم درست شد و كار كرد.حالا سوالم اينه كه چطور از متن اديتور براي گرفتن يا ارسال بهش استفاده كنم؟

----------


## Vahid_moghaddam

> سلام
> من ميخوام تو پروژه ASP.NETام كه با vs2005 نوشتم يه اديتور ساده داشته باشم. نه از اجاكس استفاده كردم نه جي كوئري. ميشه طبق اولين پست از ckeditor استفاده كنم؟


شما اگه نمی خواید از jQuery استفاده کنید، می تونید بعد از اضافه کردن لینک های لازم (به جز لینک به jQuery)، به شکل زیر از Editor استفاده کنید:

تبدیل TextArea به Editor:

<script>
        CKEDITOR.replace('Editor',
                    {
                        fullPage: true,
                        skin: 'office2003'
                    });
</script>


از سایر پارامترهای گفته شده می تونید در این دستور استفاده کنید.

ساده ترین راه هم برای دسترسی به مقدار Editor در سمت سرور، اضافه کردن runat=server به TextArea است.

----------


## ghasedak123

> شما اگه نمی خواید از jQuery استفاده کنید، می تونید بعد از اضافه کردن لینک های لازم (به جز لینک به jQuery)، به شکل زیر از Editor استفاده کنید:
> 
> تبدیل TextArea به Editor:
> 
> <script>
>         CKEDITOR.replace('Editor',
>                     {
>                         fullPage: true,
>                         skin: 'office2003'
> ...


runat=server رو بزارم كه كار نميكنه كه :ناراحت:

----------


## Vahid_moghaddam

> runat=server رو بزارم كه كار نميكنه كه


چرا کار نکنه؟ اگه editor توی master page یا چیزی شبیه به اینه، شما باید از ClientID استفاده کنید. کد صفحه aspx رو در صورت برطرف نشدن مشکل بذارید.


<script>

        CKEDITOR.replace('<%=Editor.ClientID %>',
                    {
                        fullPage: true,
                        skin: 'office2003'
                    });
</script>

----------


## afsaneh.asp

سلام صبح بخير
بازم منم...نزنيا
من متن اديتور رو تو ديتابيسم ذخيره ميكنم و بعد اينها با يه ديتا ليست نشون داده ميشن.
مشكل اينجاست كه متن اديتور با تگهاي html در ديتابيس ذخيره ميشه و همونجور نشون داده ميشن.مثلا يه خط نوشته باشيم اون خط رو داخل تگ<p> ميزاره.
راهي هست كه اين تگ و علائم نشون داده نشن؟

----------


## Vahid_moghaddam

> سلام صبح بخير
> بازم منم...نزنيا
> من متن اديتور رو تو ديتابيسم ذخيره ميكنم و بعد اينها با يه ديتا ليست نشون داده ميشن.
> مشكل اينجاست كه متن اديتور با تگهاي html در ديتابيس ذخيره ميشه و همونجور نشون داده ميشن.مثلا يه خط نوشته باشيم اون خط رو داخل تگ<p> ميزاره.
> راهي هست كه اين تگ و علائم نشون داده نشن؟


می تونید متن رو برای این تگ ها فیلتر کنید اما جالب نیست. راه بهتر استفاده از کنترل Literal هست. توی datalist یه template درست کنید و توش یه literal بذارید و متن رو در اون نمایش بدید.

----------


## afsaneh.asp

> می تونید متن رو برای این تگ ها فیلتر کنید اما جالب نیست. راه بهتر استفاده از کنترل Literal هست. توی datalist یه template درست کنید و توش یه literal بذارید و متن رو در اون نمایش بدید.


اينكارو كردم ولي تو literalهم مثل ليبل.فرقي نميكنه

----------


## Vahid_moghaddam

> اينكارو كردم ولي تو literalهم مثل ليبل.فرقي نميكنه


اگه خاصیت Mode برابر Transform باشه، درست نمایش داده می شه.

----------


## afsaneh.asp

> اگه خاصیت Mode برابر Transform باشه، درست نمایش داده می شه.


ممنون
شما خودت امتحان كردي؟ واسه من كه نميشه :خیلی عصبانی:

----------


## Vahid_moghaddam

> ممنون
> شما خودت امتحان كردي؟ واسه من كه نميشه


آره.


<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
            DataSourceID="SqlDataSource2">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("Body") %>'></asp:Literal>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

----------


## afsaneh.asp

سلام
ممنون ولي براي من نميشه به همون صورت قبلي نشون ميده.به نظر شما چرا؟مشكل از چي ميتونه باشه؟

----------


## Vahid_moghaddam

> سلام
> ممنون ولي براي من نميشه به همون صورت قبلي نشون ميده.به نظر شما چرا؟مشكل از چي ميتونه باشه؟


متنی رو که با اشکال نمایش داده می شه، در Editor وارد کنید. به صورت دستی نه. از دیتابیس بخونید و بریزید توی Editor. ببینید باز هم این مشکل وجود داره.

----------


## afsaneh.asp

> متنی رو که با اشکال نمایش داده می شه، در Editor وارد کنید. به صورت دستی نه. از دیتابیس بخونید و بریزید توی Editor. ببینید باز هم این مشکل وجود داره.


اين كارو كرده بودم، توي اديتور اين مشكل نيست . از گريد كه به اديتور ميارم درست نشون ميده بدون تگها.

----------


## Vahid_moghaddam

وقتی متن رو خارج از گریدویو توی یک literal هم نمایش می دید، باز هم مشکل داره؟ یا این اشکال فقط توی گریدویو بوجود میاد؟

----------


## Vahid_moghaddam

کد گریدویو رو بذارید

----------


## afsaneh.asp

> وقتی متن رو خارج از گریدویو توی یک literal هم نمایش می دید، باز هم مشکل داره؟ یا این اشکال فقط توی گریدویو بوجود میاد؟


بله. literalچه تو گريد باشه يا خارج اون، عين ليبل عمل ميكنه خود متن اديتور رو مياره.


<asp:GridView ID="Gv" runat="server" AutoGenerateColumns="False" 
          DataSourceID="SqlDataSource2">
          <Columns>
              <asp:TemplateField>
                  <ItemTemplate>
                      <asp:Literal ID="Literal1" Mode="Transform" runat="server" Text='<%# Eval("Note") %>'></asp:Literal>
                  </ItemTemplate>
              </asp:TemplateField>
          </Columns>
      </asp:GridView>

----------


## Vahid_moghaddam

به یه دلیلی داره html encoding رخ می ده. نمی دونم چرا. یه مقدار توی google هم گشتم اما چیز خاصی پیدا نکردم. اگه می تونید پروژه رو بدون db ضمیمه کنید.

----------


## afsaneh.asp

> به یه دلیلی داره html encoding رخ می ده. نمی دونم چرا. یه مقدار توی google هم گشتم اما چیز خاصی پیدا نکردم. اگه می تونید پروژه رو بدون db ضمیمه کنید.


مرسي وقت گذاشتين براي مشكلم.منم موندم چرا اينجوريه.متاسفانه به كدهام دسترسي ندارم(تو شركتي كه كار ميكنم ريموت به سرور برنامه نويسي وصل ميشيم و هيچگونه دسترسي به كدها نداريم و اجازه كپي يا هيچ چيز ديگه اي نيست :ناراحت: ).

بازم ممنون.تشكر

----------


## Vahid_moghaddam

این رو هم امتحان کنید. در رویداد RowDataBound:


protected void Gv_RowDataBound(object sender, GridViewRowEventArgs e)
    {
     
        if (e.Row.RowType == DataControlRowType.DataRow)
        {

            Literal lit = (Literal)e.Row.FindControl("Literal1");
            lit.Text = Server.HtmlDecode(lit.Text);

        }
     
    }

----------


## afsaneh.asp

> این رو هم امتحان کنید. در رویداد RowDataBound:
> 
> 
> protected void Gv_RowDataBound(object sender, GridViewRowEventArgs e)
> {
>  
> if (e.Row.RowType == DataControlRowType.DataRow)
> {
>  
> ...


ايول. همينه
مرسي.واقعا ممنونم كمك بزرگي بود مرسي

----------


## A.S.Roma

من با CkFinder به مشکل بر خوردم . 

تمامی کارها را انجام دادم موقع اجرا از این خط Error می گیرد :

public class FileBrowserDesigner : System.Web.UI.Design.ControlDesigner


اسمبلی System.Design را اضافه کردم و به مشکل دیگر برخوردم . 
ظاهرا" چون Ckfinder هم فایل Assemblyinfo.cs دارد با asssemblyinfo پروژه خودم تداخل پیدا کرده و همه Attribute ها Duplicate شده اند .

----------


## atefe_asadi

ممنون از این مقاله. من یه مشکلی دارم. همونطور که گفتید از جی کوئری استفاده کردم توی پروژم. اما زمانی که می خوام مطلب تایپ شده توی ادیتور رو بفرستم به سرور، نمی فرسته. اصلا رویداد توی صفحه اجرا نمی شه. می شه کمک کنید؟

----------


## Vahid_moghaddam

> ممنون از این مقاله. من یه مشکلی دارم. همونطور که گفتید از جی کوئری استفاده کردم توی پروژم. اما زمانی که می خوام مطلب تایپ شده توی ادیتور رو بفرستم به سرور، نمی فرسته. اصلا رویداد توی صفحه اجرا نمی شه. می شه کمک کنید؟


1. ابتدا چک کنید در تایپ پارامتر ها در دستور ajax اشتباه نکرده باشید.
2. ASP.NET  رشته json به  102400 کاراکتر محدود می کنه. شما می تونید مقدار ماکزیمم رو در web.config تغییر بدید:

<configuration>
  <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="500000"/>
      </webServices>
    </scripting>
  </system.web.extensions>
</configuration>

----------


## atefe_asadi

ckfinder رایگان نیست. وقتی سایت رو آپلود کنیم مشکلی پیش نمیاد؟

----------


## Vahid_moghaddam

> ckfinder رایگان نیست. وقتی سایت رو آپلود کنیم مشکلی پیش نمیاد؟


نه. فقط یه پیغام میاد که این کنترل داره مجانی ازش استفاده می شه

----------


## pardis11

اگه امکان داره نصب ورژن دات نت رو هم آموزش بدین:::: FCKeditor.Net
تو سایت عنوانش برای دانلود هستش البته ای پی ایران رو تحریم کرده و باید با فی ل تر شکن دانلود کنین :
*FCKeditor.Net: ASP.Net Control to easily integrate FCKeditor on  ASP.NET pages*

----------


## saberfarhadi

سلام ممنون از این تایپیک خوب و از این آموزش کاملتون
به غیر از یک قسمت بقیه همش درست اجرا شد و اون قسمت همون آپلود عکس از سیستم خودمون هست که اون تگ font هایی که نوشته بودید نمیدونم چی بود  و نمیدونم چجوری باید استفاده می کردم . jsشو لینک کردم تگهاشم قرار دادم باز بالاش این خطا نشون میداد:  

<scriptsrc="CKFinder/ckfinder.js"type="text/javascript">script>  $(document).ready(function() { $('#Editor').ckeditor({ customConfig: '', font_names: 'Tahoma;'+'B Nazanin;', language: 'en', skin: 'office2003', resize_enabled: false, contentsLangDirection: 'rtl', font_defaultLabel: 'Tahoma' }); *CKFinder.SetupCKEditor(**null, 'ckfinder/'**);*      });

ببخشید میتونید  skin های بیشتری هم بذارید؟  راستی این ادیتور خیلی دیر لود میشه چه کار باید کرد؟؟ ادیتور ساده ای مثل ادیتور این انجمن سراغ دارین؟ و راهنمای نصبش؟ :خجالت:  ممنون از آموزش کامل شما

----------


## palang sorati

سلام دوست گرامی جناب مقدم 
من در صفحه WebUserControl . ascx از ckeditor استفاده می کنم . کد زیر را  در هر کجای صفحاتم که قرار می دهم باز هم خطا می دهد . 

<script>
        $(document).ready(function() {
            $('#Editor').ckeditor();
        });
    </script>
 
با این که مطمئنم jquery و css ها را درست آدرس دهی کردم . جای قرار دادن این کد کجاست ؟

از شما خواهش می کنم برای ما مبتدیان برنامه نویسی دات نت فیلم آموزشی برای این تاپیک (راه اندازی و استفاده از CKEditor با استفاده از jQuery و AJAX    ) قرار دهید . چون من اسکریپت های این تاپیک را نمی دانم کجای فرمم قرار دهم . 

متشکرم ...

----------


## mehrdad_shahian

سلام 
من وقتی در ckeditor در پنجره Image Properties روی Browse Server کلیک میکنم به من این پیغام رو میده که تصویرش رو ضمیمه کردم.لطفا بگید این از چیه؟
مرسی

----------


## 8611670474

مشکلی که دوستان داشتن با کدهای html ذخیره شده در db ، خیلی ساده تر هم حل میشه.
به جای اینکه خاصیت innerhtml را ذخیره کنند، innertext  را ذخبره کنند.

----------


## majid.mp

با عرض سلام خدمت دوستان
بنده از dll این کنترل در asp.net استفاده میکنم حال چطور میتوانم باتن فهرست نمایی سرور را به پنجره درج تصویر اضافه نمایم؟
قابل ذکر است طبق پست شماره 3 عمل نمودم ولی در هنگام اجرا باتن فهرست نمایی سرور نمایش داده نمیشود به نظرم باید یک سری تنظیمات به فایل های پوشه Ckeditor اعمال کنم تا این باتن نمایش داده شود.
با تشکر.

----------


## conroe7000

مشکل من اینه که فقط متن مقدار اولیه رو برمیگردونه یعنی اگر در کیک یک دکمه بنویسم که منم فعلی رو به من بده متن نوشته شده رو بی خیاله و فقط همون چیزی که تو لود صفحه بهش دادمو میده 
؟
چکار باید بکنم ؟
در ضمن وقتی می خام تو دیتابیس ذخیره کنم پیغام خطا ظاهر میشه 
البته به خاطر کوتیشن و دبل کوتیشن و تگ هال اچ تی ام ال هست 
چطور باید این مشکلو حل کنم ؟


تورو خدا کمک کنید

asp.net با ویژوال استیدو 2010

----------


## h.rezaee

سلام. ممنون از این که این مقاله مفید رو نوشتین. یه سوال داشتم اونم اینه که چه جوری اطلاعات رو از دیتابیس با labal بخونم بدون تگهای HTML?????

----------


## ERIKA

سلام من این کامپوننت ckeditor را توی برنامه ام اضافه کردم توی دمو نشان میدهد که وقتی روی عکس کلیک میکنیم یک دکمه browseداره که میت.ان مسیر عکس بهش داد 
ولی وقتی من اضافه کردم این دکمه نبود ظاهرا باید دستی مسیر urlمیدادیم
میخام ببینم بای چکار کنم تا این دکمه اضافه گردد؟؟؟
ایا باید fckeditor اضافه کنم ؟؟؟

----------


## v_vahid

سلام خسته نباشید
 آقا از من Browse Server  فعال نمیشه همه کارهایی رو که گفتید بودید انجام دادم ولی فعال نمیشه

----------


## pishi-pishi

من این مراحل را انجام دادم ولی وقتی سایت را آپلود میکنم ادیتور نمایش داده نمی شود.بروی لوکال هاست مشکلی ندارد

لطفا راهنمایی کنید خیلی خیلی فوری است

----------


## meisam12

سلام دوستان
این ویرایشگر امکانم نوشتن سورس کد مثل C#‎ , SQL , VB ,... را دارد؟

----------


## hamidhassas

من کل تاپ رو خوندم و یکی یکی تمام کار هایی رو که گفتید رو انجام دادم اما  چند تا مشکل دارم اول برای ckeditor انجام دادم و کار میکنه فقط خط زیر رو ایراد میگیره در php  تو برنامه Adobe Dreamweaver CS6
و اینکه ckfinder رو دانلود کردم اما اجرا نمیشه


<script>
       $(document).ready(function() {
                $('#tText').ckeditor();
              });
</script> 


runat="server" رو هم اضافه و یا برداشتم باز هم جواب نداد

----------


## h.moradof

> من این مراحل را انجام دادم ولی وقتی سایت را آپلود میکنم ادیتور نمایش داده نمی شود.بروی لوکال هاست مشکلی ندارد
> 
> لطفا راهنمایی کنید خیلی خیلی فوری است


سلام

من همین مشکل رو داشتم .
توی پوشه dceditor فایل htaccess رو حذف کنین ... مشکل برطرف میشه.

----------


## hamidhassas

چرا CKFinder برای من اجرا نمیشه و عمل نمی کنه؟

این هم کد برنامه CKٍditon

<script src="../../scripts_style/scripts/ckfinder/ckfinder.js"type="text/javascript"></script>
<script src="../../scripts_style/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../scripts_style/scripts/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="../../scripts_style/scripts/ckeditor/config.js" type="text/javascript"></script>
<script src="../../scripts_style/scripts/ckeditor/adapters/jquery.js" type="text/javascript"></script>
<link href="../../scripts_style/scripts/ckeditor/contents.css" rel="stylesheet" type="text/css" /> 
<script>
$(document).ready(function()
 {
  $('#Editor').ckeditor(
 {
  customConfig: '',
  skin: 'kama',
  language: 'fa',
  contentsLangDirection: 'rtl',
  font_defaultLabel: 'Tahoma',
  font_names: 'Tahoma;'+'Arial;',
  //resize_enabled: false,
  //height:'200px',
  toolbar:[
   ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
      ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
   ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
   ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
        ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
     ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Link', 'Unlink', 'Anchor'],
        ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
         '/',
          ['Styles', 'Format', 'Font', 'FontSize'],
          ['TextColor', 'BGColor'],
          ['Maximize', 'ShowBlocks', '-', 'About']
 
]
}
);
CKFinder.SetupCKEditor(
null, 'ckfinder/'
); 
</script>

----------


## soshyanet

salam doostam
man az ck editor hamoon tor ke goftid estefade kardam

ba configesh moshkeli nadashtam
amma nemidoonam chera ettelaat ro ersal nemikone
man oon ro be in soorat be kar bordam

<textarea id="Editor"   name="Editor"   ></textarea>

va mikham samtike form ersal mishe
be in soorat tahvil begiram

$text = $_POST['Editor'];

amma vaghti barname ro compile mikonam 
meghdare text khali hastesh


lotfan komak konid
kheyli forie

----------


## abbas3zaar

سلام textarea اصلا تغییر نمیکنه!

این کد:



<html>
<head>
<title>CKEditor</title>
    <script src="jquery-1.4.2.min" type="text/javascript"></script>
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <link href="ckeditor/contents.css" rel="stylesheet" type="text/css" />
</head>
<body>
<textarea id="Editor" name="Editor"></textarea>
<script>
$(document).ready(function() {
$('#Editor').ckeditor();
});
</script>
</body>
</html>


اینم فایل ها:

aaaaaa.jpg

----------


## minamorsali

سلام
ckfinder که رایگان نیست. پس وضعیت آپلود عکس در ckeditor چی میشه؟ آیا امکان استفاده از ckfinder وجود داره؟

----------


## conroe7000

سلام من فایلها رو دانلود کردم و مراحل رو مطابق کارهایی که گقته بودین انجام دادم البته در php همه چیز درسته اما دکمه brows server که از همه مهمتره و برای آپلود عکس مد نظر هست نمایش داده نمیشه لطفا در صورتی که این مراحل در php متفاوت هست اطلاع بدین و در صورت امکان آموزش php رو هم بدین ممنون

----------


## mobtadi2009

ممنون خیلی زیاااااااااااد

----------


## mamani88

برای من هیچی نشون نمیده جز texterea




```

<%@ Page Language="C#‎" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="ckeditor/adapters/jquery.js" type="text/javascript"></script>
    <link href="ckeditor/contents.css" rel="stylesheet" type="text/css" />
    <script src="ckeditor/jquery-1.4.2.min.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
       $(document).ready(function() {
           $('#Editor').ckeditor();
           
       });
       
       
    </script>
   

   
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <textarea id="Editor"   name="Editor" rows="2" ></textarea>
    </div>
    </form>
</body>
</html>

```

----------


## مرتضی تقدمی

سلام

برای رفع مشکلات کار با این ویرایشگر به *این مطلب* مراجعه کنید. توضیحات کامل به همراه روش ساده تر راه اندازی داده شده است.

با تشکر
موفق باشید

----------


## saeed_pb

سلام دوستان
 من یه مشکلی دارم تو اسفاده از  روش ارسال و دریافت متن editor با اضافه کردن runat=server به textarea
وقتی دکمه ی ثبتم که تو اون این کد :string s = Editor.InnerHtml.tostring();

نوشته شده می زنم ، قبل از این که این کد رو اجرا کنه خطای :
A potentially dangerous Request.Form value was detected from the client(ctl00$ContentPlaceHolder1$Editor="<p>dsdddd  ddd<p>").
رخ میده 
لطفا راهنمایی ام کنید.

----------


## maryam_saboori

مرسی ممنون.
یه منبع دیگه که مشکل من رو در ساخت ادیتور حل کرد این سایت بود.فیلم آموزشی به زبان فارسی هستش که نحوه استفاده از ckeditor رو به خوبی و با زبان ساده توضیح میده.هم ساده و هم روانه

لینک:

clicksite.ir/article.php?id=55

یا این لینک

----------


## mis.shafiee

سلامببخشید من ی مشکل با ckFinder داشتم. می خواهم ی دکمه داخل صفحه ام بگذارم  که کنار ان یک lable باشه ،که وقتی روی ان کلیک می کنم مستقیما به  ckFinder متصل بشه که از انجا بتونم ی عکس انتخاب کنم و بعد از انتخاب عکس ادرس عکس در lable نمایش داده شود.
من فقط تونستم به   Ckfinder  ، با خود دکمه browse server  اتصال پیدا کنم . می خواهم هر جا که خواستم بتونم با گذاشتن ی دکمه به آنت وصل شوم.


ممنون میشم راهنمایی بفرمایید.

----------


## mis.shafiee

سلام      ببخشید من ی مشکل با ckFinder داشتم. می خواهم ی دکمه داخل صفحه ام بگذارم  که کنار ان یک lable باشه ،که وقتی روی ان کلیک می کنم مستقیما به  ckFinder متصل بشه که از انجا بتونم ی عکس انتخاب کنم و بعد از انتخاب عکس ادرس عکس در lable نمایش داده شود.      من فقط تونستم به   Ckfinder  ، با خود دکمه browse server  اتصال پیدا کنم . می خواهم هر جا که خواستم بتونم با گذاشتن ی دکمه به آنت وصل شوم. 
     ممنون میشم راهنمایی بفرمایید.

مانند لینک زیر :
http://cksource.com/ckfinder/demo#forms

----------


## ebi7171

در ادیتور مشکلی وجود ندارد اما در صفحه ای که باید نمایش بده فقط سورس به نمایش در میاد.
به عکس های زیر توجه کنید؟
http://www.up.downloadkral.com/uploa...0854876341.jpg
http://www.up.downloadkral.com/uploa...0854878952.jpg

باید چی کار کرد؟

----------

