افزودن ویرایشگر متن و مرورگر فایل به دروپال 7 توسط ماژول های CKEditor و IMCE

 

مقدمه

یکی از نقاط ضعف دروپال 7 این است که بطور پیشفرض هیچ ویرایشگر (ادیتور) پیشرفته‌ای در دل خود ندارد. این ضعف قرار است در نسخه‌ی 8 دروپال، با اضافه شدن ویرایشگر CKEditor به دروپال 8 برطرف شود.

یکی دیگر از نقاط ضعف دروپال 7 این است که در ادیتور خود مرورگر فایل (File Browser) ندارد، و مثلا شما نمی‌توانید زمان نوشتن یک متن، عکسی را از کامپیوتر انتخاب کنید، همانجا آپلود و وارد متن کنید.

ادیتور پیشفرض دروپال 7 که برای یک textarea نمایش داده می‌شود

عکس 1 - ادیتور پیشفرض دروپال 7 که زمان ویرایش متن یک textarea نمایش داده می‌شود

در این مطلب یاد می‌گیریم که چطور با اضافه کردن CKEditor و IMCE به سایت دروپالی خود، یک ویرایشگر پیشرفته‌ی اچ‌تی‌ام‌ال بصری از نوع WYSIWYG داشته باشیم (مانند اولین عکسی که بالای مطلب مشاهده می‌کنید) و از دست ویرایشگر زیادی-ساده‌ی دروپال (عکس 1) خلاص شویم!

 

CKEditor ها!

در واقع ما با دو CKEdiitor سر و کار خواهیم داشت:

  1. پلاگین CKEditor، که در واقع اصل ماجراست. CKEditor مخصوص دروپال نیست، بلکه یک ادیتور رایگان است که همه می‌توانند از آن در سایت‌های خود استفاده کنند. می‌توانید ویژگی‌های ادیتور CKEditor را در صفحه‌ی Features | CKEditor و دموی لایوی از این ادیتور را در صفحه‌ی CKEditor demo مشاهده نمایید.

  2. ماژول CKEditor، که در واقع رابط میان پلاگین CKEditor و دروپال است، و از طریق آن می‌توانیم ادیتور رایگان CKEditor را به سایت دروپالی خود اضافه کنیم.

 

نصب و تنظیم CKEditor

 

نصب ماژول Libraries

یکی از پیش‌نیاز‌های نصب ماژول CKEditor، نصب ماژول Libraries API است، ماژول Libraries API تعامل میان ماژول و پلاگین CKEditor را ممکن می‌سازد.

نکته: نصب CKEditor بدون نصب Libraries هم امکان‌پذیر است، اما بهتر است از ماژول Libraries استفاده شود. برای مثال، یکی از مزیت‌های استفاده از Libraries این است که پلاگین و ماژول CKEditor بطور جداگانه در سرور قرار می‌گیرند، و اگر فردا روزی شما ماژول CKEditor را آپدیت نمایید، باعث پاک شدن پلاگین CKEditor نمی‌شود.

ماژول Libraries API را دانلود نمایید، سپس آن را در مسیر sites/all/modules از حالت فشرده خارج کنید. حالا به صفحه‌ی ماژول‌ها (Modules) از سایت خود رفته، ماژول Libraries را فعال نمایید. این ماژول تنظیم خاصی ندارد.

 

نصب پلاگین CKEditor

بسته‌ی «Full Package» پلاگین CKEditor را از صفحه‌ی دانلود CKEditor دانلود نمایید (عکس 2)

بسته‌ی «Full Package» پلاگین CKEditor را دانلود نمایید

عکس 2 - بسته‌ی «Full Package» پلاگین CKEditor را دانلود نمایید

فایل فشرده‌‌ای از ckeditor را که دریافت کردید در مسیر sites/all/libraries از حالت فشرده خارج نمایید. (نکته: اگر اولین بار است که از Libraries استفاده می‌کنید، پوشه‌ی libraries در مسیر sites/all وجود نخواهد داشت، پس آن را خودتان بسازید).

اگر مراحل را درست طی کرده باشید، فایل‌ها و پوشه‌های مربوط به پلاگین CKEditor (برای مثال: ckeditor.js و styles.js) باید در مسیر sites\all\libraries\ckeditor قرار داشته باشند.

