دروپال 7 مانند نسخه ششم ویرایشگر بصری داخلی ندارد.

راهنمای کاربر: نحوه نصب و پیکربندی ویرایشگر ckeditor در دروپال 7. دانلود تصاویر از Elfinder.

در دروپال 7، مانند نسخه ششم، باید ویرایشگر را نصب کنیم. البته، شما نمی توانید این کار را انجام دهید و فقط با دیدن کد، متن بنویسید. اما من ویرایشگرهای بصری را دوست دارم. اجازه دهید یادآوری کنم که ما نصب و پیکربندی دروپال 6 را در درس 2 مطالعه کردیم:

امروز ما به بسته نرم افزاری cms کار با ویرایشگر نگاه خواهیم کرد.
دروپال 7.17
CKEditor - ویرایشگر HTML WYSIWYG 7.x-1.11
CK Editor 4.0
elFinder فایل منیجر 7.x-0.7
اسکریپت elFinder - elfinder-1.2

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

نحوه نصب ویرایشگر WYSIWYG CKEditor بر روی آخرین CMS دروپال 7.17

CKEditor انعطاف پذیر است و ویرایشگر راحت. رابط کاربری آن شبیه یک Word است.
ابتدا اسکریپت ویرایشگر و سپس خود ماژول را نصب کنید. این ماژول است که آن را به سایت متصل می کند.
توجه داشته باشید.
من نسخه های خاصی را در زمان نوشتن مشخص می کنم.

1. دانلود ماژول ]]> https://drupal.org/project/ckeditor ]]>
آرشیو را در یک پوشه باز کنید سایت/همه/ماژول ها . کل مسیر به این صورت است: سایت/همه/ماژول ها/ckeditor

2. ویرایشگر را دانلود کنید CK Editor 4.0 ]]> https://ckeditor.com/download ]]>
برای فایل های ویرایشگر، باید یک پوشه کتابخانه ها در آن ایجاد کنید سایت/همه/
مسیر باز کردن آرشیو به صورت زیر خواهد بود: site/all/libraries/ckeditor

در صفحه ماژول ها را فعال و سپس پیکربندی کنید.
به "پیکربندی - CKEditor - نمایه جهانی CKEditor - ویرایش" بروید. در اینجا باید ورودی را در قسمت "مسیر به CKEditor" بررسی کنید - باید باشد %l/ckeditor . این ورودی نشان می دهد که ویرایشگر در پوشه است کتابخانه ها .

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

اگر ویرایشگر نمایش داده نمی شود:
صحت انتشار ماژول انتخاب شده برای نسخه دروپال خود را بررسی کنید. سعی کنید به نسخه دیگری تغییر دهید.

سفارشی کردن پروفایل های CKEditor

1 مرحله تنظیم نمایه پیشرفته در CKEditor.
پیشرفته (پیشرفته، با آپلود تصویر و غیره)
به "Management > Configuration > ckeditor - admin/config/content/ckeditor" بروید
نمایه پیشرفته را تنظیم کنید، روی پیوند "تغییر" در مقابل نمایه پیشرفته کلیک کنید.
ظاهر ویرایشگر (ظاهر ویرایشگر):
رنگ را انتخاب می کنیم.

دکمه های مورد نظر خود را بکشید و رها کنید.

ما زبان روسی را انتخاب می کنیم.

تنظیمات مرورگر فایل
ما فایل منیجر را به دلخواه خود انتخاب می کنیم، در زیر در متن نصب و پیکربندی مدیر فایل برای Drupal 7 - Elfinder وجود دارد.

2 مرحله. تنظیمات نمایه کامل در ckeditor
ما به "مدیریت - پیکربندی - ckeditor" می رویم - admin/config/content/ckeditor
شما می توانید تنظیمات را به طور پیش فرض رها کنید، زبان روسی را انتخاب کنید.

ساده ترین گزینه استفاده از کامل (کامل) و پیشرفته (پیشرفته) است - برای کسانی که ثبت نام کرده اند، همچنین تغییرات شما. ایجاد کنید برای کاربران ناشناسنمایه ساده، جایی که خودکار را علامت گذاری کنید تغییر htmlمتن در قالب ساده

