استفاده از ویرایشگر سورس باز FCKeditor در ASP.NET

, , پیغام بگذارید

سلام خدمت همه دوستان و همراهانم
یک مطلب عالی تو نت پیدا کردم ، دیدم حیفه که دوستان و همراهان همیشگی سایت رو بی نصیب بذارم

این آموزش عالی رو مثل همیشه با ذکر منبع براتون قرار میدم ، امیدوارم که بخونید و لذت ببرید (من که کلی لذت بردم ، همچین روحم شاد شد )

 

مقدمه من : یکی از مشکلات همه طراحان وب همیشه این بوده که بتونن تو سایتاشون از یک ادیتور خوب و کامل با امکاناتی شبیه word برای فرم دهی مطالب استفاده کنن
یکی از بهترین ادیتورها که اغلب طراحان دارن باهاش کار می کنن FCK Editor است.

آموزش :

این مقاله طریقه افزودن، پیکربندی و بکارگیری ادیتور FCKeditor را در وب سایتهای بر پایه ASP.NET تحت پوشش قرار خواهد داد. پیش فرض این مطلب این است که شما تصمیم به اضافه کردن این ادیتور به سایتی از قبل ایجاد شده را دارید. بنابراین در صورتیکه هنوز اقدام به ایجاد سایتی که در آن از این ادیتور استفاده کنید را نکرده اید با اجرای Visual Studio و انتخابFile > New > Web Site و یا ترکیب کلیدی Shift + Alt + N وب سایتی را در مسیر دلخواه ایجاد کنید.

یکپارچه سازی FCKeditor و ASP.NET

اولین قدم، دریافت FCKeditor و کنترل FCKeditor.net از سایت اصلی است. بخاطر داشته باشید که شما هم به کنترل و هم به فایلهای JavaScript ادیتور نیاز دارید.

 

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

FCKeditor_2.6.4.1.zip شامل فایلهای پیکربندی و کد های اسکریپت ادیتور است. محتوی این فایل یعنی پوشه fckeditor را در ریشه سایت خود کپی کنید.

در صورتیکه سایت شما حاوی پوشه Bin در ریشه آن نیست با کلیک راست روی نام سایت خود در Solution Explorer و انتخاب Add ASP.NET Folder و سپس Bin آنرا ایجاد کنید.

Solution Explorer و افزودن پوشه Bin

حال فایل FredCK.FCKeditorV2.dll را از مسیر FCKeditor.Net_2.6.3\bin\Release\2.0Bin سایت خود کپی کنید. فایل FCKeditor.Net_2.6.3.zip، در داخل پوشه

FredCK.FCKeditorV2.dll در پوشه Bin

قدم بعدی افزودن Reference فایل FredCK.FCKeditorV2.dll به وب سایت است. برای اینکار بار دیگر روی وب سایت خود کلیک راست کرده و گزینه Add Reference را انتخاب کنید.

افزودن Reference فایل FredCK.FCKeditorV2.dll

از پنجره Add Reference برگه Browse را انتخاب کرده و سپس FredCK.FCKeditorV2.dll را از پوشه Bin انتخاب کنید.

Add Reference Dialog in ASP.NET

حالا می توانیم کنترل FCKeditor را به جعبه ابزار Visual Studio اضافه کنیم.

روی یکی از برگه های جعبه ابزار مثلاً General کلیک راست کرده و گزینه Choose Items را انتخاب کنید.

منوی Choose Item از ASP.NET Toolbox

در پنجره باز شده و در برگه NET Framework Components. روی دکمه Browse کلیک کرده و در مسیر پوشه Bin سایت خود، فایل FredCK.FCKeditorV2.dll را انتخاب کنید.

Choose Toolbox Items dialog in ASP.NET

بعد از تایید این پنجره آیکن کنترل FCKeditor را در پایین برگه ای که در جعبه ابزار انتخاب کرده اید، مشاهده خواهید کرد.

تنظیم FCKeditor برای بکارگیری در ASP.NET

فایل web.config سایت خود را باز کرده و در قسمت <appSettings> خط زیر را اضافه کنید:

1.<add key="UserFilesPath" value="~/UserFiles/" />

