با سلام خدمت دوستان

به علت زیادی درخواست ها برای کار با ادیتور ckeditor و تاپیک های گوناگون ایجاد شده در این چند روز این آموزش کوتاه و ساده را تقدیم میکنم :

نحوه قرار دادن ادیتور در صفحه+ کار کردن با آن + شخصی سازی ادیتور ckeditor

برای قرار دادن ادیتور درون صفحه ابتدا ValidateRequest صفحه را برابر با false قرار دهید :



<%@ Page Language="C#‎" ValidateRequest="false" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>


خب حالا پوشه ای به نام editor درون سایت ساخته و فایل های ادیتور را دورن آن کپی کنید و بعد از آن این دو تگ را درون صفحه اضافه کنید :



<link href="Editor/contents.css" rel="stylesheet" type="text/css" />

<script src="Editor/ckeditor.js" type="text/javascript"></script>


اکنون یک textbox درون صفحه قرار دهید و مقدار TextMode آن را برابر MultiLine قرار دهید :



  <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height="390px" 

            Width="788px"></asp:TextBox>


خب اکنون باید درون pageload صفحه این کد را قرار دهید :



String StrScript = "CKEDITOR.replace( '" + TextBox1.ClientID + "',{skin : 'kama'});";

ClientScript.RegisterStartupScript(this.GetType(), "Editor", StrScript, true);




اکنون میتوانید صفحه را اجرا و ادیتور را مشاهده کنید ...
برای آنکه skin ادیتوررا تغییر دهید کافیست در کدی که درون pageload صفحه نوشته اید کد skin : 'kama' را تغییر دهید

مقادیری که میپذیرد را از پوشه skin درون فایل های ادیتور مشاهده کنید ...

برای ذخیره سازی متن درون ادیتور کافیست خاصیت text از textbox1 را بگیرید .... ( درج در دیتابیش یا ... )
حال برای آنکه در toolbar تنها امکانات دلخواه خود را داشته باشیم باید toolbat ادیتور را ویرایش کنیم
برای نام گذاری یک toolbar در ادیتور به این صورت عمل میکنیم :

config.toolbar_<name>

مانند :


config.toolbar_Medium
config.toolbar_Basic
config.toolbar_Full

اکنون برای اینکه امکانات درون toolbar را کم یا زیاد کنید باید کدهای تابع زیر را کم و زیاد کنید ...
من کد toolbar_full را میزارم که همه کنترل ها را دارد ...



CKEDITOR.config.toolbar_Full =

[

	['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','Just  ifyBlock'],

	['BidiLtr', 'BidiRtl' ],

	['Link','Unlink','Anchor'],

	['Image','Flash','Table','HorizontalRule','Smiley',  'SpecialChar','PageBreak'],

	'/',

	['Styles','Format','Font','FontSize'],

	['TextColor','BGColor'],

	['Maximize', 'ShowBlocks','-','About']

];



و میتوانید کد toolbar_Basic را نیز ببینید ...



	config.toolbar_Basic =



    	[   



		['Bold', 'Italic', 'Underline', 'Strike', '-','JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Source'],

		'/',

		['Font', 'FontSize', 'Format', '-']

		

    	];



محل نوشتن کدهای این toolbar ها درون فایل config.js که در بین فایل های ادیتور میباشد هست ...
حال برای اینکه ادیتور را با toolbar دلخواه خود در صفحه قرار دهیم این کد را باید درون pageload به جای کد قبلی قرار دهیم 






String StrScript = "CKEDITOR.replace( '" + TextBox1.ClientID + "', {toolbar:'نام تولبار'});";

        ClientScript.RegisterStartupScript(this.GetType(), "Editor", StrScript, true);
هاد میکنم در صورتی که از toolbar خاصی استفاده نمیکنید آنرا حذف کنید ...

پشن

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

لینک دانلود ckeditor از سایت خودش :

http://ckeditor.com/download

از سرور پرشین گیگ :

http://www.persiangig.com/pages/down...or_3.4.1_2.zip