Миний бодлоор CKEditor бол вэб сайтад зориулсан хамгийн шилдэг wysiwyg редакторуудын нэг юм. Сүүлийн үедХэрэглэгчийн амьдралыг хөнгөвчлөхийн тулд маш их утгагүй зүйл гарч ирсэн бөгөөд энэ нь эцэстээ саад болдог, жишээ нь ACF. Би үүнийг хэрхэн засах, идэвхгүй болгох талаар аль хэдийн мэддэг болсон. Гэхдээ нийтлэлийнхээ сэдэв рүү буцъя: CKEditor дээр залгаасуудыг хэрхэн суулгах талаар.

Би энд хоёр хандлагыг харж байна.

Эхлээд бид редакторын вэб сайт руу орж CKeditor-г өөрсдөдөө зориулж, тэр дундаа бидэнд хэрэгтэй залгаасуудыг дахин бүтээдэг. Үүнийг дараах байдлаар хийнэ. Бид ckeditor.com вэбсайт руу орж, татаж авах таб руу очно уу. Дараа нь "Эсвэл надад CKEditor-г өөрчлөхийг зөвшөөрөх" гэснийг сонгоно уу

Гэхдээ энэ тохиолдолд бүх залгаасууд харагдахгүй байна. Аливаа шинэ эсвэл тусгай залгаасуудыг бүтээхдээ оруулахын тулд та өөрийн бүтээцээ арай өөрөөр бүтээх хэрэгтэй. Нэмэлтүүд -> Plug-ins руу очоод баруун талд байгаа дараах хөдлөх цэсийг харна уу

Миний редакторт нэмэх товчийг дарахад залгаас угсралтад нэмэгдэнэ. Дуусмагц Build my editor дээр дарж, бидний суулгасан засварлагчийг үүсгэсэн редактороор солино.

Хоёрдахь арга нь кодыг өөрсдөө судлах сонирхолтой хүмүүст зориулагдсан болно.

ckeditor.com вэб сайтын нэмэлтүүд-> залгаасууд хэсэгт очоод шаардлагатай залгаас дээр дарна уу.

Татаж авах гэснийг сонгоод сайтын зааврыг дагана уу. Ихэнх тохиолдолд та өгөгдсөн залгаасуудын хамаарлыг суулгаж, залгаасыг өөрөө энэ талбарт бүртгүүлэх шаардлагатай болдог. тохиргооны файл config.js болон суулгагчийн хамаардаг залгаасыг таслалаар тусгаарлаж, жишээ нь,

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

CKEditor нь вэб хуудасны контент үүсгэх ажлыг хялбарчлахад зориулагдсан ашиглахад бэлэн HTML текст засварлагч юм. Энэ бол WYSIWYG засварлагч бөгөөд таны вэб хуудсанд текст засварлах функцийг шууд өгдөг.

CKEditor бол нээлттэй эхийн програм юм эх код, өөрөөр хэлбэл таны хүсэлтээр үүнийг өөрчилж болно. Үүний ашиг тус нь үнэгүй нэмэлтүүд, ил тод хөгжүүлэлтийн процесс бүхий програмуудыг хөгжүүлэхээ зогсоодоггүй идэвхтэй нийгэмлэгээс ирдэг.

3-CKEditor татаж авах

Танд CKEditor татаж авах 4 сонголт байна.

Татаж авах үр дүн:

Та хавтсанд CKEditor-ийн жишээг харж болно дээж:

4- Үндсэн жишээ:

Энэ нийтлэлийн бүх жишээ хавтсанд байна дээжТаны татаж авсан CKEditor дээр. Гэхдээ би үүнийг илүү хялбар болгохыг хичээх болно, ингэснээр танд илүү хялбар байх болно.

Хавтас үүсгэх миний жишээнүүд, энэ нийтлэл дэх жишээнүүд энэ хавтсанд байрлана.

4.1- JavaScript ашиглан Textarea элементүүдийг солих

Энгийн жишээ бол CKEditor.replace(..) ашиглан CKEditor-ээр солих явдал юм.

replacebycode.html

Textarea-г кодоор солино JavaScript код ашиглан Textarea элементүүдийг солино

Сайн байна уу CKEditor

CKEDITOR.replace("editor1");

Жишээг үзнэ үү:

Жишээ ажиллуулсны үр дүн:

4.2- Текст талбайн элементүүдийг нэрийн ангиар солино

Атрибуттай нэр,ба анги "ckeditor" нь CKEditor-аар автоматаар солигдох болно.

Текст

replacebyclass.html

Textarea-г ангийн нэрээр солино Textarea элементүүдийг ангийн нэрээр солино

Сайн байна уу CKEditor

Жишээ ажиллуулж байна:

4.3- jQuery ашиглан CKEditor үүсгэх

JQuery ашиглан CKEditor үүсгэх жишээ.

jQuery адаптер - CKEditor жишээ $(баримт).бэлэн(функц() ( $("#editor1").ckeditor(); )); function setValue() ( $("#editor1").val($("input#val").val()); ) jQuery ашиглан засварлагч үүсгэх

Сайн байна уу CKEditor

