راه اندازی و استفاده از 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 و ... باشد. لیست کامل این تنظمیات را می توانید در این لینک (http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html) مشاهده کنید.
برای اعمال مجموعه تنظیمات می توانید هم از دستور 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 تعریف شود. برای اطلاعات بیشتر به این لینک (http://encosia.com/2008/04/16/why-do-aspnet-ajax-page-methods-have-to-be-static/) مراجعه کنید.


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

متد GetEditorContent عمل دریافت و پردازش متن (مانند ذخیره در دیتابیس) را انجام می دهد. بر می گردیم به تکمیل تابع SendEditorContent در سمت کلاینت.
jQuery دارای Selector (http://api.jquery.com/category/selectors/) های متنوع و کاملی می باشد که با استفاده از آنها می توان به عناصر صفحه دسترسی پیدا کرد. در اینجا ما از 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 را به صفحه اضافه کنید:



<script src="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 = "";
.
.
.
}


نکته: 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>

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

[<برنامه نویس>]

این خطا http://barnamenevis.org/forum/attachment.php?attachmentid=50773&stc=1&d=1275987410

[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'
});
</script>



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

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

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)
{

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

}

}


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

[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 (http://ckeditor.com/download)

[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>


اینم فایل ها:

103382

[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>

[مرتضی تقدمی]

سلام

برای رفع مشکلات کار با این ویرایشگر به این مطلب (http://www.hamaseha.ir/projects-articles/0-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%87%D8%A7-%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA/50-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%D8%A7%D9%87-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C-%D9%88-%D9%86%D8%AD%D9%88%D9%87-%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D9%88%DB%8C%D8%B1%D8%A7%DB%8C%D8%B4%DA%AF%D8%B1-CKEditor-%D8%AF%D8%B1-Aspnet.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>dsddddddd<p>").
رخ میده
لطفا راهنمایی ام کنید.

[maryam_saboori]

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

لینک:

clicksite.ir/article.php?id=55

یا این لینک (http://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/uploads/145020854876341.jpg)
http://www.up.downloadkral.com/uploa...0854878952.jpg (http://www.up.downloadkral.com/uploads/145020854878952.jpg)

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