ในความคิดของฉัน CKEditor เป็นหนึ่งในโปรแกรมแก้ไข wysiwyg ที่ดีที่สุดสำหรับเว็บไซต์ เมื่อเร็วๆ นี้มีคำพูดที่ไม่มีความหมายมากมายปรากฏขึ้นเพื่อทำให้ชีวิตของผู้ใช้ง่ายขึ้น ซึ่งท้ายที่สุดจะเข้ามาขวางทาง เช่น ACF ฉันรู้วิธีแก้ไขและปิดการใช้งานแล้ว แต่กลับมาที่หัวข้อบทความของเรา: วิธีติดตั้งปลั๊กอินบน CKEditor

ฉันเห็นสองวิธีที่นี่

ขั้นแรก เราไปที่เว็บไซต์ของบรรณาธิการและสร้าง CKeditor ขึ้นมาใหม่สำหรับตัวเราเอง รวมถึงปลั๊กอินที่เราต้องการด้วย ทำได้ดังนี้ เราไปที่เว็บไซต์ ckeditor.com ไปที่แท็บดาวน์โหลด จากนั้นเลือกหรือให้ฉันปรับแต่ง CKEditor

แต่ในกรณีนี้ จะไม่มีการแสดงปลั๊กอินทั้งหมด หากต้องการรวมปลั๊กอินใหม่หรือปลั๊กอินพิเศษไว้ในบิลด์ของคุณ คุณจะต้องสร้างบิลด์ให้แตกต่างออกไปเล็กน้อย ไปที่ Add-on -> Plug-ins และดูเมนูย้ายต่อไปนี้ทางด้านขวา

เมื่อคุณคลิกปุ่มเพิ่มไปยังตัวแก้ไขของฉัน ปลั๊กอินจะถูกเพิ่มลงในแอสเซมบลี เมื่อเสร็จแล้ว คลิกสร้างตัวแก้ไขของฉัน และแทนที่ตัวแก้ไขในตัวของเราด้วยตัวแก้ไขที่สร้างขึ้น

แนวทางที่สองมีไว้สำหรับผู้ที่สนใจเจาะลึกโค้ดด้วยตนเอง

บนเว็บไซต์ ckeditor.com ไปที่ส่วน Add-on->ปลั๊กอิน และคลิกที่ปลั๊กอินที่ต้องการ

เลือกดาวน์โหลดและปฏิบัติตามคำแนะนำจากเว็บไซต์ โดยส่วนใหญ่แล้วอาจมาจากข้อเท็จจริงที่ว่าคุณต้องติดตั้งการพึ่งพาสำหรับปลั๊กอินที่กำหนดและลงทะเบียนปลั๊กอินเองในฟิลด์ ไฟล์การกำหนดค่า config.js และปลั๊กอินที่ตัวติดตั้งใช้ โดยคั่นด้วยเครื่องหมายจุลภาค เช่น

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

CKEditor เป็นโปรแกรมแก้ไขข้อความ HTML ที่พร้อมใช้งานซึ่งออกแบบมาเพื่อทำให้การสร้างเนื้อหาหน้าเว็บง่ายขึ้น นี่คือโปรแกรมแก้ไขแบบ WYSIWYG ที่ให้ฟังก์ชันแก้ไขข้อความไปยังหน้าเว็บของคุณโดยตรง

CKEditor เป็นแอปพลิเคชั่นโอเพ่นซอร์ส รหัสแหล่งที่มานั่นคือสามารถเปลี่ยนแปลงได้ตามความต้องการของคุณ ประโยชน์ของมันมาจากชุมชนที่กระตือรือร้นซึ่งไม่เคยหยุดพัฒนาแอปพลิเคชันด้วยส่วนเสริมฟรีและกระบวนการพัฒนาที่โปร่งใส

3- ดาวน์โหลด CKEditor

คุณมี 4 ตัวเลือกในการดาวน์โหลด CKEditor

ดาวน์โหลดผลลัพธ์:

คุณสามารถดูตัวอย่างของ CKEditor ได้ในโฟลเดอร์ ตัวอย่าง:

4- ตัวอย่างพื้นฐาน:

ตัวอย่างทั้งหมดของบทความนี้อยู่ในโฟลเดอร์ ตัวอย่างใน CKEditor ที่คุณดาวน์โหลดมา แต่ฉันจะพยายามทำให้มันง่ายขึ้นเพื่อที่มันจะง่ายขึ้นสำหรับคุณ

