என் கருத்துப்படி, CKEditor வலைத்தளங்களுக்கான சிறந்த wysiwyg எடிட்டர்களில் ஒன்றாகும். சமீபத்தில்பயனரின் வாழ்க்கையை எளிமையாக்க நிறைய கேலிக்கூத்துகள் அதில் தோன்றியுள்ளன, இது இறுதியில் வழிக்கு வரும், எடுத்துக்காட்டாக ACF. அதை எப்படி எடிட் செய்வது மற்றும் முடக்குவது என்பது எனக்கு முன்பே தெரியும். ஆனால் எங்கள் கட்டுரையின் தலைப்புக்குத் திரும்புவோம்: CKEditor இல் செருகுநிரல்களை எவ்வாறு நிறுவுவது.

நான் இங்கு இரண்டு அணுகுமுறைகளைக் காண்கிறேன்.

முதலில், நாங்கள் எடிட்டரின் வலைத்தளத்திற்குச் சென்று, நமக்குத் தேவையான செருகுநிரல்கள் உட்பட, நமக்காக CKeditor ஐ மீண்டும் உருவாக்குகிறோம். இது பின்வருமாறு செய்யப்படுகிறது. நாங்கள் ckeditor.com வலைத்தளத்திற்குச் செல்கிறோம், பதிவிறக்க தாவலுக்குச் செல்லவும். அடுத்து, தேர்ந்தெடுக்கவும் அல்லது CKEditor ஐ தனிப்பயனாக்க அனுமதிக்கவும்

ஆனால் இந்த வழக்கில், அனைத்து செருகுநிரல்களும் காட்டப்படாது. உங்கள் கட்டமைப்பில் ஏதேனும் புதிய அல்லது சிறப்பு செருகுநிரல்களைச் சேர்க்க, உங்கள் கட்டமைப்பை சற்று வித்தியாசமாக உருவாக்க வேண்டும். துணை நிரல்கள் -> செருகுநிரல்களுக்குச் சென்று வலதுபுறத்தில் பின்வரும் நகரும் மெனுவைப் பார்க்கவும்

எனது எடிட்டரில் சேர் பொத்தானைக் கிளிக் செய்தால், செருகுநிரல் சட்டசபையில் சேர்க்கப்படும். முடிந்ததும், பில்ட் மை எடிட்டரைக் கிளிக் செய்து, எங்களின் உள்ளமைந்த எடிட்டரை உருவாக்கியதை மாற்றவும்.

இரண்டாவது அணுகுமுறை குறியீட்டை ஆராய்வதில் ஆர்வமுள்ளவர்களுக்கானது.

ckeditor.com என்ற இணையதளத்தில், add-ons->plug-ins பகுதிக்குச் சென்று தேவையான செருகுநிரலைக் கிளிக் செய்யவும்.

பதிவிறக்கம் என்பதைத் தேர்ந்தெடுத்து, தளத்தில் உள்ள வழிமுறைகளைப் பின்பற்றவும். பெரும்பாலும், கொடுக்கப்பட்ட சொருகிக்கான சார்புகளை நிறுவி, சொருகியை புலத்தில் பதிவு செய்ய வேண்டும் என்ற உண்மைக்கு அவை கீழே வருகின்றன. கட்டமைப்பு கோப்பு config.js மற்றும் நிறுவி சார்ந்திருக்கும் செருகுநிரல், காற்புள்ளிகளால் பிரிக்கப்பட்டது, எடுத்துக்காட்டாக,

Config.extraPlugins = "குறியீடு, யூடியூப், இமேஜரோடேட்";

CKEditor என்பது வலைப்பக்க உள்ளடக்கத்தை உருவாக்குவதை எளிமையாக்க வடிவமைக்கப்பட்ட HTML உரை திருத்தி பயன்படுத்த தயாராக உள்ளது. இது WYSIWYG எடிட்டராகும், இது உங்கள் வலைப்பக்கங்களுக்கு நேரடியாக உரை திருத்தும் செயல்பாடுகளை வழங்குகிறது.