نکته: برای کمتر شدن حجم فایل‌های ckeditor، اگر مایل بودید، می‌توانید پوشه‌ی samples و فایل‌های زبان بدون استفاده‌ی داخل پوشه‌ی lang را پاک نمایید (en.js و fa.js را پاک نکنید). با اینکار تقریبا حجم فایل‌ها نصف می‌شود.

 

نصب ماژول CKEditor

بالاخره نوبت به نصب ماژول CKEditor رسید!

آخرین نسخه‌ی پایدار ماژول CKEditor را دانلود کنید و در مسیر sites/all/modules از حالت فشرده خارج کنید. سپس به صفحه‌ی ماژول‌ها (Modules) از سایت خود رفته، ماژول CKEditor را فعال نمایید.

اگر تمامی مراحل را تابحال درست طی کرده باشید، در این مرحله CKEditor به سایت شما اضافه شده است. برای تست اینکه آیا مراحل را درست طی کرده‌اید، به یک صفحه‌ی افزودن محتوا، برای مثال صفحه‌ی افزودن یک صفحه (Basic page) بروید (محتوا > افزودن محتوا > صفحه) (Content > Add content > Basic page).

اگر CKEditor بدون مشکل نصب شده باشد، بخش «متن» (Body) باید به شکل CKEditor در آمده باشد (مشابه عکس 3):

ماژول CKEditor به درستی نصب شده است

عکس 3 - CKEditor به بخش Body اپلای شده است

توجه کنید که تعداد دکمه‌های داخل CKEditor بستگی به «فرمت متنی» (Text format)ی که انتخاب کرده‌اید و تنظیمات CKEditor دارد.

بطور پیشفرض زمانی که فرمت متنی بر روی Full HTML قرار گیرد، تمامی دکمه‌های موجود در اخیار شما قرار می‌گیرد، زمانی که بر روی Filtered HTML باشد تعداد دکمه‌ها محدود می‌شود، و زمانی که Plain text باشد CKEditor غیرفعال شده و همان ادیتور ساده‌ی دروپال فعال می‌شود.

 

تنظیمات ماژول CKEditor

تنظیمات ماژول CKEditor را می‌توانید در مسیر admin/config/content/ckeditor پیدا کنید (یا به صفحه‌ی Modules رفته، بر روی Configure روبروی CKEditor کلیک نمایید).

تنظیمات CKEditor از دو قسمت پروفایل ها (Profiles) و تنظیمات سراسری (Globar settings) تشکیل شده است.

بخش تنظیمات سراسری یک سری تنظیمات کلی را در بر می‌گیرد، که نیازی به تغییر آنها نیست.

بخش پروفایل‌ها اهمیت بیشتری دارد. هر پروفایل لینک است به یک یا چند فرمت متنی (Input format). برای مثال، بطور پیشفرض پروفایل Full لینک است به فرمت Full HTML، به این معنی که پروفایل Full مشخص می‌کند زمانی که فرمت متنی یک فیلد متنی بر روی Full HTML گذاشته شده است، CKEditor به چه صورت باشد.

برای مثال، دکمه‌ی ویرایش (edit) مربوط به پروفایل Full را بزنید تا وارد تنظیمات این پروفایل شوید. همانطور که مشاهده می‌کنید، در این صفحه می‌توانید مشخص کنید زمانی که فرمت متنی Full HTML انتخاب شد، چه دکمه‌هایی نمایش داده شوند، زبان ادیتور چه باشد، و ده‌ها مورد دیگر.

 

نصب و تنظیم IMCE

زمانی که از CKEditor استفاده می‌کنیم، برای اینکه بتوانیم همانجا فایلی را از کامپیوتر انتخاب کرده، آپلود و استفاده نماییم، باید IMCE را نصب کرده و به CKEditor اضافه کنیم.

 

نصب IMCE

ماژول IMCE را دانلود کرده، در مسیر sites/all/modules از حالت فشرده خارج نمایید. سپس به صفحه‌ی ماژول‌ها (Modules) از سایت خود رفته، ماژول IMCE را فعال نمایید.

 

تنظیمات ماژول IMCE

تنظیمات ماژول IMCE را می‌توانید در مسیر admin/config/media/imce پیدا کنید (یا به صفحه‌ی Modules رفته، بر روی Configure روبروی IMCE کلیک نمایید).

صفحه‌ی تنظیمات IMCE از سه بخش اصلی تشکیل شده است: بخش Configuration profiles، بخش Role-profile assignments، و بخش Common settings.

در بخش Common settings یک سری تنظیمات کلی قرار دارد.

