آموزش دروپال - قسمت چهارم - اضافه کردن ویرایشگر متنی

در این قسمت قصد دارم نحوه اضافه کردن ویرایشگر متنی جهت ایجاد و ویرایش راحت و مطمئن تر متون را آموزش بدهم.

برای این کار نیاز به اضافه کردن یک ماژول داریم. اگه بخوام تشبیه کنم هسته اصلی دروپال که تا اینجا ما نصب کردیم مثل موتور و بدنه یک ماشین می مونه. به تنهایی ما یک ماشین داریم که می تونیم باهاش رانندگی کنیم یعنی یک سایت داریم که توش مطلب بذاریم ولی اگر بخواهیم توی ماشینمون مثلا آهنگ گوش بدیم باید براش سیستم پخش کننده موسیقی نصب کنیم یا اگر بخواهیم توی سایتمون برخی از ویژگی ها مثل داشتن ادیتور (ویرایشگر) یا سایر مواردی که بعدا می بینیم را اضافه کنیم باید ماژول هایی را به این هسته اصلی اضافه کنیم که وظیفه اجرای این کارها را بر عهده دارند.

برای دانلود و نصب یک ماژول جدید باید در مرحله اول به سایت خود دروپال به نشانی "www.drupal.org" مراجعه کنید و از طریق منوی بالای صفحه لینک "Download and Extend" را انتخاب کرده و در صفحه بازشده از قسمت پایین صفحه به دنبال ماژول مورد نظر خود باشید.

یا از طریق جستجو بالای سایت ابتدا نام ماژول مورد نظر را وارد کرده و روی لینک "Refine your search" کیک کنید تا منوی آن باز شود و تیک "Modules" را فعال کنید. در این جا من به دنبال ماژولی به نام "ckeditor" میگردم که همان ماژول ایجاد و مدیریت ویرایشگر متنی است که در حال حاضر با توجه به تجربیاتم بهترین ماژول ویرایشگر است که توصیه می کنم حتما از این ماژول استفاده کنید.

حتی می تونید توی خود گوگل هم اسم ماژولتون را بنویسید که اکثرا لینک های اول یا دوم آدرس ماژول مورد نظر شما می باشد. مثلا در تصویرزیر لینک دوم به سایت دروپال است و لینک اول به سایت اصلی این ویرایشگر است. پس لینک دومی را انتخاب می کنیم:

پس از مراجعه به صفحه اصلی ماژول با توضیحات ماژول روبرو می شوید که بد نیست این توضیحات را که اکثرا کوتاه هستند مطالعه کنید که موارد جالبی از کاربردها و دلایل استفاده از این ماژول را به شما گوشزد می کنند. از جمله قسمت های مهم هر ماژول پیش نیازهاهستند که در صورتی که برای استفاده از این ماژول نیاز به نصب سایر ماژول ها باشد در این قسمت ذکر می شود که حتما نگاهی به آن بیندازید. مثلا ماژول پنل (panels) که یکی از ماژول های بسیار زیبا وکاربردی است برای کار نیاز به ماژولی به نام "ctools" دارد.

از لینک پایین صفحه متناسب با نسخه دروپال خود ماژول را دانلود کنید. حتما به یاد داشته باشید که بهتر است ماژول هایی که به حالت پایدار یا اصطلاحا "Recommended Releases" رسیده اند را دانلود کنید که به رنگ سبز هستند و تا حد امکان به سراغ ماژول هایی که در حال پیاده سازی یا "Development Releases" هستند نروید که اگر بروید هر چه دیدید از چشم خودتان دیدید و شاید چیزهای خوش آیندی نبینید!

پس از دانلود فایل دانلود را "Extract" کنید. اگر از "winrar" استفاده می کنید روی فایل دانلود شده راست کلیک کرده و گزینه "Extract here" را انتخاب کنید. حال شما یک پوشه با نام آن ماژول دارید که درون آن ، فایل های مرتبط با آن ماژول خاص است.

به محل نصب سایت خوتان بروید. همان جا که فایل "index.php" دروپال قرار دارد. پوشه ای با نام "sites" مشاهده خواهید کرد. وارد این پوشه شوید و به پوشه "all" بروید. در این جا نیز وارد پوشه "modules" بشوید. حال در این جا ، پوشه ماژولی که دانلود کرده و از حالت فشرده خارج کرده اید را کپی کنید. مثلا برای این ماژول خاص مسیر می شود: C:\xampp\htdocs\drupalwaves\sites\all\modules\ckeditor

که "drupalwaves" نام پوشه سایت من است.

این ماژول خاص نیاز به دانلود برخی فایل های اضافه تری دارد.اگر وارد پوشه "ckeditor" شوید ، یک پوشه دیگر بازهم با همین نام "ckeditor" می بینید. وارد آن شوید. یک فایل متنی با نام "COPY_HERE.txt" داخل آن است ، آن را باز کنید. در این فایل گفته شده که شما باید به سایت https://ckeditor.com مراجعه کرده و آخرین نسخه ویرایشگر را دانلود کنید و در همین مکان در کنار این فایل متنی قرار دهید. به سایت بالا می رویم ولی آخرین نسخه را دانلود نمی کنیم. زیرا بر حسب تجربه شخصی اگر از نسخه 4 استفاده کنیم با مشکل "Browse" کردن روبرو می شویم که هنوز علت آن و نحوه رفع آن را پیدا نکرده ام.

 پس نسخه 3.6.6 را دانلود کنید. حال این فایل فشرده شده را به داخل مسیر C:\xampp\htdocs\drupalwaves\sites\all\modules\ckeditor\ckeditor