مسیر مشخص شده برای UserFilesPath به پوشه محل قرارگیری تصاویر و فایلهایی اشاره می کند که توسط ادیتور Upload می شوند. توصیه می کنم از همین مقدار پیش فرض برای نگهداری فایلهای خود استفاده کنید.

پوشه UserFiles را در ریشه سایت خود ساخته و مجوز (Permission) خواندن و نوشتن را به آن بدهید.

فایل fckconfig.js را از پوشه fckeditor در ریشه سایت باز کرده و خطوط زیر را در آن پیدا کنید:

1.var _FileBrowserLanguage    = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
2.var _QuickUploadLanguage    = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

حال زبان php را به aspx تغییر دهید. یعنی:

1.var _FileBrowserLanguage    = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
2.var _QuickUploadLanguage    = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

نکته

فایل fckconfig.js حاوی تنظیمات عمومی ادیتور FCKeditor، مانند حذف و اضافه کردن دکمه ها و امکانات آن است. هر گونه تغییری که در این فایل و یا فایلهای مشابه می دهید را به نوعی علامتگذاری کنید تا قسمتهای تغییر یافته برای اصلاحات احتمالی بعدی به راحتی پیدا شوند. بهترین کار گرفتن یک کپی پشتیبان از فایل fckconfig.js برای بازگرداندن تنظیمات به حالت پیش فرض در موارد خاص است.

فایل config.ascx را از مسیر fckeditor > editor > filemanager > connectors > aspx پیدا کرده و تابع زیر را در آن پیدا کنید:

1.private bool CheckAuthentication()
2.{
3. // ...
4. return false;
5.}

تا زمانی که این تابع مقدار False را باز می گرداند Administrator سایت امکان مشاهده و Upload کردن فایلها توسط ادیتور را نخواهد داشت. این تابع وظیفه اعتبار سنجی کاربری را که در حال کار با ادیتور است را بر عهده دارد. بدون این تابع هر کاربری می توانست فایل Upload کرده یا محتویات پوشه UserFiles را ببیند. احتمالاً تا اینجا سیستمی برای مدیریت و اعتبار سنجی کاربران سایت خود طراحی کرده اید. پس در این تابع به نوعی اعتبار و Administrator بودن کاربر جاری را چک کنید و در صورت صحت مقدار True را بازگردانید. مثالی برای تایید اعتبار کاربر جاری می تواند اینگونه باشد:

1.return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );

در حالیکه مقدار IsAuthorized Session هنگام Login کردن کاربر True شده است.

نکته

به هیچ وجه بدون اعتبار سنجی کاربر، مقدار True را باز نگردانید.

در نهایت در همین فایل خط زیر را پیدا کنید:

1.// URL path to user files.
2. UserFilesPath = "/userfiles/";

مطمئن شوید که مقدار UserFilesPath معادل همان مقداری باشد که در web.config وارد کرده اید.

نکته

برای تنظیم مواردی که در منوی Style ادیتور FCKeditor لیست شده اند فایل fckstyles.xml را در ریشه پوشه fckeditor سایت پیدا و ویرایش کنید. کنترل و تنظیم دقیق خروجی های ادیتور برای حفظ ساختار استاندارد سایت حیاتی است. برای اطلاعات بیشتر مطلب “10 خصوصیت یک ادیتور تحت وب مناسب برای سایتهای استاندارد” را مطالعه کنید.

طریقه استفاده از FCKeditor

برای استفاده از این ادیتور دو راه وجود دارد:

  1. کشیدن و رها کردن کنترل FCKeditor از جعبه ابزار به صفحه.
  2. اضافه کردن کدهای لازم بصورت دستی به کد صفحه به صورت زیر:

رجیستر کردن کنترل FCKeditor در ابتدای صفحه:

1.<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

سپس افزودن تگ این ادیتور در داخل <"form runat="server>:

1.<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server"></FCKeditorV2:FCKeditor>

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

نکته

برای بدست آوردن محتوی ورودی کاربر در ادیتور از عبارت fCKeditorInstanceName.Value استفاده کنید. برای اطلاعات بیشتر محتویات پوشه samples_ را از فایل FCKeditor.Net_2.6.3.zip بررسی کنید.

 

پاسخ دادن

anti spam *