در بخش Configuration profiles پروفایل‌هایی برای IMCE تعریف می‌شود، که هر یک از پروفایل‌ها اختیارات و تنظیماتی دارد. برای مثال اینکه کاربران آن پروفایل فایل‌هایی تا حداکثر چه حجمی بتوانند آپلود کنند، حداکثر اندازه‌ی عکس‌هایی که می‌توانند آپلود کنند چقدر باشد، مسیر ذخیره شده فایل‌هایی که آپلود می‌کنند چه باشد، و مواردی از این دست.

و بالاخره در بخش Role-profile assignments مشخص می‌کنیم که هر نقش کاربر (User role) که در سایت تعریف شده، اختیارات و تنظیمات کدام پروفایل را داشته باشد. بطور پیشفرض فقط User-1 یعنی admin سایت است که اجازه‌ی استفاده از IMCE را دارد، اگر مایلید کاربران نقش دیگری اجازه‌ی استفاده از IMCE را داشته باشند، ابتدا پروفایل مناسب آن را بسازید، سپس آن نقش را به پروفایل اختصاص دهید.

حالا زمان آن رسیده که IMCE را به CKEditor متصل کنیم:

به صفحه‌ی تنظیمات CKEditor بروید. تنظیمات CKEditor را می‌توانید در مسیر admin/config/content/ckeditor پیدا کنید (یا به صفحه‌ی Modules رفته، بر روی Configure روبروی CKEditor کلیک نمایید).

برای تک‌تک پروفایل‌های CKEditor که مایلید در IMCE به آنها اضافه شود، مراحل زیر را طی کنید. برای مثال، پروفایل Full را در نظر بگیرید:

بر روی edit در ردیف Full کلیک نمایید، تا به صفحه‌ی تنظیمات این پروفایل هدایت شوید.

در صفحه‌ی تنظیمات، بخش File browser settings را باز کنید. سپس، برای هر سه موردی که با File browser type شروع می‌شوند، IMCE را انتخاب کنید، و تنظیمات را ذخیره نمایید.

حالا اگر به همان صفحه‌ی افزودن صفحه (Content > Add content > Basic page) برگردید و فرمت متنی را بر روی Full HTML قرار دهید، با کلیک کردن بر روی دکمه‌ی اضافه کردن عکس، مشاهده می‌کنید که دکمه‌ی Browser Server روبروی فیلد URL اضافه شده است، که با کلیک کردن بر روی آن پنجره‌ی IMCE باز می‌شود و امکاناتی مانند آپلود مستقیم سایت در هاست، پاک کردن فایل‌ها و ... را در اختیار شما می‌گذارد:

برای انتخاب و آپلود عکس می‌توانیم از IMCE استفاده نماییم

عکس 3 - برای انتخاب و آپلود عکس می‌توانیم از IMCE استفاده نماییم

فراموش نکنید، اگر مایلید زمانی که فرمت متنی بر روی Filtered HTML قرار داده می‌شود هم IMCE را داشته باشید، مشابه مراحل بالا را که برای پروفایل Full طی کردیم، برای پروفایل Advanced هم طی نمایید.

 

موفق باشید

 

برچسب‌ها: 

نظرات

مدت زمانی بود که بی صبرانه منتظر مقالات خوب شما بودم ، الحمدالله که باز هم با مقالات خوب و کاربردیتون صفای تازه‌ای به سایت دادید .

ممنون مجتبی خان، لطف دارید.

بسیار مفید و کارآمد !!
ممنون

خواهش می‌کنم. ممنون از نظرتون.

متشکر از توضیحات عالیتون
فقط اینم ذکر می کردین که برای CKEditor باید "Aggregate ckeditor.js" را در قسمت "Edit the CKEditor Global profile" فعال کنید

خیلی ممنون از نظرتون.
فعال کردن «Aggregate ckeditor.js» ضروری نیست. و همانطور که در توضیحات پایین آن ذکر شده، فعال کردن آن توصیه نشده است (Not recommended).

آیا با IMCE می شه کاری کرد که هر کاربر فقط یک فایل آپلود کند ؟ من محدود کردم از تنظیماتش که 10kb بشه آپ کرد .10 kb بیشتر نمی شه ولی 1000 تا 100kb می شه