CKEditor ஒரு திறந்த மூல பயன்பாடு ஆகும் மூல குறியீடு, அதாவது, உங்கள் கோரிக்கையின் பேரில் அதை மாற்றலாம். இலவச துணை நிரல்கள் மற்றும் வெளிப்படையான மேம்பாட்டு செயல்முறையுடன் பயன்பாடுகளை உருவாக்குவதை ஒருபோதும் நிறுத்தாத செயலில் உள்ள சமூகத்திலிருந்து அதன் பயன் வருகிறது.

3-CKEditor ஐப் பதிவிறக்கவும்

CKEditor ஐப் பதிவிறக்க உங்களுக்கு 4 விருப்பங்கள் உள்ளன.

பதிவிறக்க முடிவு:

கோப்புறையில் CKEditor இன் எடுத்துக்காட்டுகளைப் பார்க்கலாம் மாதிரிகள்:

4- அடிப்படை எடுத்துக்காட்டுகள்:

இந்த கட்டுரையின் அனைத்து எடுத்துக்காட்டுகளும் கோப்புறையில் உள்ளன மாதிரிகள்நீங்கள் பதிவிறக்கிய CKEditor இல். ஆனால் நான் அதை எளிதாக்க முயற்சிப்பேன், அது உங்களுக்கு எளிதாக இருக்கும்.

ஒரு கோப்புறையை உருவாக்கவும் என் எடுத்துக்காட்டுகள், இந்த கட்டுரையில் உள்ள எடுத்துக்காட்டுகள் இந்த கோப்புறையில் இருக்கும்.

4.1- JavaScript ஐப் பயன்படுத்தி Textarea உறுப்புகளை மாற்றவும்

CKEditor வழியாக மாற்றுவதற்கு CKEditor.replace(..) ஐப் பயன்படுத்துவது ஒரு எளிய எடுத்துக்காட்டு.

Replacebycode.html

Textarea ஐ குறியீடு மூலம் மாற்றவும், JavaScript குறியீட்டைப் பயன்படுத்தி Textarea கூறுகளை மாற்றவும்

வணக்கம் CKEditor

CKEDITOR.replace("editor1");

உதாரணத்தைப் பார்க்கவும்:

உதாரணத்தை இயக்குவதன் முடிவுகள்:

4.2- textarea உறுப்புகளை பெயர் வகுப்புடன் மாற்றவும்

பண்புடன் பெயர்,மற்றும் class="ckeditor" தானாகவே CKEditor ஆல் மாற்றப்படும்.

உரை

replacebyclass.html

Textareas ஐ வகுப்புப் பெயரால் மாற்றவும், Textarea உறுப்புகளை வகுப்புப் பெயரால் மாற்றவும்

வணக்கம் CKEditor

உதாரணத்தை இயக்குதல்:

4.3- jQuery மூலம் CKEditor ஐ உருவாக்கவும்

JQuery ஐப் பயன்படுத்தி CKEditor ஐ உருவாக்குவதற்கான எடுத்துக்காட்டு.

jQuery அடாப்டர் - CKEditor மாதிரி $(ஆவணம்).ready(function() ( $("#editor1").ckeditor(); )); செயல்பாடு setValue() ( $("#editor1").val($("input#val").val()); ) jQuery மூலம் எடிட்டர்களை உருவாக்கவும்

வணக்கம் CKEditor

நீங்கள் பார்க்க முடியும் என, உருவாக்கம் () முறைக்கு அனுப்பப்பட்ட எளிய ஜாவாஸ்கிரிப்ட் பொருளால் கட்டமைப்புகள் அமைக்கப்படுகின்றன.

அம்சங்களை நீக்குதல்

பில்ட்கள் விநியோக தொகுப்பில் உள்ள அனைத்து அம்சங்களுடனும் இயல்புநிலையாக செயல்படுத்தப்படும். அவை CKEditor க்கான செருகுநிரல்களாக வரையறுக்கப்படுகின்றன.

சில சந்தர்ப்பங்களில், உங்கள் பயன்பாட்டில் வெவ்வேறு எடிட்டர் அமைப்புகளை நீங்கள் வைத்திருக்க வேண்டியிருக்கலாம், இவை அனைத்தும் ஒரே கட்டமைப்பின் அடிப்படையில் இருக்கும். அந்த நோக்கத்திற்காக, உனக்கு தேவைஇயக்க நேரத்தில் எடிட்டரில் கிடைக்கும் செருகுநிரல்களைக் கட்டுப்படுத்த.

