Menimcha, CKEditor veb-saytlar uchun eng yaxshi muharrirlardan biridir. Yaqinda unda foydalanuvchining hayotini soddalashtirish uchun juda ko'p bema'ni gaplar paydo bo'ldi, bu oxir-oqibat to'sqinlik qiladi, masalan, ACF. Men uni qanday tahrirlash va o'chirishni allaqachon bilaman. Ammo keling, maqolamiz mavzusiga qaytaylik: plaginlarni CKEditor-ga qanday o'rnatish kerak.

Men bu erda ikkita yondashuvni ko'raman.

Birinchidan, biz muharrirning veb-saytiga o'tamiz va CKeditor-ni o'zimiz uchun, jumladan, kerakli plaginlarni qayta quramiz. Bu quyidagicha amalga oshiriladi. Biz ckeditor.com veb-saytiga o'tamiz, yuklab olish yorlig'iga o'tamiz. Keyin, Yoki CKEditorni sozlashimga ruxsat bering

Ammo bu holda, barcha plaginlar ko'rsatilmaydi. Qurilishga har qanday yangi yoki maxsus plaginlarni kiritish uchun siz o'z tuzilmangizni biroz boshqacha qurishingiz kerak. Qo'shimchalar -> Plaginlarga o'ting va o'ngdagi quyidagi harakatlanuvchi menyuni ko'ring

Tahrirlovchimga qo'shish tugmasini bosganingizda plagin yig'ilishga qo'shiladi. Tugatgandan so'ng, "Mening muharririmni yaratish" tugmasini bosing va o'rnatilgan muharririmizni yaratilgan bilan almashtiring.

Ikkinchi yondashuv kodni o'zlari o'rganishga qiziquvchilar uchundir.

Cckeditor.com veb-saytida plaginlar-> plaginlar bo'limiga o'ting va kerakli plaginni bosing.

Yuklab olish-ni tanlang va saytdagi ko'rsatmalarga amal qiling. Ko'pincha ular ma'lum bir plagin uchun bog'liqliklarni o'rnatishingiz va plaginning o'zini maydonda ro'yxatdan o'tkazishingiz kerakligi bilan bog'liq. konfiguratsiya fayli config.js va oʻrnatuvchi bogʻliq boʻlgan plagin vergul bilan ajratilgan, masalan,

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

CKEditor - bu veb-sahifa tarkibini yaratishni soddalashtirish uchun mo'ljallangan, foydalanishga tayyor HTML matn muharriri. Bu matnni tahrirlash funksiyalarini bevosita veb-sahifalaringizga taqdim etadigan WYSIWYG muharriri.

CKEditor ochiq kodli dasturdir manba kodi, ya'ni sizning so'rovingiz bo'yicha o'zgartirilishi mumkin. Uning foydaliligi bepul qo'shimchalar va shaffof ishlab chiqish jarayoni bilan ilovalarni ishlab chiqishni hech qachon to'xtatmaydigan faol hamjamiyatdan keladi.

3-CKEditor-ni yuklab oling

Sizda CKEditor-ni yuklab olish uchun 4 ta variant mavjud.

Yuklab olish natijasi:

Siz papkada CKEditor misollarini ko'rishingiz mumkin namunalar:

4- Asosiy misollar:

Ushbu maqolaning barcha misollari papkada mavjud namunalar Siz yuklab olgan CKEditor-da. Lekin siz uchun oson bo'lishi uchun men buni osonlashtirishga harakat qilaman.

Jild yarating mening misollarim, ushbu maqoladagi misollar ushbu papkada joylashgan bo'ladi.

4.1- JavaScript yordamida Textarea elementlarini almashtiring

Oddiy misol, CKEditor orqali almashtirish uchun CKEditor.replace(..) dan foydalanishdir.

replacebycode.html

Textarea-ni kod bilan almashtiring JavaScript kodidan foydalanib, Textarea elementlarini almashtiring