کمی از بررسی Drupal 7، چنین نقد مثبت کوچکی.
در هفت به طور پیش فرض یک فیلد برای آپلود تصاویر وجود دارد. یک ویژگی بسیار مفید. به هر ماده می توان یک تصویر اختصاص داد - نوعی آرم. در اطلاعیه، این تصویر به طور خودکار کاهش می یابد.

هنگام کار با ویرایشگر با چه مشکلاتی مواجه می شوید

CKeditor همه دکمه ها را نشان نمی دهد

برای انجام این کار، بررسی کنید که کدام نسخه را در https://ckeditor.com/download دانلود کرده اید

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

نصب و پیکربندی فایل منیجر Elfinder برای Drupal 7

مجموعه ای از ویرایشگر و مدیر فایل کار شما را بسیار لذت بخش می کند. می توانید یک تصویر را در هر جایی از سرور یا رایانه خود وارد کنید. ویژگی های لازم را به آن اختصاص دهید، یک توضیح جایگزین. متاسفانه باید نصب بشه
مدیر فایل CKEditor نه تنها تصاویر، بلکه فایل های دیگر را نیز بارگیری می کند.
همانند ویرایشگر، باید ماژول و اسکریپت را دانلود کنید.

1. دانلود ماژول ]]> https://drupal.org/project/elfinder ]]>

آرشیو را باز کنید و فایل ها را در پوشه site/all/modules/elfinder قرار دهید

1. دانلود اسکریپت ]]> ]]>

از جانب آخرین نسخه هانزدیک شد elfinder-1.2.
سپس آرشیو را از حالت بسته خارج کنید و فایل ها را در پوشه site/all/libraries/elfinder قرار دهید
یک ویژگی کوچک در اینجا وجود دارد، پوشه باید elfinder نامیده شود.

1. راه اندازی. برای این ما می رویم admin/config/elfinder - "پیکربندی - ماژول ها - elFinder - پیکربندی".

در "دایرکتوری ریشه" ما انتخاب را برای "استفاده از پیش فرض های سیستم" - پیش فرض در دروپال - باقی می گذاریم.

تنظیمات پیش فرض admin/config/media/ file-system:

در صفحه Content - admin/content، خواهید دید برگه جدید"فایل ها". اکنون فقط روی آن کلیک کنید و رابط فایل منیجر را مشاهده خواهید کرد.

و آخرین مرحله ترکیب ویرایشگر با مدیر فایلبه یک ابزار کاربردی
در بالا، من قبلاً تنظیم نمایه های ویرایشگر را توضیح داده ام.

تکرار می کنم:
را انتخاب کنید نوع مرورگر فایل - elFinder . در صورت تمایل می توانید پوشه دانلود فایل ها را نیز در اینجا تغییر دهید.

حالا همه چیز باید کار کند، اما من نمی توانم بفهمم که چرا این در هسته دروپال نیست؟ در عوض، چندین گزینه ویرایشگر برای هر سلیقه. که خیلی خوبه ;)

لینک کاری جدید

دروپال 7.21
CKEditor - ویرایشگر HTML WYSIWYG 7.x 1.13
CKEditor - ckeditor_4.1_standard
elFinder فایل منیجر 7.x-0.8
اسکریپت elFinder - elfinder-1.2

با افزودن فضاهای خالی جدید () با هر ویرایش مشکلی وجود دارد.

مشخص شد که هنگام درج یک تیزر دروپال یک اشکال ظاهر می شود. اگر مقاله اعلامیه را جدا نکرده باشد، هیچ اشکالی وجود ندارد.

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

مسیر تنظیم نمایش تبلیغات:

صفحه اصلی » مدیریت » ساختار » انواع محتوا » مقاله » مدیریت نمایش

مشاوره. باید راه اندازی شود ظاهردکمه تیزر دروپال را در ویرایشگر تصویری در هر دو نمایه حذف کنید.

مقالاتی برای یادگیری دروپال:

مفاهیم کلی برای مبتدیان

چگونه دروپال و ماژول های آن را روسی کنیم.

مجموعه ای از ماژول های وبلاگ

راهنمای سریع.

من از BUEditor در سایت خود استفاده کردم - یک ویرایشگر ساده و راحت، اما برای کاربران خیلی راحت نیست. من اغلب به نصب CKEditor فکر می کردم، اما به نظرم نوعی هیولا بود، اما در واقع همه چیز چندان ترسناک نبود.

