تو این قسمت کم کم نحوه کار با ادیتور fckeditor که ادیتور مربوط به تقریباً تمام انواع صفحات وب مثل aspx، asp، php، cfm، perl و ... هست تشریح کنم.
این مطالب رو سعی می کنم با ترجمه ای از سایت تولید کنندگان این ادیتور که به تازگی نسخه جدید آن را با نام ckeditor منتشر کرده است بیان کنم.
در ابتدا fckeditor چیست؟
فضر کنید شما می خواهید یک وب سایت طراحی کنید و در قسمت مدیریت می خواهید برای مدیر سایت این امکان را فراهم کنید که مطلبی را به مطالب سایت اضافه نماید. در این زمان به ادیتور نیاز دارید.
یک ادیتور کم حجم برای صفحات وب است. این نرم افزار! اکثر توابع متداول نرم افزارهای ویریشگر متن مثل ورد را برای کاربران فراهم می کند. همین جایی که من در حال تایپ متن برای ارسال پست هستم نیز از یک ادیتور بسیار ساده استفاده می کند. تفاوت این ادیت.ر با fckeditor در این است که این ادیتور WYSIWYG نیست یعنی نتیجه کار را تا قبل از انتشار یا پیش نمایش نمی بینید ولی در fckeditor اینگونه نیست و مثل نرم افزار ورد نتیجه را در همان صفحه ادیتور می بینید.
این نرم افزار همانطور که گفتم با تمام انواع صفحات سازگار است و با انواع مختلف مرورگر سازگار است.
از کجا آن را پیدا کنم؟
با یک جستجوی ساده در گوگل می توانید این نرم افزار را پیدا و دانلود نمایید. در حال حاضر از سایت سازنده نمی توانید آن را پیدا کنید زیرا به طور کلی ckeditor را جایگزین آن نموده اند. بسیاری از سایت های ایرانی هم آن را برای دانلود قرار داده اند.
چگونه fckeditor را نصب کنم؟
1- آن را دانلود نموده و از حالت زیپ خارج نمایید.
2- فولدری که نام "fckeditor" دارد را در ریشه (دقت نمایید که حتما در ریشه) سایتتان آپلود کنید.
همین - نصب شد
چگونه از fckeditor استفاده کنیم؟ (در پروژه هایمان)
بسیار خوب برای این کار باید به این نکته توجه کنید که وب سایت شما با چه زبانی است. من درباره حالات مختلفی که ممکن است برای شما پیش بیاید توضیح می دهم (البته حالات متداول)
الف) جاوااسکریپت: به طور کلی ادیتورها با جاوا اسکریپت نوشته می شوند و شما می توانید بدون توجه به زبان پروژه تان از حالت جاوا اسکریپت این ادیتور (نه به عنوان یک کنترل مثلاً برای برنامه های .net) استفاده نمایید.
گام1- ابتدا باید فایل اسکریپت را به صفحه وبتان لینک کنید. برای این کار کد زیر را به بخش <head> صفحه وبتان اضافه نمایید:
کد:
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
گام 2- الان می توانید به راحتی از این ادیتور در صفحه وبتان استفاده نمایید. سه راه برای قرار دادن این ادیتور در هر نقطه از صفحه تان که مورد نیاز است وجود دارد.
راه اول: روش درون خطی (بهترین روش): در body وب سایتتان هر جا می خواهید این ادیتور قرار بگیرد کد زیر را قرار دهید:
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "/fckeditor/";
oFCKeditor.Create();
</script>
راه دوم: تبدیل یک Textarea به یک ادیتور: در متد inliad تگ <head> صفحه کد زیر را قرار دهید:
کد:
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
و سپس از کد زیر در داخل <BODY> صفحه تان استفاده نمایید.
کد:
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
روش سوم: روش CreateHtml() (برای آژاکس): برای یک نرم افزار آژاکس شما باید به عنوان مثال از کد زیر استفاده نمایید:
کد:
کد:
var div = document.getElementById("myFCKeditor");
var fck = new FCKeditor("myFCKeditor");
div.innerHTML = fck.CreateHtml();
مثال 1
کد:
کد:
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "/fckeditor/";
oFCKeditor.Create();
</script>
</form>
</body>
</html>
مثال 2
کد:
کد:
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>
منبع : aiapir