สร้างโฟลเดอร์ ตัวอย่างของฉันตัวอย่างในบทความนี้จะอยู่ในโฟลเดอร์นี้

4.1- แทนที่องค์ประกอบ Textarea โดยใช้ JavaScript

ตัวอย่างง่ายๆ คือการใช้ CKEditor.replace(..) เพื่อแทนที่ผ่าน CKEditor

แทนที่ด้วยcode.html

แทนที่ Textarea ด้วยโค้ด แทนที่องค์ประกอบ Textarea โดยใช้โค้ด JavaScript

สวัสดี CKEditor

CKEDITOR.replace("editor1");

ดูตัวอย่าง:

ผลลัพธ์ของการรันตัวอย่าง:

4.2- แทนที่องค์ประกอบ textarea ด้วยคลาสชื่อ

โดยมีคุณลักษณะ ชื่อ,และ class ="ckeditor" จะถูกแทนที่ด้วย CKEditor โดยอัตโนมัติ

ข้อความ

แทนที่ด้วยclass.html

แทนที่ Textareas ด้วยชื่อคลาส แทนที่องค์ประกอบ Textarea ด้วยชื่อคลาส

สวัสดี CKEditor

เรียกใช้ตัวอย่าง:

4.3- สร้าง CKEditor ด้วย jQuery

ตัวอย่างการสร้าง CKEditor โดยใช้ JQuery

อะแดปเตอร์ jQuery - ตัวอย่าง CKEditor $(document).ready(function() ( $("#editor1").ckeditor(); )); ฟังก์ชั่น setValue() ( $("#editor1").val($("input#val").val()); ) สร้างโปรแกรมแก้ไขด้วย jQuery

สวัสดี CKEditor

อย่างที่คุณเห็น การกำหนดค่าถูกกำหนดโดยอ็อบเจ็กต์ JavaScript แบบธรรมดาที่ส่งผ่านไปยังเมธอด create()

การลบคุณสมบัติ

รุ่นมาพร้อมกับคุณสมบัติทั้งหมดที่รวมอยู่ในแพ็คเกจการแจกจ่ายที่เปิดใช้งานตามค่าเริ่มต้น ถูกกำหนดให้เป็นปลั๊กอินสำหรับ CKEditor

ในบางกรณี คุณอาจจำเป็นต้องมีการตั้งค่าตัวแก้ไขที่แตกต่างกันในแอปพลิเคชันของคุณ โดยทั้งหมดขึ้นอยู่กับรุ่นเดียวกัน เพื่อจุดประสงค์นั้น คุณต้องการเพื่อควบคุมปลั๊กอินที่มีอยู่ในตัวแก้ไขขณะรันไทม์

ในตัวอย่างด้านล่าง ปลั๊กอินส่วนหัวและลิงก์จะถูกลบออก:

// ลบปลั๊กอินบางส่วนออกจากการตั้งค่าเริ่มต้น ClassicEditor .create(document .querySelector("#editor" ), ( ลบปลั๊กอิน : [ "Heading" , "Link" ], แถบเครื่องมือ : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(ข้อผิดพลาด => ( console .log(error); ));

โปรดใช้ความระมัดระวังในการลบปลั๊กอินออกจากบิลด์ CKEditor โดยใช้ config.removePlugins หากปลั๊กอินที่ถูกลบออกมีปุ่มแถบเครื่องมือ การกำหนดค่าแถบเครื่องมือเริ่มต้นที่รวมอยู่ในบิลด์จะไม่ถูกต้อง ในกรณีเช่นนี้ คุณจะต้องจัดเตรียมการกำหนดค่าแถบเครื่องมือที่อัปเดตตามตัวอย่างด้านบน

รายการปลั๊กอิน

แต่ละบิลด์มีปลั๊กอินจำนวนหนึ่งให้เลือก คุณสามารถแสดงรายการปลั๊กอินทั้งหมดที่มีอยู่ในรุ่นของคุณได้อย่างง่ายดาย:

ClassicEditor.builtinPlugins.map(ปลั๊กอิน => Plugin.pluginName);

การเพิ่มคุณสมบัติที่ซับซ้อน

