به نظر من، CKEditor یکی از بهترین ویرایشگرهای wysiwyg برای وب سایت ها است. اخیراحرفهای بیهوده زیادی برای ساده کردن زندگی کاربر در آن ظاهر شده است که در نهایت مانع ایجاد می شود، به عنوان مثال ACF. من قبلاً می دانم چگونه آن را ویرایش و غیرفعال کنم. اما اجازه دهید به موضوع مقاله خود بازگردیم: نحوه نصب افزونه ها در CKEditor.

من در اینجا دو رویکرد می بینم.

ابتدا به وب سایت ویرایشگر می رویم و CKeditor را برای خودمان بازسازی می کنیم، از جمله افزونه هایی که نیاز داریم. این کار به صورت زیر انجام می شود. ما به وب سایت ckeditor.com می رویم، به تب دانلود بروید. بعد، Or let me customize CKEditor را انتخاب کنید

اما در این حالت همه افزونه ها نمایش داده نمی شوند. برای گنجاندن هر افزونه جدید یا خاص در بیلد خود، باید بیلد خود را کمی متفاوت بسازید. به Add-ons -> Plug-ins بروید و منوی متحرک زیر را در سمت راست ببینید

وقتی روی دکمه add to my editor کلیک می کنید، افزونه به اسمبلی اضافه می شود. پس از اتمام، روی Build my editor کلیک کنید و ویرایشگر داخلی ما را با ویرایشگر تولید شده جایگزین کنید.

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

در وب سایت ckeditor.com به قسمت add-ons->plug-ins رفته و بر روی افزونه مورد نیاز کلیک کنید.

دانلود را انتخاب کنید و دستورالعمل های سایت را دنبال کنید. در بیشتر موارد، آنها یا به این واقعیت می رسند که شما باید وابستگی هایی را برای یک افزونه مشخص نصب کنید و خود افزونه را در فیلد ثبت کنید. فایل پیکربندی config.js و پلاگینی که نصب کننده به آن وابسته است، به عنوان مثال، با کاما از هم جدا شده اند،

Config.extraPlugins = "codemirror,youtube,imagerotate";

CKEditor یک ویرایشگر متن HTML آماده برای استفاده است که برای ساده سازی ایجاد محتوای صفحه وب طراحی شده است. این یک ویرایشگر WYSIWYG است که توابع ویرایش متن را مستقیماً در صفحات وب شما فراهم می کند.

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

3-CKEditor را دانلود کنید

شما 4 گزینه برای دانلود CKEditor دارید.

نتیجه دانلود:

می توانید نمونه هایی از CKEditor را در پوشه مشاهده کنید نمونه ها:

4- مثال های اساسی:

تمام نمونه های این مقاله در پوشه موجود است نمونه هادر CKEditor که دانلود کردید. اما من سعی می کنم این کار را برای شما راحت تر کنم.

یک پوشه ایجاد کنید نمونه های من، نمونه های این مقاله در این پوشه قرار خواهند گرفت.

4.1- عناصر Textarea را با استفاده از جاوا اسکریپت جایگزین کنید

یک مثال ساده استفاده از CKEditor.replace(..) برای جایگزینی از طریق CKEditor است.

replacebycode.html

جایگزینی Textarea با کد جایگزین عناصر Textarea با استفاده از کد جاوا اسکریپت

سلام CKEditor

CKEDITOR.replace("editor1");

نمونه را ببینید:

نتایج اجرای مثال:

4.2- عناصر textarea را با class name جایگزین کنید

با داشتن صفت نام،و class = "ckeditor" به طور خودکار با CKEditor جایگزین می شود.

متن

replacebyclass.html

جایگزین Textareas با نام کلاس جایگزین Textarea Elements با نام کلاس

سلام CKEditor

اجرای مثال:

4.3- CKEditor را با جی کوئری ایجاد کنید

نمونه ای از ایجاد CKEditor با استفاده از JQuery.

آداپتور jQuery - CKEditor Sample $(document).ready(function() ($("#editor1").ckeditor(); )); تابع setValue() ($("#editor1").val($("input#val").val()); ) با jQuery ویرایشگر ایجاد کنید

سلام CKEditor

همانطور که می بینید، تنظیمات توسط یک شی جاوا اسکریپت ساده به متد ()create ارسال می شود.

حذف ویژگی ها

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

در برخی موارد، ممکن است نیاز داشته باشید که تنظیمات ویرایشگر متفاوتی را در برنامه خود داشته باشید، همه بر اساس یک ساخت. برای این منظور، تو نیاز داریبرای کنترل پلاگین های موجود در ویرایشگر در زمان اجرا.

در مثال زیر پلاگین های Heading و Link حذف شده اند:

// چند افزونه را از تنظیمات پیش فرض حذف کنید. ClassicEditor .create(document.querySelector("#editor"), ( removePlugins : [ "Heading" , "Link" ], toolbar : [ "bold" , "Italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(خطا => ( کنسول .log(خطا); ));