Таны харж байгаагаар тохиргоог create() арга руу дамжуулсан энгийн JavaScript объектоор тохируулдаг.

Онцлогуудыг устгаж байна

Бүтээлүүд нь анхдагчаар идэвхжсэн түгээлтийн багцад багтсан бүх боломжуудтай ирдэг. Тэдгээр нь CKEditor-д зориулсан залгаасууд гэж тодорхойлогддог.

Зарим тохиолдолд та өөрийн аппликешнд бүгд ижил бүтэц дээр суурилсан өөр өөр засварлагчийн тохиргоотой байх шаардлагатай байж болно. Үүний тулд чамд хэрэгтэйАжиллах үед засварлагч дээр байгаа залгаасуудыг удирдах.

Доорх жишээн дээр Гарчиг болон холбоосын залгаасуудыг устгасан:

// Анхдагч тохиргооноос цөөн хэдэн залгаасуудыг устгана уу. ClassicEditor .create(document .querySelector("#editor" ), ( RemovePlugins : [ "Гарчиг" , "Холбоос" ], хэрэгслийн мөр: [ "bold" , "налуу" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(алдаа => ( консол .лог(алдаа); ));

config.removePlugins ашиглан CKEditor-ийн бүтцээс залгаасуудыг устгахдаа болгоомжтой байгаарай. Хэрэв устгагдсан залгаасууд нь хэрэгслийн самбарын товчлуураар хангагдсан бол бүтээхэд багтсан өгөгдмөл хэрэгслийн самбарын тохиргоо хүчингүй болно. Энэ тохиолдолд та дээрх жишээн дээрх шиг шинэчлэгдсэн багаж самбарын тохиргоог оруулах шаардлагатай.

Плагинуудын жагсаалт

Барилга бүр нь хэд хэдэн нэмэлт өргөтгөлтэй байдаг. Та өөрийн бүтээх боломжтой бүх залгаасуудыг хялбархан жагсааж болно:

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

Нарийн төвөгтэй функцуудыг нэмж байна

CKEditor-ийн бүтээц нь бүх боломжит функцуудыг агуулдаггүй тул тэдгээрт нэмэлт функц нэмэх цорын ганц арга бол захиалгат бүтэц үүсгэх явдал юм.

Энгийн (бие даасан) функцуудыг нэмж байна

Дүрэм болгонд үл хамаарах зүйл байдаг. Хэдийгээр бүтцийг дахин бүтээхгүйгээр @ckeditor/ckeditor5-core эсвэл @ckeditor/ckeditor5-engine (бараг бүх албан ёсны залгаасуудыг багтаасан)-д хамааралтай залгаасуудыг нэмэх боломжгүй ч энгийн, хамааралгүй залгаасуудыг нэмэх боломжтой хэвээр байна. .