เนื่องจากบิลด์ CKEditor ไม่ได้รวมคุณสมบัติที่เป็นไปได้ทั้งหมด วิธีเดียวที่จะเพิ่มคุณสมบัติเพิ่มเติมให้กับคุณสมบัติเหล่านั้นคือการสร้างบิลด์แบบกำหนดเอง

การเพิ่มคุณสมบัติที่เรียบง่าย (สแตนด์อโลน)

มีข้อยกเว้นสำหรับทุกกฎ แม้ว่าจะไม่สามารถเพิ่มปลั๊กอินที่มีการขึ้นต่อกันกับ @ckeditor/ckeditor5-core หรือ @ckeditor/ckeditor5-engine (ซึ่งรวมถึงปลั๊กอินอย่างเป็นทางการที่มีอยู่เกือบทั้งหมด) โดยไม่ต้องสร้างบิลด์ใหม่ แต่ก็ยังสามารถเพิ่มปลั๊กอินที่เรียบง่ายและไม่มีการพึ่งพาได้ .

นำเข้า ClassicEditor จาก "@ckeditor/ckeditor5-build-classic" ; ฟังก์ชัน MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // โหลดอะแดปเตอร์อัปโหลดแบบกำหนดเองเป็นปลั๊กอินของตัวแก้ไข ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(ข้อผิดพลาด => ( console .log(error); )); การตั้งค่าแถบเครื่องมือ

ในรุ่นที่มีแถบเครื่องมือจะมีการกำหนดค่าเริ่มต้นที่เหมาะสมที่สุดไว้ คุณอาจต้องมีการจัดเรียงแถบเครื่องมือที่แตกต่างกัน และสามารถทำได้ผ่านการกำหนดค่า

เอดิเตอร์แต่ละคนอาจมีโครงร่างการกำหนดค่าแถบเครื่องมือที่แตกต่างกัน ดังนั้นจึงแนะนำให้ตรวจสอบเอกสารประกอบของมัน ไม่ว่าในกรณีใด ตัวอย่างต่อไปนี้อาจให้แนวคิดทั่วไปแก่คุณ:

ClassicEditor .create(document .querySelector("#editor" ), ( แถบเครื่องมือ : [ "bold" , "italic" , "link" ] )) .catch(error => ( console .log(error); ));

ข้างต้นเป็นการกำหนดค่าที่เกี่ยวข้องกับ UI ที่เข้มงวด การลบรายการแถบเครื่องมือไม่ได้เป็นการลบคุณลักษณะออกจากภายในของเอดิเตอร์ หากเป้าหมายของคุณในการกำหนดค่าแถบเครื่องมือคือการลบคุณลักษณะต่างๆ ทางออกที่ถูกต้องคือการลบปลั๊กอินที่เกี่ยวข้องออกด้วย ตรวจสอบด้านบนเพื่อดูข้อมูลเพิ่มเติม

แสดงรายการสินค้าที่มีอยู่

คุณสามารถใช้ตัวอย่างต่อไปนี้เพื่อดึงข้อมูลรายการแถบเครื่องมือทั้งหมดที่มีอยู่ในโปรแกรมแก้ไขของคุณ:

อาร์เรย์ .from(editor.ui.componentFactory.names());

ฉันใช้ BUEditor บนเว็บไซต์ของฉัน - โปรแกรมแก้ไขที่ง่ายและสะดวก แต่ไม่สะดวกสำหรับผู้ใช้ ฉันมักจะคิดที่จะติดตั้ง CKEditor แต่ดูเหมือนสัตว์ประหลาดสำหรับฉัน แต่ในความเป็นจริงแล้วทุกอย่างกลับกลายเป็นว่าไม่น่ากลัวนัก

อ่านวิธีการติดตั้งโมดูล

หลังจากเชื่อมต่อผ่านโมดูลของคุณแล้ว บนหน้า admin/config/content/ckeditor/edit/profile_assignment ในแท็บ การปรากฏตัวของบรรณาธิการ, ในบทที่ ปลั๊กอินช่องทำเครื่องหมายการเปิดใช้งานจะปรากฏขึ้น เปิด บันทึก ตรวจสอบ

3. การแทรกลิงก์ เมื่อแกะกล่อง กล่องโต้ตอบการแทรกลิงก์จะมีสิ่งที่ไม่จำเป็นและไม่ชัดเจนมากมาย เราแทนที่ด้วยปลั๊กอิน Simple link วิธีการติดตั้ง ดูขั้นตอนที่ 2 เชื่อมต่อ (ดูจุดที่ 1):