هنگام حذف افزونه ها از ساخت های CKEditor با استفاده از config.removePlugins مراقب باشید. اگر افزونه‌های حذف شده دکمه‌های نوار ابزار را ارائه می‌کردند، پیکربندی پیش‌فرض نوار ابزار موجود در یک ساخت، نامعتبر می‌شود. در چنین مواردی باید پیکربندی نوار ابزار به روز شده را مانند مثال بالا ارائه دهید.

لیست پلاگین ها

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

ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName);

افزودن ویژگی های پیچیده

از آنجایی که ساخت‌های CKEditor شامل همه ویژگی‌های ممکن نمی‌شوند، تنها راه برای افزودن ویژگی‌های بیشتر به آن‌ها ایجاد یک ساخت سفارشی است.

افزودن ویژگی های ساده (مستقل).

برای هر قاعده ای استثنا وجود دارد. اگرچه اضافه کردن افزونه‌هایی که وابستگی به @ckeditor/ckeditor5-core یا @ckeditor/ckeditor5-engine (که تقریباً همه افزونه‌های رسمی موجود را شامل می‌شود) بدون بازسازی بیلد غیرممکن است، همچنان می‌توان افزونه‌های ساده و بدون وابستگی را اضافه کرد. .

وارد کردن ClassicEditor از "@ckeditor/ckeditor5-build-classic"؛ function MyUploadAdapterPlugin ( ویرایشگر ) ( editor.plugins.get("FileRepository").createUploadAdapter = تابع (بارکننده) ( // ...); ) // بارگذاری آداپتور آپلود سفارشی به عنوان یک افزونه ویرایشگر. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); راه اندازی نوار ابزار

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

هر ویرایشگر ممکن است طرح پیکربندی نوار ابزار متفاوتی داشته باشد، بنابراین توصیه می شود مستندات آن را بررسی کنید. در هر صورت، مثال زیر ممکن است یک ایده کلی به شما بدهد:

ClassicEditor .create(document .querySelector("#editor"), ( نوار ابزار : [ "bold" , "italic" , "link" ] )) .catch(error => (consol .log(error); ));

مورد بالا یک پیکربندی سختگیرانه مرتبط با UI است. حذف یک مورد نوار ابزار این ویژگی را از قسمت داخلی ویرایشگر حذف نمی کند. اگر هدف شما از پیکربندی نوار ابزار حذف ویژگی ها است، راه حل مناسب حذف افزونه های مربوطه آنهاست. برای اطلاعات بیشتر بالا را بررسی کنید

فهرست اقلام موجود

می توانید از قطعه زیر برای بازیابی همه موارد نوار ابزار موجود در ویرایشگر خود استفاده کنید:

آرایه .from(editor.ui.componentFactory.names());

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

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

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

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 = "متن ما"; // текст нашего placeholder !}

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

شکلک ها از جعبه به این شکل هستند:

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

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 را فشار می‌دهید، یک منوی زمینه باز می‌شود، نه منوی اصلی مرورگر

گزینه های دانلود

چندین گزینه برای دانلود بیلدهای CKEditor 5 وجود دارد:

پس از دانلود ویرایشگر به راهنمای Basic API بروید تا نحوه ایجاد ویرایشگرها را ببینید.

CDN

ساخت‌ها را می‌توان مستقیماً از داخل صفحات بارگیری کرد، که برای تحویل فوق سریع محتوا در سراسر جهان بهینه شده است. هنگام استفاده از CDN، در واقع نیازی به دانلود نیست.

npm

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

نصب یک بیلد با npm به سادگی فراخوانی یکی از دستورات زیر در پروژه شماست:

Npm install --save @ckeditor/ckeditor5-build-classic # یا: npm install --save @ckeditor/ckeditor5-build-inline # یا: npm install --save @ckeditor/ckeditor5-build-balloon # یا: npm install --save @ckeditor/ckeditor5-build-balloon-block # یا: npm install --save @ckeditor/ckeditor5-build-decoupled-document

سپس CKEditor در node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js در دسترس خواهد بود. همچنین می‌توان آن را مستقیماً با نیاز ("@ckeditor/ckeditor5-build-") به کد شما وارد کرد.

دانلود زیپ

به بخش بروید و ساخت دلخواه خود را دانلود کنید. برای مثال، می‌توانید فایل ckeditor5-build-classic-1.0.0.zip را برای ساخت ویرایشگر کلاسیک دانلود کنید.

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

فایل های گنجانده شده

• ckeditor.js - بسته ویرایشگر آماده برای استفاده، حاوی ویرایشگر و همه افزونه ها.
• ckeditor.js.map – نقشه منبع برای بسته ویرایشگر.
• ترجمه ها/ – ترجمه های رابط کاربری ویرایشگر (به تنظیمات زبان رابط کاربری مراجعه کنید).
• README.md و LICENSE.md

در حال بارگیری API

پس از دانلود و نصب یک بیلد CKEditor 5 در برنامه خود، زمان آن رسیده است که API ویرایشگر را در صفحات خود در دسترس قرار دهید. برای این منظور کافی است اسکریپت نقطه ورودی API را بارگیری کنید:

هنگامی که اسکریپت CKEditor بارگیری شد، می توانید