கீழே உள்ள எடுத்துக்காட்டில் தலைப்பு மற்றும் இணைப்பு செருகுநிரல்கள் அகற்றப்பட்டன:

// இயல்புநிலை அமைப்பிலிருந்து சில செருகுநிரல்களை அகற்றவும். ClassicEditor .create(document .querySelector("#editor"), ( removePlugins : [ "Heading" , "Link" ], toolbar : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" )).பிடிப்பு(பிழை => (கன்சோல் .log(error); ));

config.removePlugins ஐப் பயன்படுத்தி CKEditor பில்ட்களில் இருந்து செருகுநிரல்களை அகற்றும்போது கவனமாக இருக்கவும். அகற்றப்பட்ட செருகுநிரல்கள் கருவிப்பட்டி பொத்தான்களை வழங்கினால், ஒரு கட்டமைப்பில் சேர்க்கப்பட்டுள்ள இயல்புநிலை கருவிப்பட்டி உள்ளமைவு தவறானதாகிவிடும். அப்படியானால், மேலே உள்ள எடுத்துக்காட்டில் உள்ளதைப் போல மேம்படுத்தப்பட்ட கருவிப்பட்டி உள்ளமைவை நீங்கள் வழங்க வேண்டும்.

செருகுநிரல்களின் பட்டியல்

ஒவ்வொரு கட்டமைப்பிலும் பல செருகுநிரல்கள் உள்ளன. உங்கள் உருவாக்கத்தில் கிடைக்கும் அனைத்து செருகுநிரல்களையும் எளிதாக பட்டியலிடலாம்:

ClassicEditor.builtinPlugins.map(சொருகி => plugin.pluginName);

சிக்கலான அம்சங்களைச் சேர்த்தல்

CKEditor பில்ட்கள் அனைத்து சாத்தியமான அம்சங்களையும் சேர்க்காததால், தனிப்பயன் கட்டமைப்பை உருவாக்குவதே அவற்றில் கூடுதல் அம்சங்களைச் சேர்க்க ஒரே வழி.

எளிய (தனியான) அம்சங்களைச் சேர்த்தல்

ஒவ்வொரு விதிக்கும் ஒரு விதிவிலக்கு உண்டு. கட்டமைப்பை மறுகட்டமைக்காமல் @ckeditor/ckeditor5-core அல்லது @ckeditor/ckeditor5-engine (அதில் ஏற்கனவே உள்ள அனைத்து அதிகாரப்பூர்வ செருகுநிரல்களும் அடங்கும்) சார்புகளைக் கொண்ட செருகுநிரல்களைச் சேர்ப்பது சாத்தியமில்லை என்றாலும், எளிமையான, சார்பு இல்லாத செருகுநிரல்களைச் சேர்ப்பது இன்னும் சாத்தியமாகும். .

"@ckeditor/ckeditor5-build-classic" இலிருந்து ClassicEditor ஐ இறக்குமதி செய்க ; செயல்பாடு MyUploadAdapterPlugin ( editor ) ( 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 => (கன்சோல் .log(error); ));

மேலே உள்ளவை கடுமையான UI தொடர்பான உள்ளமைவாகும். கருவிப்பட்டி உருப்படியை அகற்றுவது எடிட்டர் இன்டர்னல்களில் இருந்து அம்சத்தை அகற்றாது. கருவிப்பட்டி உள்ளமைவுடன் உங்கள் இலக்கு அம்சங்களை அகற்றுவதாக இருந்தால், சரியான தீர்வாக அவற்றுக்கான செருகுநிரல்களையும் அகற்ற வேண்டும். மேலும் தகவலுக்கு மேலே பார்க்கவும்.

கிடைக்கும் பொருட்களை பட்டியலிடுதல்

உங்கள் எடிட்டரில் உள்ள அனைத்து கருவிப்பட்டி உருப்படிகளையும் மீட்டெடுக்க பின்வரும் துணுக்கைப் பயன்படுத்தலாம்:

வரிசை .இருந்து(editor.ui.componentFactory.names());