ClassicEditor-ыг "@ckeditor/ckeditor5-build-classic"-аас импортлох; функц MyUploadAdapterPlugin ( засварлагч ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = функц ( ачигч ) ( // ... ); ) // Захиалгат байршуулах адаптерийг засварлагчийн залгаас болгон ачаална уу. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(алдаа => ( консол .log(алдаа); )); Хэрэгслийн самбарын тохиргоо

Хэрэгслийн мөр агуулсан бүтцүүдэд хамгийн оновчтой анхдагч тохиргоог тодорхойлсон байдаг. Танд өөр хэрэгслийн самбарын зохицуулалт хэрэгтэй байж магадгүй бөгөөд үүнийг тохиргоогоор дамжуулан хийж болно.

Редактор бүр өөр хэрэгслийн самбарын тохиргооны схемтэй байж болох тул түүний баримт бичгийг шалгахыг зөвлөж байна. Ямар ч тохиолдолд дараах жишээ танд ерөнхий санааг өгч магадгүй юм.

ClassicEditor .create(document .querySelector("#editor" ), ( хэрэгслийн мөр: [ "bold" , "налуу" , "холбоос" ] )) .catch(алдаа => ( консол .log(алдаа); ));

Дээрх нь UI-тай холбоотой хатуу тохиргоо юм. Хэрэгслийн самбарын зүйлийг устгаснаар засварлагчийн дотоод хэсгээс уг функцийг хасдаггүй. Хэрэгслийн самбарын тохиргооны зорилго бол функцуудыг устгах явдал юм бол зөв шийдэл нь тэдгээрийн залгаасуудыг устгах явдал юм. Дэлгэрэнгүй мэдээллийг дээрээс шалгана уу.

Боломжтой зүйлсийг жагсааж байна

Та засварлагчдаа байгаа бүх хэрэгслийн самбарыг сэргээхийн тулд дараах хэсгийг ашиглаж болно.

Массив .from(editor.ui.componentFactory.names());

Би вэбсайт дээрээ BUEditor ашигласан - энгийн, тохиромжтой засварлагч, гэхдээ энэ нь хэрэглэгчдэд тийм ч тохиромжтой биш юм. Би CKEditor-ийг суулгах талаар байнга боддог байсан, гэхдээ энэ нь надад ямар нэгэн мангас мэт санагдаж байсан ч бодит байдал дээр бүх зүйл тийм ч аймшигтай биш болсон.

Модулийг хэрхэн суулгах талаар уншина уу.

Модулаараа холбогдсоны дараа таб дээрх admin/config/content/ckeditor/edit/profile_assignment хуудаснаас РЕДАКТОРЫН ГАРАХ, бүлэгт PluginsИдэвхжүүлэх шалгах хайрцаг гарч ирнэ. Асаах, хадгалах, шалгах.

3. Холбоос оруулах. Хайрцагнаас гадна холбоос оруулах харилцах цонхонд шаардлагагүй, ойлгомжгүй зүйлс багтсан болно. Бид үүнийг Энгийн холбоосын залгаасаар солино. Хэрхэн суулгах талаар 2-р алхамыг үзнэ үү. Холбох (1-р зүйлийг үзнэ үү):

Config.extraPlugins = "SimpleLink";

Шинэ залгаасын дүрс (товч) гарч ирнэ.

4. Зураг оруулах. Энд бүх зүйл холбоостой адил байна; та линкээр дамжуулан зураг оруулахын тулд Simple Image залгаасыг суулгаж болно.

Config.extraPlugins = "Энгийн дүрс";

Эсвэл нэг товшилтоор байршуулах модулийг ашиглан зураг байршуулна уу. . Цааш унших. Би BUEditor дээр хоёуланг нь ашигласан ч гэсэн хоёр дахь аргыг сонгосон.

Миний нэмэхийг хүссэн цорын ганц зүйл бол Сайжруулсан зургийн залгаас нь Widget болон Lineutils гэсэн хоёр нэмэлт нэмэлтийг шаарддаг.

Бүртгэлийг харах хүртлээ залгаас яагаад эхлээгүйг би ойлгосонгүй

5. Гадаад төрх. Moono арьсыг анхдагч байдлаар ашигладаг, гэхдээ би BUEditor-ийн дүр төрхийг харуулахыг хүссэн.

BUEditor иймэрхүү харагдаж байв

7. Орлуулагч. Орлуулагч нэмэхийн тулд залгаасыг суулгана уу (2-р цэгийг үзнэ үү) Тохиргооны туслах. Холбох (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"];

Мөн тайлбар (хулганы тайлбар) smiley_descriptions

Config.smiley_descriptions = ["тайлбар-1", "тайлбар-2"];

Та мөн инээмсэглэлүүдийг хэдэн баганад харуулахыг зааж өгч болно (өгөгдмөл: 8) smiley_columns

Config.smiley_columns = 6;

Эндээс надад авсан зүйл байна

9. Хөтөч дээр үсгийн алдаа шалгах. UksusoFF-ийн CKEditor дээр бичсэнчлэн хөтчийн зөв бичгийн алдаа шалгахыг идэвхгүй болгосон байна. Энэ идэвхгүй болгохын тулд (бага зэрэг тавтологи) та тохиргоонд дараахийг бичих хэрэгтэй:

Config.disableNativeSpellChecker = худал;

10. Контекст цэс. CKEditor дээр RMB дээр дарахад хөтчийн үндсэн цэс биш контекст цэс нээгдэнэ

Татаж авах сонголтууд

CKEditor 5-ийг татаж авах хэд хэдэн сонголт байдаг:

Засварлагчийг татаж авсны дараа засварлагчийг хэрхэн үүсгэхийг харахын тулд үндсэн 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 суулгах --save @ckeditor/ckeditor5-build-balloon-block # Эсвэл: npm суулгах --save @ckeditor/ckeditor5-build-decoupled-document

Дараа нь CKEditor-г node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js хаягаар ашиглах боломжтой. Үүнийг мөн require("@ckeditor/ckeditor5-build-") ашиглан өөрийн код руу шууд оруулж болно.

Zip татаж авах

Хүссэн хувилбар руу очоод татаж аваарай. Жишээлбэл, та Сонгодог засварлагчийн ckeditor5-build-classic-1.0.0.zip файлыг татаж авч болно.

.zip файлыг өөрийн төслийн доторх тусгай сан руу задлаарай. CKEditor-ийн шинэ хувилбарыг суулгасны дараа кэшийг зохих ёсоор хүчингүй болгохын тулд засварлагчийн хувилбарыг лавлах нэрэнд оруулахыг зөвлөж байна.

Оруулсан файлууд

• ckeditor.js – Засварлагч болон бүх залгаасуудыг агуулсан ашиглахад бэлэн засварлагч багц.
• ckeditor.js.map – Засварлагчийн багцын эх газрын зураг.
• орчуулга/ – UI орчуулга засварлагч (UI хэлний тохиргоог үзнэ үү).
• README.md болон LICENSE.md

API-г ачаалж байна

Програмдаа CKEditor 5 бүтээцийг татаж аваад суулгасны дараа редакторын API-г хуудаснууддаа ашиглах боломжтой болгох цаг болжээ. Үүний тулд API нэвтрэх цэгийн скриптийг ачаалахад хангалттай.

CKEditor скрипт ачаалагдсаны дараа та боломжтой