Salom CKEditor

CKEDITOR.replace("muharrir1");

Misolga qarang:

Misolni ishga tushirish natijalari:

4.2- Matn maydoni elementlarini nom sinfi bilan almashtiring

Atributga ega bo'lish bilan ism, va "ckeditor" sinfi avtomatik ravishda CKEditor bilan almashtiriladi.

Matn

replacebyclass.html

Textarealarni sinf nomi bilan almashtiring Textarea elementlarini sinf nomi bilan almashtiring

Salom CKEditor

Misolni ishga tushirish:

4.3- jQuery yordamida CKEditor yarating

JQuery yordamida CKEditor yaratish misoli.

jQuery adapteri - CKEditor namunasi $(hujjat).ready(function() ( $("#editor1").ckeditor(); )); funktsiya setValue() ( $("#editor1").val($("input#val").val()); ) jQuery yordamida muharrirlar yarating

Salom CKEditor

Ko'rib turganingizdek, konfiguratsiyalar create() usuliga o'tkazilgan oddiy JavaScript obyekti tomonidan o'rnatiladi.

Xususiyatlarni olib tashlash

Qurilishlar sukut bo'yicha yoqilgan tarqatish paketiga kiritilgan barcha xususiyatlar bilan birga keladi. Ular CKEditor uchun plaginlar sifatida belgilangan.

Ba'zi hollarda ilovangizda bir xil tuzilishga asoslangan turli xil muharrir sozlamalariga ega bo'lishingiz kerak bo'lishi mumkin. Shu maqsadda, senga kerak ish vaqtida muharrirda mavjud plaginlarni boshqarish uchun.

Quyidagi misolda Sarlavha va Havola plaginlari olib tashlandi:

// Standart sozlamalardan bir nechta plaginlarni olib tashlang. ClassicEditor .create(document .querySelector("#editor" ), ( RemovePlugins: [ "Sarlavha" , "Link" ], asboblar paneli: [ "qalin" , "italik" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(xato => ( konsol .log(xato); ));

config.removePlugins yordamida CKEditor tuzilmalaridan plaginlarni olib tashlashda ehtiyot bo'ling. Agar o'chirilgan plaginlar asboblar paneli tugmalari bilan ta'minlangan bo'lsa, qurilmaga kiritilgan standart asboblar paneli konfiguratsiyasi yaroqsiz bo'ladi. Bunday holda, yuqoridagi misoldagi kabi yangilangan asboblar paneli konfiguratsiyasini taqdim etishingiz kerak.

Plaginlar ro'yxati

Har bir tuzilishda bir nechta plaginlar mavjud. Qurilishda mavjud bo'lgan barcha plaginlarni osongina ro'yxatlashingiz mumkin:

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

Murakkab xususiyatlarni qo'shish

CKEditor tuzilmalari barcha mumkin bo'lgan xususiyatlarni o'z ichiga olmaydi, ularga qo'shimcha funktsiyalarni qo'shishning yagona yo'li - bu maxsus tuzilishni yaratish .

Oddiy (mustaqil) xususiyatlarni qo'shish

