ساده ترین روش برای ارسال و دریافت متن 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 بیان می شود.
پاسخ با نقل قول