نحوه نصب ماژول خواندن.

پس از اتصال از طریق ماژول خود، در صفحه admin/config/content/ckeditor/edit/profile_recognition در تب ظاهر سردبیر، در فصل پلاگین هاچک باکس فعال سازی ظاهر می شود. روشن کنید، ذخیره کنید، بررسی کنید.

3. لینک ها را درج کنید.خارج از کادر، کادر محاوره‌ای درج پیوندها حاوی یک سری چیزهای غیر ضروری و نامفهوم است. ما آن را با پلاگین لینک ساده جایگزین می کنیم. نحوه نصب، به پاراگراف 2 مراجعه کنید. ما متصل می شویم (به مورد 1 مراجعه کنید):

Config.extraPlugins = "SimpleLink";

یک آیکون (دکمه) جدید افزونه نیز ظاهر می شود.

4. درج تصاویر.در اینجا همه چیز مانند پیوندها است، می توانید پلاگین Simple Image را برای درج تصاویر با لینک قرار دهید.

Config.extraPlugins = "SimpleImage";

یا با استفاده از ماژول آپلود با یک کلیک، تصاویر را آپلود کنید. . ادامه مطلب من روی روش دوم مستقر شدم، اگرچه از هر دو در BUEditor استفاده کردم.

تنها چیزی که می‌خواهم اضافه کنم این است که افزونه Enhanced Image به دو افزونه دیگر Widget و Lineutils نیاز دارد.

نمی‌توانستم بفهمم که چرا افزونه شروع نمی‌شود تا زمانی که به گزارش نگاه کردم

5. ظاهر.به طور پیش فرض، پوسته Moono استفاده می شود، اما من می خواستم ظاهر را به ظاهر BUEditor بیاورم.

این چیزی است که BUEditor به نظر می رسد

7. جای نگهدارنده.برای افزودن مکان نگهدار، افزونه را نصب کنید (مرحله 2 را ببینید) Configuration Helper . ما متصل می شویم (به مورد 1 مراجعه کنید):

Config.extraPlugins = "confighelper"; config.placeholder = "(!LANG:متن ما"; // текст нашего placeholder !}

8. شکلک ها.افزونه درج Smiley مسئول لبخند در CKEditor "e است، در بسته استاندارد - بسته کامل گنجانده شده است.

شکلک ها به این شکل بیرون از جعبه به نظر می رسند:

برای جایگزینی آنها با خود، باید مسیر پوشه با تصاویر را در پیکربندی مشخص کنید (مرحله 1 را ببینید) smiley_path :

Config.smiley_path = "/sites/default/files/smileys/";

نام فایل هایی (تصاویر) که نمایش داده می شوند smiley_images را بنویسید:

config.smiley_images = ["smile_1.png","smile_2.png"];

و توضیحات (Hover description) smiley_descriptions

config.smiley_descriptions = ["description-1", "description-2"];

همچنین می‌توانید تعیین کنید چند ستون شکلک‌ها در (پیش‌فرض: 8) smiley_columns نمایش داده شوند.

config.smiley_columns = 6;

این کاری است که من انجام دادم

9. مرورگر املا.همانطور که نوشته شده است UksusoFFبررسی املای مبتنی بر مرورگر در CKEditor غیرفعال است.

Config.disableNativeSpellChecker = false;

10. منوی زمینه.در CKEditor با فشردن RMB باز می شود منوی زمینه، نه منوی اصلی مرورگر

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

من با دو ویرایشگر تصویری کار کردم Tinymceو ویرایشگر C.Kاگرچه این دو ویرایشگر بسیار محبوب هستند، صادقانه بگویم، ویرایشگر C.Kبیشتر دوستش داشتم یا بهتر بگویم برای کارهایم مناسب تر بود. بنابراین، در اینجا نحوه نصب ویرایشگر را در نظر خواهیم گرفت. ویرایشگر C.Kو یه وقت دیگه بهت میگم

برای شروع، مثل همیشه، باید ویرایشگر را دانلود کنیم، می توانید دانلود کنید پر شده- بسته، یا تمام بسته های لازم را در وب سایت رسمی انتخاب کنید.