ببرید و در آن جا از حالت فشرده خارج کنید تا محتویات آن به صورت زیرباشد و می توانید فایل فشرده را پاک کنید:

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

برای این که بتوانید در میانه متن تصویر آپلود کنید باید یک ماژول اضافه نصب کنید. ماژول "imce" . نصب آن به همان صورت استاندارد است که پوشه را از حالت فشرده خارج کرده و در محل ماژول ها یعنی " C:\xampp\htdocs\drupalwaves\sites\all\modules " کپی کنید. سپس از منوی مدیریت ، ماژول ها را انتخاب کرده ودر صفحه ماژول ها تیک کنارماژول مورد نظر رابزنید و ذخیره کنید.

نیاز داریم که ماژول ckeditor را پیکر بندی کنیم. از منوی مدیریت پیکربندی را انتخاب کرده و به صفحه مدیریت ماژول ckeditor بروید.

در این جا لازم است توضیح مختصری در رابطه با فرمت های متنی بدهم. در دروپال چندین حالت ورودی متن داریم ، که جهت مشاهده آن ها از صفحه پیکربندی گزینه " فرمت های متنی" را انتخاب کنید.

  • Filtered HTML : این فرمت باعث می شود که فقط برخی از تگ های html قبول شوند. مثلا اگر شما در این حالت باشیدو آدرس یک تصویر را به صورت <img src=”address” /> وارد کنید ، تصویر را نمایش نمی دهد چون تگ img در این فرمت فیلتر می شود. از جمله موارد کاربرد این حالت برای کامنت های وب سایت است که به این صورت می توانید مطمئن شوید که موارد و کدهای اضافی و مخرب امکان ورود نخواهند یافت.
  • Full HTML : در این فرمت تقریبا تمامی فرمت های شناخته شده امکان ورود می یابند.
  • Plain text : که فقط متن ساده بدون هیچ فرمتی را می پذیرد.

البته امکان اضافه کردن سایر فرمت ها از جمله فرمتی که کد php یا javascript را بپذیرد وجود دارد.

فقط این نکته را متذکر شوم که برای پشتیبانی بهتر از زبان فارسی وارد پیکربندی "Full HTML" شوید و درقسمت "فیلترهای فعال" تیک تمامی گزینه ها به جز را "URLها را به پیوندها تبدیل کن " بردارید و پیکربندی را ذخیره کنید.

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

حال برمی گردیم به صفحه پیکربندی ویرایشگر(ckeditor). در این جا شما باید نحوه نمایش ویرایشگر را تنظیم کنید. مثلا از میان پروفایل ها ، "FULL" را که برای حالت استفاده از "Full HTML" تنظیم شده را انتخاب کرده و ویرایش روبروی آن را کلیک می کنیم.

در صفحه ظاهر شده موارد پیکربندی مختلفی عنوان شده از جمله :

  • Basic Setup : که می توان نام این پروفایل و همچنین حالت های ورود متنی که این پروفایل در آن فعال باشد را انتخاب کنیم.
  • Editor Appearance : در این قسمت نوع نمایش و دکمه های مورد نیاز را مشخص می کنیم. حالت          "Show the disable/enable rich text editor toggle " را روی "نمایش" بگذارید تا امکان حذف ویرایشگردر صورتی که به آن نیاز نبود ( مثلا وارد کردن php ) باشد.

 

پس از نصب اگر در همین پیکربندی ویرایشگر قسمت File Browser Settings را باز کنید می توانید نوع مرورگر را در قسمت File browser type (Link dialog window) به "imce" تغییر دهید.

و پروفایل را ذخیره کنید.

حال به صفحه ایجاد مقاله بروید. اگر تمامی مراحل را درست طی کرده باشید می بینید که ویرایشگر نمایش داده می شود . از پایین قسمت بدنه اگر حالت ورودی متن را به full html عوض کنید نوع ویرایشگر نیز متناسب با پروفایل آن عوض می شود و مثلا امکان آپلود کردن عکس در میانه متن امکان پذیرمی شود.

برای آپلود عکس دکمه تصویر را انتخاب کنید و در پنجره باز شده گزینه "Browse server" را انتخاب کرده و فایل عکس خود را آپلود کنید و آن را "Insert" نمایید.

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

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

در قسمت بعدی به سراغ نحوه نمایش فایل ها توسط ماژول views خواهیم رفت. پس برای تمرین چندین مقاله مختلف در وب سایت خود ایجاد کنید و برای آن ها حتما عکس هم بگذارید تا نمایش آن ها را به صورت های مختلفی در سایت اعمال کنیم.

باتشکر از حضورتون

موفق باشیددوستان

با سلام
ممنون از زحمات شما
عالی است

سلام بسیار مشتاقانه مطالب وب سایتتون رو دنبال میکنم. صمیمانه دستان را میفشارم. شاد و سربلند و پیروز باشید. منتظر ادامه آموزش ها هستم. در پناه حق باشید. عالی بود....

سلام
سپاسگذاری می کنم به خاطر مطالب خوب و کاربردی تون!!!
منتظر مطالب بعدی هستیم
سپاسگذارم

بسیار عالی
ممنون

سلام مهندس . خیلی عالی و کامل بود . تشکر .

بسیار سپاسگذارم
آموزش بسیار کاربردی و مفیدی بود

آقا مرسی
سایتتون عالی و توضیحاتش عالیتر
موفق باشین

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

اضافه کردن پیام جدید

Basic HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p> <br> <span> <img src alt data-entity-type data-entity-uuid data-align data-caption width height>
  • No HTML tags allowed.