Config.extraPlugins = "SimpleLink";

ไอคอนปลั๊กอินใหม่ (ปุ่ม) จะปรากฏขึ้นเช่นกัน

4. การแทรกรูปภาพ ที่นี่ทุกอย่างเหมือนกับลิงก์ คุณสามารถติดตั้งปลั๊กอิน Simple Image เพื่อแทรกรูปภาพผ่านลิงก์ได้

Config.extraPlugins = "รูปภาพธรรมดา";

หรืออัพโหลดภาพโดยใช้โมดูล One Click Upload . อ่านเพิ่มเติม. ฉันตัดสินใจใช้วิธีที่สอง แม้ว่าฉันจะใช้ทั้งสองอย่างใน BUEditor ก็ตาม

สิ่งเดียวที่ฉันต้องการเพิ่มคือปลั๊กอิน Enhanced Image ต้องใช้ปลั๊กอิน 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:

หลังจากดาวน์โหลดตัวแก้ไขแล้ว ให้ข้ามไปที่คู่มือ Basic API เพื่อดูวิธีสร้างตัวแก้ไข

ซีดีเอ็น

สามารถโหลดบิลด์ภายในเพจได้โดยตรงจาก ซึ่งได้รับการปรับให้เหมาะสมสำหรับการจัดส่งเนื้อหาที่รวดเร็วเป็นพิเศษทั่วโลก เมื่อใช้ CDN ไม่จำเป็นต้องดาวน์โหลดเลย

เวลา 22.00 น

บิลด์ทั้งหมดจะถูกปล่อยออกมาในเวลา npm ใช้ลิงก์การค้นหานี้เพื่อดูแพ็คเกจบิลด์อย่างเป็นทางการทั้งหมดที่มีในเวลา 23.00 น.

การติดตั้งบิลด์ด้วย npm นั้นง่ายดายเพียงแค่เรียกใช้คำสั่งใดคำสั่งหนึ่งต่อไปนี้ในโปรเจ็กต์ของคุณ:

ติดตั้ง Npm --save @ckeditor/ckeditor5-build-classic # หรือ: ติดตั้ง npm --save @ckeditor/ckeditor5-build-inline # หรือ: ติดตั้ง npm --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 นอกจากนี้ยังสามารถนำเข้าโดยตรงไปยังรหัสของคุณโดย need("@ckeditor/ckeditor5-build-")

ดาวน์โหลดแบบซิป

ไปที่และดาวน์โหลดบิลด์ที่คุณต้องการ ตัวอย่างเช่น คุณอาจดาวน์โหลดไฟล์ ckeditor5-build-classic-1.0.0.zip สำหรับบิลด์ตัวแก้ไข Classic

แยกไฟล์ .zip ลงในไดเร็กทอรีเฉพาะภายในโปรเจ็กต์ของคุณ ขอแนะนำให้รวมเวอร์ชันตัวแก้ไขไว้ในชื่อไดเร็กทอรีเพื่อให้แน่ใจว่าแคชจะใช้ไม่ได้อย่างเหมาะสมเมื่อมีการติดตั้ง CKEditor เวอร์ชันใหม่

รวมไฟล์

• ckeditor.js – ชุดตัวแก้ไขที่พร้อมใช้งานซึ่งประกอบด้วยตัวแก้ไขและปลั๊กอินทั้งหมด
• ckeditor.js.map – แผนผังต้นฉบับสำหรับบันเดิลตัวแก้ไข
• การแปล/ – การแปล UI ของตัวแก้ไข (ดูการตั้งค่าภาษา UI)
• README.md และ LICENSE.md

กำลังโหลด API

หลังจากดาวน์โหลดและติดตั้งบิลด์ CKEditor 5 ในแอปพลิเคชันของคุณแล้ว ก็ถึงเวลาที่จะทำให้ API ตัวแก้ไขพร้อมใช้งานในเพจของคุณ เพื่อจุดประสงค์ดังกล่าว โหลดสคริปต์จุดเข้าใช้งาน API ก็เพียงพอแล้ว:

เมื่อโหลดสคริปต์ CKEditor แล้ว คุณก็สามารถทำได้