پس از اتمام دانلود، آرشیو دانلود شده را به عنوان مثال در یک پوشه باز کنید لب هادر ریشه سایت قرار دارد. AT index.html بین تگ ها افزودن افزونه ویرایشگر ckeditor.js و البته کتابخانه جی کوئری.

HTML

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

HTML

به طور کلی، همه چیز در مورد نصب، پس از بارگذاری صفحه با شما، در قسمت متن مشخص شده است اکنون باید ویرایشگر متن ظاهر شود. این ویرایشگر را می توان به سلیقه شما سفارشی کرد، پس زمینه فریم ویرایشگر یا زبان را تغییر دهید، می توانید عرض و ارتفاع پنجره را تنظیم کنید. فایل برای این مورد استفاده می شود. config.js که در پوشه است libs/ckeditor/config.js . در این فایل می توانیم تنظیمات ذکر شده در بالا و بسیاری موارد دیگر را تنظیم کنیم. جزئیات بیشتر در وب سایت رسمی.

مثلا با تغییر فایل config.js که در زیر نشان داده شده است، زبان، رنگ حاشیه و ارتفاع ویرایشگر را تغییر می دهیم.

جاوا اسکریپت

CKEDITOR.editorConfig = تابع (پیکربندی) ( config.language = "en"; //language config.uiColor = "#AADC6E"; //رنگ قاب config.height = 300; //ارتفاع فریم );

همچنین می توانید ظاهر ویرایشگر را با تنظیم در تنظیمات تغییر دهید config.toolbarBasic- حداقل یا پر شده- حداکثر عملکرد ویرایشگر یا با استفاده از تنظیمات ویرایشگر را به صورت جداگانه سفارشی کنید config.toolbar_Basicهمانطور که در مثال زیر نشان داده شده است.

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

جاوا اسکریپت

CKEDITOR.editorConfig = تابع (config) ( config.width = 1050؛ //عرض پنجره ویرایشگر config.toolbar = "Basic"؛ //عملکرد ویرایشگر، Basic-minimum، Full-Maximum config.toolbar_Basic = //تنظیمات فردی از حالت اصلی [["پررنگ"، "مرتب"، "-"، "NumberedList"، "BulletedList"، "-"، "Link"، "Unlink"،"-،"Smiley"] ]; );

این امکان وجود دارد که دکمه ها را به گروه ها گروه بندی کنید، و دوباره، این به یک فایل نیاز دارد config.js .

جاوا اسکریپت

CKEDITOR.editorConfig = function(config) ( config.toolbarGroups = [ ( نام: "سند"، گروه ها: [ "mode"، "document"، "doctools" ] ), ( نام: "clipboard"، گروه ها: [ "clipboard" "، "لغو" ] ), ( نام: "ویرایش"، گروه ها: [ "یافتن"، "انتخاب"، "نسخه نگار"، "ویرایش" ] ), ( نام: "فرم ها"، گروه ها: [ "فرم ها" ] ), "/" ( نام: "سبک های پایه"، گروه ها: [ "سبک های پایه"، "پاکسازی" ] ), ( نام: "پاراگراف"، گروه ها: [ "لیست"، "تورفتگی"، "بلاک ها"، "تراز کردن" ", "bidi", "paragraph" ] ), ( نام: "پیوندها"، گروهها: [ "پیوندها" ] ), ( نام: "درج"، گروهها: [ "insert" ] ), "/"، (نام : "سبک ها"، گروه ها: [ "سبک ها" ] ), ( نام: "رنگ ها"، گروه ها: [ "رنگ ها" ] ), ( نام: "ابزار"، گروه ها: [ "ابزار" ] ), ( نام: " دیگران", گروه ها: [ "دیگران" ] ), ( نام: "درباره"، گروه ها: [ "درباره" ] ) ]; );

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

به کاتالوگ بروید libs/ckeditor/lang و در اینجا ما همه فایل ها را به جز زبان مورد نیاز خود حذف می کنیم، به عنوان مثال، ترک کنید: en.js و en.js . پس از انجام تمام دستکاری ها، اندازه و دایرکتوری نصف می شود ckeditorبه نظر خواهد رسید:

در این مورد من همه کسانی که ظرافت های دیگر این ویرایشگر را می دانند، در نظرات بنویسند.