متاسفانه من هم هیچ گزینه‌ای در تنظیمات IMCE برای این مورد پیدا نکردم، و برای من هم عجیب است.
اگر مایلید اجازه‌ی آپلود فقط یک عکس را به هر کاربر زمان ساختن یک محتوای جدید بدهید، شاید بهتر باشد از فیلد Image استفاده کنید که در تنظیماتش می‌توانید محدودیت تعداد ایجاد کنید.

پیشنهاد می‌کنم سوالتون رو در انجمن‌های drupalcms.ir/forum هم مطرح کنید. شاید دوستان اونجا برای سوالتون جوابی داشته باشند.

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

ممنون از لطفتون.

عالی بود
خیلی استفاده کردیم

با سلام خدمت شما
دوست عزیز من این ویرایشگر متن را نصب نموده ام اما مشکلی که با آن دارم این است که عکس اضافه شده به متن توسط این ویرایش گر در زمان نوشتن متن مورد نظر نمایش داده می شود اما در سایت نمایش داده نمی شود!
چه راه حلی پیشنهاد میدهید!؟

سلام مهرداد جان،
زمان انتشار مطلب، «فرمت متنی» (Text format) را بر روی «Full HTML» قرار دهید، احتمالا درست می‌شود.

واقعا عالی بود ...

واقعا ممنون ...

سلام. از آموزشتون خیلی استفاده کردم. فقط من یه مشکل اساسی دارم. من میخوام تنها گزینه ممکن برای ویرایش گر متنم full html باشه که به مشتری نگم هر دفعه باید از plain text به full تغییر بدی. همینطور میخوام ckeditor رو برای comment ها غیر فعال کنم. ممنون میشم اگه راهنماییم کنید.

سلام. در مورد سوال اول: این مورد رو باید از بخش «انواع محتوا» تنظیم کنید: «ساختار» (Structure) > «انواع محتوا» (Content types) > نوع محتوای مورد نظر رو انتخاب کنید > تب «مدیریت فیلدها» (Manage Fields) > «ویرایش» (Edit) روبروی فیلد مورد نظر > در قسمت «پردازش متن» (Text processing)، فرمت دیفالت مورد نظر را انتخاب کنید.
در مورد سوال دوم: اگر هدفتون اینه که کاربرها اصلا نتونن از CKEditor برای نظر دادن استفاده کنن، باید با مجوزها (Permissions) اینکار رو انجام بدید. اما اگر هدفتون اینه که فرمت دیفالت متنی Plain text باشه: «ساختار» (Structure) > «انواع محتوا» (Content types) > نوع محتوای مورد نظر رو انتخاب کنید > تب «فیلدهای دیدگاه» (Comment Fields) > «ویرایش» (Edit) روبروی فیلد «نظر» (Comment) > در قسمت «پردازش متن» (Text processing)، فرمت دیفالت مورد نظر را انتخاب کنید.

سلام ببخشید من هر کاری میکنم این editor را نمی تونم فعال کنم تمام کارهای آ»وزش را انجام دادم بازم با این خطا روبرو شدم
The CKEditor component is not installed correctly. Please go to the CKEditor homepage in order to download the latest version. After that you must extract the files to the sites/all/modules/ckeditor/ckeditor or sites/all/libraries/ckeditor directory and make sure that the sites/all/modules/ckeditor/ckeditor/ckeditor.js or sites/all/libraries/ckeditor/ckeditor.js file exists. Refer to the README.txt file for more information

با توجه به پیغامی که نوشتید، احتمالا مرحله‌ی «نصب پلاگین CKEditor» درست انجام نشده است.

با سلام
تماما عین آموزش رفتم تو پیکر بندیه ستش اما تو متن body نیست
با تشکر

سلام. متوجه منظورتون نشدم.

ممنون
خیلی خوب بود.

سلام
مطابق راهنما اجرا کردم اما به صفحه نوشتار اضافه نشد.امکان داره راهنمایی کنید؟
IMCE 7.x-1.8
Libraries 7.x-2.2
CKEditor 7.x-1.13
drupal 7.18

سلام.
چون پیغام خطایی به شما نداده یا مورد خاصی پیش نیومده، متاسفانه نمی‎تونم راهنمایی خاصی بکنم، چون معلوم نیست مشکل از کجا هست.
تنها پیشنهادی که میتونم بکنم اینه که دروپال رو به آخرین نسخه آپدیت کنید و مراحل آموزش رو مجددا از اول انجام بدید و مراقب باشید مرحله‎ای جا نیفته.

افزودن نظر جدید