Har bir qoida uchun istisno mavjud. Qurilishni qayta qurmasdan @ckeditor/ckeditor5-core yoki @ckeditor/ckeditor5-engine (bu deyarli barcha mavjud rasmiy plaginlarni o'z ichiga oladi) ga bog'liq bo'lgan plaginlarni qo'shish mumkin bo'lmasa-da, oddiy, bog'liqliksiz plaginlarni qo'shish mumkin. .

ClassicEditor-ni "@ckeditor/ckeditor5-buil-classic" dan import qiling; funktsiyasi MyUploadAdapterPlugin ( muharrir ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = funktsiya ( loader ) ( // ... ); ) // Maxsus yuklash adapterini muharrir plagini sifatida yuklang. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(xato => ( konsol .log(xato); )); Asboblar panelini sozlash

Asboblar panelini o'z ichiga olgan tuzilmalarda u uchun optimal standart konfiguratsiya aniqlanadi. Asboblar panelini boshqa tartibga solish kerak bo'lishi mumkin va bunga konfiguratsiya orqali erishish mumkin.

Har bir muharrir turli xil asboblar paneli konfiguratsiya sxemasiga ega bo'lishi mumkin, shuning uchun uning hujjatlarini tekshirish tavsiya etiladi. Har holda, quyidagi misol sizga umumiy fikr berishi mumkin:

ClassicEditor .create(document .querySelector("#editor" ), ( asboblar paneli : [ "qalin" , "italik" , "havola" ] )) .catch(xato => ( konsol .log(xato); ));

Yuqoridagilar UI bilan bog'liq qat'iy konfiguratsiyadir. Asboblar paneli elementini olib tashlash bu xususiyatni muharrirning ichki qismidan olib tashlamaydi. Agar asboblar paneli konfiguratsiyasidan maqsadingiz xususiyatlarni o'chirish bo'lsa, to'g'ri yechim ularning tegishli plaginlarini ham olib tashlashdir. Qo'shimcha ma'lumot olish uchun yuqorida tekshiring.

Mavjud elementlar ro'yxati

Muharriringizda mavjud barcha asboblar paneli elementlarini olish uchun quyidagi parchadan foydalanishingiz mumkin:

Massiv .from(editor.ui.componentFactory.names());

Men veb-saytimda BUEditor-dan foydalandim - oddiy, qulay muharrir, lekin u foydalanuvchilar uchun unchalik qulay emas. Men tez-tez CKEditor-ni o'rnatish haqida o'ylardim, lekin bu menga qandaydir yirtqich hayvondek tuyuldi, lekin aslida hamma narsa unchalik qo'rqinchli emas edi.

Modulni qanday o'rnatishni o'qing.

Modulingiz orqali ulangandan so'ng, yorliqdagi admin/config/content/ckeditor/edit/profile_assignment sahifasida MUHARRIRINING KO'RIYI, bobda Plaginlar Faollashtirish belgisi paydo bo'ladi. Yoqing, saqlang, tekshiring.

3. Bog'lanishlarni kiritish. Qutidan tashqari, havola qo'shish dialog oynasi keraksiz va tushunarsiz narsalar to'plamini o'z ichiga oladi. Biz uni Simple link plaginiga almashtiramiz. Qanday o'rnatish kerak, 2-bosqichga qarang. Ulanish (1-bandga qarang):

Config.extraPlugins = "SimpleLink";

Yangi plagin belgisi (tugmasi) ham paydo bo'ladi.

4. Tasvirlarni kiritish. Bu erda hamma narsa havolalar bilan bir xil; siz havolalar orqali rasmlarni kiritish uchun Simple Image plaginini o'rnatishingiz mumkin.

Config.extraPlugins = "SimpleImage";

Yoki One Click Upload moduli yordamida rasmlarni yuklang. . Ko'proq o'qish. Men BUEditor-da ikkalasini ham ishlatgan bo'lsam ham, ikkinchi usulga qaror qildim.

Men qo'shmoqchi bo'lgan yagona narsa shundaki, Kengaytirilgan tasvir plaginiga yana ikkita plagin Widget va Lineutils kerak bo'ladi.

Men jurnalga qaramagunimcha, plagin nima uchun ishga tushmaganini tushunolmadim

5. Tashqi ko'rinish. Moono terisi sukut bo'yicha ishlatiladi, lekin men tashqi ko'rinishni BUEditor ko'rinishiga keltirmoqchi edim.

BUEditor shunday ko'rinishga ega edi

7. To‘ldiruvchi. To'ldiruvchini qo'shish uchun plaginni o'rnating (2-bandga qarang) Konfiguratsiya yordamchisi. Ulanish (1-bandga qarang):

Config.extraPlugins = "confighelper"; config.placeholder = "Bizning matn"; // текст нашего placeholder !}

8. Smayliklar. Insert Smiley plagini CKEditor-da tabassumlar uchun javob beradi, u standart paketga kiritilgan - To'liq paket.

Smayllar qutidan tashqarida shunday ko'rinadi:

Ularni o'zingiznikiga almashtirish uchun konfiguratsiyada smiley_path tasvirlari bo'lgan jildga yo'lni belgilashingiz kerak (1-bosqichga qarang):

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

Ko'rsatiladigan fayllar (tasvirlar) nomlarini kiriting smiley_images :

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

Va ta'rif (suratchi tavsifi) smiley_descriptions

Config.smiley_descriptions = ["tavsif-1", "tavsif-2"];

Shuningdek, smiley_columns (standart: 8) ichida tabassumlar nechta ustunda ko‘rsatilishini belgilashingiz mumkin.

Config.smiley_columns = 6;

Mana menda nima bor

9. Brauzer imlo tekshiruvi. UksusoFF CKEditor da yozganidek, brauzer imlo tekshiruvi o'chirilgan.Bu o'chirishni o'chirish uchun (biroz tavtologiya), siz konfiguratsiyaga yozishingiz kerak:

Config.disableNativeSpellChecker = noto'g'ri;

10. Kontekst menyusi. CKEditor-da RMB tugmasini bosganingizda brauzerning mahalliy menyusi emas, balki kontekst menyusi ochiladi

Yuklab olish imkoniyatlari

CKEditor 5 tuzilmalarini yuklab olishning bir necha variantlari mavjud:

Muharrirni yuklab olgandan so'ng tahrirlovchilarni qanday yaratishni ko'rish uchun asosiy API qo'llanmasiga o'ting.

CDN

Qurilishlar to'g'ridan-to'g'ri sahifalar ichida yuklanishi mumkin, bu butun dunyo bo'ylab super tezkor kontent yetkazib berish uchun optimallashtirilgan. CDN-dan foydalanganda, aslida yuklab olish kerak emas.

npm

Barcha tuzilmalar npm da chiqariladi. Npm-da mavjud bo'lgan barcha rasmiy qurish paketlarini ko'rish uchun ushbu qidiruv havolasidan foydalaning.

Npm bilan qurilishni o'rnatish loyihangizdagi quyidagi buyruqlardan birini chaqirish kabi oddiy:

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

Keyin CKEditor node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js manzilida mavjud bo'ladi. Shuningdek, uni to'g'ridan-to'g'ri kodingizga require("@ckeditor/ckeditor5-build-") orqali import qilish mumkin.

Zip yuklab olish

O'zingiz yoqtirgan qurilmaga o'ting va yuklab oling. Masalan, Klassik muharrir tuzilishi uchun ckeditor5-build-classic-1.0.0.zip faylini yuklab olishingiz mumkin.

.zip faylini loyihangiz ichidagi maxsus katalogga chiqarib oling. CKEditor-ning yangi versiyasi o'rnatilgandan so'ng keshning to'g'ri bekor qilinishini ta'minlash uchun muharrir versiyasini katalog nomiga kiritish tavsiya etiladi.

Kiritilgan fayllar

• ckeditor.js - muharrir va barcha plaginlarni o'z ichiga olgan foydalanishga tayyor muharrirlar to'plami.
• ckeditor.js.map - Tahrirlovchilar to'plami uchun manba xaritasi.
• tarjimalar/ – UI tarjimalari muharriri (UI tilini sozlash boʻlimiga qarang).
• README.md va LICENSE.md

API yuklanmoqda

Ilovangizga CKEditor 5 qurilishini yuklab olib, o'rnatganingizdan so'ng, tahrirlovchining API-ni sahifalaringizda mavjud qilish vaqti keldi. Buning uchun API kirish nuqtasi skriptini yuklash kifoya:

CKEditor skripti yuklangandan so'ng, mumkin