எனது இணையதளத்தில் நான் BUEditor ஐப் பயன்படுத்தினேன் - ஒரு எளிய, வசதியான எடிட்டர், ஆனால் இது பயனர்களுக்கு மிகவும் வசதியாக இல்லை. CKEditor ஐ நிறுவுவது பற்றி நான் அடிக்கடி நினைத்தேன், ஆனால் அது எனக்கு ஒருவித அசுரன் போல் தோன்றியது, ஆனால் உண்மையில் எல்லாம் மிகவும் பயமாக இல்லை.

தொகுதியை எவ்வாறு நிறுவுவது என்பதைப் படியுங்கள்.

உங்கள் தொகுதி வழியாக இணைத்த பிறகு, தாவலில் உள்ள admin/config/content/ckeditor/edit/profile_assignment பக்கத்தில் ஆசிரியரின் தோற்றம், அத்தியாயத்தில் செருகுநிரல்கள்செயல்படுத்தும் தேர்வுப்பெட்டி தோன்றும். இயக்கவும், சேமிக்கவும், சரிபார்க்கவும்.

3. இணைப்புகளைச் செருகுதல். பெட்டிக்கு வெளியே, இணைப்பு செருகும் உரையாடல் பெட்டியில் தேவையற்ற மற்றும் தெளிவற்ற விஷயங்கள் உள்ளன. நாங்கள் அதை எளிய இணைப்பு சொருகி மூலம் மாற்றுகிறோம். எப்படி நிறுவுவது, படி 2 ஐப் பார்க்கவும். இணைக்கவும் (புள்ளி 1 ஐப் பார்க்கவும்):

Config.extraPlugins = "SimpleLink";

ஒரு புதிய செருகுநிரல் ஐகானும் (பொத்தான்) தோன்றும்.

4. படங்களைச் செருகுதல். இங்கே எல்லாம் இணைப்புகளைப் போலவே உள்ளது; இணைப்புகள் வழியாக படங்களைச் செருக எளிய பட செருகுநிரலை நிறுவலாம்.

Config.extraPlugins = "SimpleImage";

அல்லது ஒரு கிளிக் அப்லோட் தொகுதியைப் பயன்படுத்தி படங்களைப் பதிவேற்றவும். . மேலும் படிக்கவும். நான் BUEditor இல் இரண்டையும் பயன்படுத்தினாலும், இரண்டாவது முறையைத் தேர்ந்தெடுத்தேன்.

நான் சேர்க்க விரும்பும் ஒரே விஷயம் என்னவென்றால், மேம்படுத்தப்பட்ட பட செருகுநிரலுக்கு மேலும் இரண்டு செருகுநிரல்கள் விட்ஜெட் மற்றும் லைனியூட்டில்கள் தேவை.

நான் பதிவைப் பார்க்கும் வரை செருகுநிரல் ஏன் தொடங்கவில்லை என்று என்னால் புரிந்து கொள்ள முடியவில்லை

5. தோற்றம். மூனோ ஸ்கின் இயல்பாகவே பயன்படுத்தப்படுகிறது, ஆனால் நான் BUEditor தோற்றத்திற்கு தோற்றத்தைக் கொண்டுவர விரும்பினேன்.

BUEditor இப்படித்தான் இருந்தது

7. ப்ளாஸ்ஹோல்டர். ஒதுக்கிடத்தைச் சேர்க்க, செருகுநிரலை நிறுவவும் (புள்ளி 2 ஐப் பார்க்கவும்) உள்ளமைவு உதவி. இணைக்கவும் (புள்ளி 1 ஐப் பார்க்கவும்):

Config.extraPlugins = "confighelper"; config.placeholder = "எங்கள் உரை"; // текст нашего placeholder !}

8. ஸ்மைலிஸ். இன்செர்ட் ஸ்மைலி சொருகி CKEditor இல் புன்னகைக்கு பொறுப்பாகும்; இது நிலையான தொகுப்பில் சேர்க்கப்பட்டுள்ளது - முழு தொகுப்பு.

ஸ்மைலிகள் பெட்டிக்கு வெளியே இருப்பது இதுதான்:

அவற்றை உங்கள் சொந்தமாக மாற்ற, நீங்கள் கட்டமைப்பில் ஸ்மைலி_பாத் படங்களுடன் கோப்புறைக்கான பாதையைக் குறிப்பிட வேண்டும் (படி 1 ஐப் பார்க்கவும்):

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

ஸ்மைலி_படங்கள் காட்டப்படும் கோப்புகளின் பெயர்களை (படங்கள்) உள்ளிடவும்:

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

மற்றும் விளக்கம் (கோவர் விளக்கம்) ஸ்மைலி_விளக்கங்கள்

Config.smiley_descriptions = ["விளக்கம்-1", "விளக்கம்-2"];

(இயல்புநிலை: 8) ஸ்மைலி_நெடுவரிசைகளில் ஸ்மைலிகளை எத்தனை நெடுவரிசைகளைக் காட்ட வேண்டும் என்பதையும் நீங்கள் குறிப்பிடலாம்

config.smiley_columns = 6;

இதோ எனக்கு கிடைத்தது

9. உலாவி எழுத்துப்பிழை சரிபார்ப்பு. UksusoFF CKEditor இல் எழுதியது போல், உலாவி எழுத்துப்பிழை சரிபார்ப்பு முடக்கப்பட்டுள்ளது. இந்த முடக்கத்தை முடக்குவதற்கு (ஒரு சிறிய tautology), நீங்கள் கட்டமைப்பில் எழுத வேண்டும்:

Config.disableNativeSpellChecker = தவறானது;

10. சூழல் மெனு. CKEditor இல், நீங்கள் RMB ஐ அழுத்தும்போது, ​​ஒரு சூழல் மெனு திறக்கிறது, சொந்த உலாவி மெனு அல்ல

பதிவிறக்க விருப்பங்கள்

CKEditor 5 பில்ட்களைப் பதிவிறக்க பல விருப்பங்கள் உள்ளன:

எடிட்டரைப் பதிவிறக்கிய பிறகு, எடிட்டர்களை எவ்வாறு உருவாக்குவது என்பதைப் பார்க்க அடிப்படை API வழிகாட்டிக்குச் செல்லவும்.

CDN

உலகளவில் அதிவேக உள்ளடக்க விநியோகத்திற்கு உகந்ததாக இருக்கும் பில்டுகளை நேரடியாக பக்கங்களுக்குள் ஏற்றலாம். CDN ஐப் பயன்படுத்தும் போது உண்மையில் பதிவிறக்கம் தேவையில்லை.

npm

அனைத்து உருவாக்கங்களும் npm இல் வெளியிடப்படுகின்றன. npm இல் கிடைக்கும் அனைத்து அதிகாரப்பூர்வ உருவாக்க தொகுப்புகளையும் காண இந்த தேடல் இணைப்பைப் பயன்படுத்தவும்.

npm உடன் ஒரு கட்டமைப்பை நிறுவுவது உங்கள் திட்டத்தில் பின்வரும் கட்டளைகளில் ஒன்றை அழைப்பது போல் எளிது:

Npm நிறுவல் --save @ckeditor/ckeditor5-build-classic # அல்லது: npm நிறுவவும் --save @ckeditor/ckeditor5-build-inline # அல்லது: npm நிறுவவும் --save @ckeditor/ckeditor5-build-பலூன் # அல்லது: npm நிறுவவும் --save @ckeditor/ckeditor5-build-baloon-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 – எடிட்டர் மூட்டைக்கான ஆதார வரைபடம்.
• மொழிபெயர்ப்பு/ – எடிட்டர் UI மொழிபெயர்ப்புகள் (UI மொழியை அமைத்தல் பார்க்கவும்).
• README.md மற்றும் LICENSE.md

API ஐ ஏற்றுகிறது

உங்கள் பயன்பாட்டில் CKEditor 5 உருவாக்கத்தைப் பதிவிறக்கம் செய்து நிறுவிய பிறகு, உங்கள் பக்கங்களில் எடிட்டர் API கிடைக்கச் செய்ய வேண்டிய நேரம் இது. அந்த நோக்கத்திற்காக, API நுழைவு புள்ளி ஸ்கிரிப்டை ஏற்றினால் போதும்:

CKEditor ஸ்கிரிப்ட் ஏற்றப்பட்டதும், உங்களால் முடியும்